나의 RM

자동 스크롤 애드온 수정판

2026-07-18T17:26:24+09:00

skyo님의 자동 스크롤 애드온

Rhymix - 자동 스크롤 애드온 정밀 자동 스크롤 & TOP 이동 애드온 (게시판 본문 전용) 게시글 본문(상세 페이지)을 읽을 때 긴 본문과 댓글 영역을 손쉽게 탐색할 수 있도록 돕는 자동 스크롤(Auto Scroll) 및 우측 하단 TOP 이동 버튼 애드온입... from RHYMIX.ORG

SketchBook5 게시판 스킨에 맞게 수정하고 변형했습니다.

Ver 1.0.1 - 2026.07.18기능추가개선

• 개선목적지 HTML ID 에 Class도 가능하게 수정 — #comment or .btm_mn 같이 # 이나 . 을 추가해야 합니다.

SketchBook5 게시판스킨의 경우 #cmtPosition를 입력하면 본문까지 .btm_mn 입력시 최하단 까지 스크롤 됩니다.

목적지 HTML ID or Class 의 기본 값이 #cmtPosition 이라 스케치북에 최적화됨

• 개선디자인 수정 — 자동 스크롤 및 TOP 버튼을 심플하게 출력

• 기능추가마우스 드래그 — 자동 스크롤 영역을 마우스로 드래그해서 위치 이동 가능

- 자동 스크롤 영역 더블 클릭시 접기 / 펴기

• 기능추가속도 조절 다이얼 — 속도 조절 다이얼 표시를 추가할 수 있습니다. 설정에서 선택 가능

• 개선최하단에서 Start 클릭시 Top으로 이동후 제 스크롤

탭 형태의 콘텐츠 박스 MH Tab

2026-07-16T12:56:11+09:00

에디터에서 탭(책갈피) 형태의 콘텐츠 박스를 만드는 에디터 컴포넌트입니다.

탭 제목과 HTML 내용, 선택/비선택 탭 색상, 탭 순서, 제목/내용 폰트 크기와 색상을 지정할 수 있습니다.

Mh Tab 특징Pop Up View버전 정보

다운받은 파일 압축을 풀어서 mh_tab 폴더를 ./modules/editor/components/mh_tab 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "탭 박스" 추가됩니다.

• 탭 박스 — 본문내용에 책갈피 형태의 탭 박스가 생성됩니다.

• 팝업창에서 입력 — 팝업창에서 탭의 제목과 내용을 입력 할 수 있습니다.

• 에디터 창에서 입력 — 에디터 입력 창에서 이미지나 기타 항목을 추가할 수 있습니다.

• 탭 순서 변경 — 탭의 순서를 임의로 바꿀 수 있습니다.

• 여러 항목 선택 — 탭의 색상, 폰터 크기등을 지정 할 수 있습니다.

Ver 1.3 - 2026.07.24최신기능추가개선

• 기능추가Tab 색상 — 각 Tab에 색과 배경을 지정 할 수 있습니다.

• 개선Tab의 형태 지정 — Tab의 형태도 둥근 형태(기존)와 마름모 모양 중 선택 가능 합니다.

• 기능추가Tab 자동전환 — Tab AutoPlay를 지원합니다.

Ver 1.2 - 2026.07.17버그수정개선

• 버그수정Enter키 적용 — 에디터 편집창에서 Enter시 오류 수정

• 개선Tab 제목과 내용 영역 분리 — 에디터 편집창에서 Tab 제목과 내용 영역 사이의 구분을 확실하게 개선(안내 문구 삽입)

Ver 1.1 - 2026.07.16기능추가개선

• 개선탭 형태 수정 — 탭 형태를 좀더 책갈피 모습에 가깝게 수정 했습니다.

• 기능추가내용글 배경색 지정 — 내용글 박스의 배경색을 지정할 수 있습니다.

Ver 1.0 - 2026.07.16첫버전

• 탭 박스 — 본문내용에 책갈피 형태의 탭 박스가 생성됩니다.

• 팝업창에서 입력 — 팝업창에서 탭의 제목과 내용을 입력 할 수 있습니다.

• 에디터 창에서 입력 — 에디터 입력 창에서 이미지나 기타 항목을 추가할 수 있습니다.

• 탭 순서 변경 — 탭의 순서를 임의로 바꿀 수 있습니다.

• 여러 항목 선택 — 탭의 색상, 폰터 크기등을 지정 할 수 있습니다.

CKEditor 에서만 정상 작동 합니다.

다른 에디터에서는 문제가 있습니다.

CKEditor5 의 경우는 편집 화면에서는 정상적인 출력이 되지는 않으나 본문 출력시는 청상 출력됩니다.

그 외 다른 에디터 (TinyMCE·STARIS) 같은 경우는 본문 출력도 되지 않습니다.

[A.I 의 답변]

CKEditor5·TinyMCE·STARIS 같은 에디터별 미리보기 스타일 차이는 각 에디터의 HTML 필터 설정(GHS, valid_elements 등) 영역이라 사이트 관리자 쪽에서 편집기 설정을 조정하지 않는 한 컴포넌트 코드로는 더 손댈 부분이 없어요.

이미지 슬라이드 MH Slide

2026-07-09T13:18:28+09:00

업로드한 이미지로 다양한 전환효과의 슬라이드쇼를 만드는 에디터 컴포넌트입니다.

Ver 1.2 - 2026.07.27최신버그수정

• 버그수정파일 삭제 — PopUp 에서 이미지만 추가 시의 파일들이 게시글 삭제 시 파일들 삭제가 안되던 버그 수정

Ver 1.1 - 2026.07.12버그수정개선

• 버그수정반응형 화면 전환시 이미지 사이즈 문제

- 반응형/모바일에서 그리드 전환효과가 화면 크기에 맞춰 정확히 스케일되도록 개선 (어긋남 없음)

- contain 모드에서 작은 이미지가 전환 중 크게 보였다가 끝나고 작아지는 현상 수정

- 팝업에 "반응형/모바일에서도 전환효과 사용" 옵션 추가

• 개선마우스 Hover시 정지

- 이미지에 마우스 오버(PC) / 터치(모바일) 시 자동 슬라이딩 정지, 벗어나면 재개

- 전환 애니메이션 도중 hover가 시작돼도 멈춤이 확실히 유지되도록 수정

Mh Slide 특징 - 2026.07.09첫버전

• 이미지 사이즈 — 원본 이미지의 가로·세로 비율이 일정한 이미지를 업로드하면 슬라이드가 더욱 깔끔하게 출력됩니다.

- 가로/세로 중 한쪽을 비워두면, 입력한 값을 기준으로 각 이미지의 원본 비율에 맞게 나머지 값이 자동으로 계산됩니다.

Sample

- 둘 다 비워두면 가로 100%(반응형)로 출력되며, 첫 번째 이미지의 비율에 맞춰 세로 높이가 자동 조정됩니다.

- 가로·세로 사이즈 둘 다 지정해 주어야 전환 효과가 작동을 합니다.

- 썸네일도 지정한 비율로 출력됩니다.

• 재생 옵션 — 자동 재생, 전환 효과 주기, 랜덤 재생, 썸네일 표시등을 선택 할 수 있습니다.

• 이미지 업로드 — 업로드 방식을 직접 PopUp 에서 추가하거나, 기존에 올려진 파일에서 선택 가능합니다.

- 파일 선택창에서 Shift(범위 선택) 또는 Ctrl(개별 선택, Mac은 Cmd) 키를 누른 채 여러 장을 한 번에 선택하면, 선택한 순서대로 모두 추가되어 순차적으로 업로드됩니다.

- 각 항목 좌측 상단의 ☰ 손잡이를 눌러 드래그하면 이미지 순서를 바꿀 수 있습니다.

- PopUp 에서 추가한 이미지도 에디터 안에 파일 첨부됩니다.

• 이미지 설명 — 각각의 이미지에 Caption를 달 수 있습니다.

다운받은 파일 압축을 풀어서 mh_zoom 폴더를 ./modules/editor/components/mh_slide 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "이미지 슬라이드" 추가됩니다.

비교 슬라이더 MH Before/After

2026-07-07T19:57:26+09:00

템플릿 컴포넌트 이미지 비교기능 MH 템플릿

A.I의 힘을 빌려서 에디터 컴포넌트로 만들었습니다.

두 장의 이미지를 슬라이더로 겹쳐서 보여주는 Before/After 비교 슬라이더 에디터 컴포넌트입니다.

Ver 1.1 - 2026.07.21최신개선

• 개선Url 추가 — 이미지 업로드와 더불어 이미지의 Url 만 추가해도 됩니다.

다운받은 파일 압축을 풀어서 mh_before 폴더를 ./modules/editor/components/mh_before 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "Before/After" 추가됩니다.

이미지 확대 MH Zoom

2026-07-03T18:40:45+09:00

템플릿 컴포넌트 Zoom기능 MH 템플릿

A.I의 힘을 빌려서 에디터 컴포넌트로 만들었습니다.

이미지에 마우스를 올리면 옆(또는 지정한 위치)에 확대된 모습을 보여주는 에디터 컴포넌트입니다.

다운받은 파일 압축을 풀어서 mh_zoom 폴더를 ./modules/editor/components/mh_zoom 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "이미지 확대" 추가됩니다.

Ver 1.1 - 2026.07.05최신기능추가개선

• 개선가로폭, 세로폭 조절 - 썸네일의 가로폭, 세로폭을 임의로 조절 가능

• 기능추가Zoom 배율 지정 - 기본은 원본(100%)이고 10~500까지 지정 가능

• 기능추가썸네일 우측 상단에 확대 배율 설정을 임의로 조절 가능하게 추가

Ver 1.0 - 2026.07.03신규

• 신규이미지에 마우스를 올리면 옆(또는 지정한 위치)에 확대된 모습을 보여주는 에디터 컴포넌트입니다.

• 신규파일 직접 선택 - 이미지 파일을 직접 선택할 수 있습니다.

선택된 파일이 에디터 사진 첨부 됩니다.

접기/펼치기 박스 MH Folding Box

2026-06-24T23:21:12+09:00

템플릿 컴포넌트 폴딩 MH 템플릿 을 만들고 뭔가 아쉬움이 남아서

직접 에디터 컴포넌트로 만들어 보았습니다.

• 기본 html과 css, 최종 마무리는 제가 했고, 90%는 Claude AI가 제작했습니다.

Ver 0.6 - 2026.07.17최신개선

• 개선내용 폰트 색상 — 박스안 내용 폰트 색상을 지정할 수 있습니다.

Ver 0.5최신버그수정기능추가

• 버그수정소제목 폰트 Bold — 소제목의 폰트 굵기가 적용이 잘 안되던 문제 수정

• 버그수정소제목 출력 버그 — 내용글 수정시 소제목 사라지는 버그 수정

• 기능추가font-size 지정 — 여러 항목들의 font-size를 각각 지정 할 수 있습니다.

- px, em, rem, %, pt 형식등 허용 됩니다.

• 개선구조적으로 변경 — V0.4 와 V0.5는 구조적으로 변경이 많습니다.

• 기타내용 수동 삽입 방법 — 수동으로 이미지나 기타 다른 글들을 첨부 할 때는 해당 줄에서 Enter후 추가해야 수정 시 사라지지 않습니다.

Ver 0.4 - 2026.06.29신규개선

• 신규Sub글 작성 — 내용글 아래 Sub글 작성

a. 지금의 형태가 됩니다.

b. sub 내용글도 Drag & Drog 지원 됩니다.

• 개선색상 자동 변경 — 최신 배지를 적용 할 때와 비 적용시 버전, 마크, 배경색 자동으로 변경

수정파일info.xml, mh_folding.class.php, popup.js, popup.css

Ver 0.3 - 2026.06.25신규개선

• 개선항목 목록 순서 변경 - 항목 목록을 Drag & Drop로 순서를 변경할 수 있게 개선

• 신규수동으로 이미지 삽입 - 폴딩 내용안에 수동으로 이미지 삽입 가능

• 수정파일info.xml, popup.js, popup.css

Ver 0.2 - 2026.06.25신규개선

• 신규폴딩 배경 색상 - 폴딩내 배경 색상을 선택할 수 있게 추가

• 개선팝업창 UI수정 - 컴포넌트 팝업창 옵션들의 UI를 수정

• 개선기존 폴딩 내용 수정 - 기존 폴딩 내용을 클릭후 옵션 변경후 수정 적용

• 수정파일mh_folding.class.php, info.xml, popup.html, popup.css, popup.js

Ver 0.1 - 2026.06.24첫버전

• 신규Version 폴딩 기능 - 라이믹스 사이트에서 딱따고기님이 버전 정보를 폴딩으로 작성하는 것을 보고 제작 했습니다.

설치 방법은 간단합니다.

다운받은 파일 압축을 풀어서 mh_folding 폴더를 ./modules/editor/components/mh_folding 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "접기/펼치기 박스" 추가됩니다.

템플릿 컴포넌트 폴딩 MH 템플릿

2026-06-24T15:59:19+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

Ver 1.0 - 2026 06 24 최신

• 라이믹스 사이트에서 딱따고기님이 버전 정보를 폴딩으로 작성하는 것을 보고 탬플릿 컴포넌트를 이용해서 한번 만들어 봤습니다.

Ver 0 - 2026 06 24

• 기본 접기 적용 - 소스보기에서 <details open="">에서 open="" 삭제하면 됨

직접 에디터 컴포넌트로 작성

게시글 별 평점 모듈

2026-01-27T22:14:33+09:00

[특징]

• 게시글 별 평점 모듈 V1.5 과는 형태는 같지만 다른 설정을 사용합니다.

• 두 버전을 분리하는 이유는 사용자가 유리한 것을 선택하면 됩니다 - V1.5.2 이 각 게시판 별로 형태나 색상을 다르게 적용 가능

• SketchBook5 게시판스킨 - 문하우스 수정버전 V3.5 을 사용하면 V1.5.2를 사용하는게 좋습니다. - 특히 프로필 부분

• 모듈 설정에서 출력 및 형태, 게시판들을 선택합니다 - 게시판 스킨에 한줄 코드만 추가(간단)

Ver 2.1 - 2026.08.14최신개선

• 개선모듈로만 작동 — 게시판 스킨에 코드 입력 없이 작동됩니다.

관리자 설정에서 모듈 업데이트 해주세요.

[설치 방법]

1. 게시글 별 평점 모듈을 설치합니다.

2. ~~적용할 게시판 스킨에 추가 - sketchbook5 스킨의 경우 _read.html 의 적당한 위치에 추가~~

<include target="/modules/starpoint/skins/starpoint_wrapper.html" />

게시판 기능 확장 모듈 V1.2

2026-01-22T18:17:40+09:00

XE에서 부터 Xiso님이 제작하여 사용해 오던 게시판 기능 확장 모듈을 약간 수정해서 업로드 합니다.

기본 기능(게시판 순서, 일자, 조회수, 추천수 변경 등)에 파일 다운로드 수 변경을 추가했습니다.

php8.4에서도 잘 작동합니다.

저 같은 경우는 프로그램의 새 버전을 올릴때 이이전 버전을 삭제하고 이전 버전과 새 버전만 두는데,

이이전 버전의 다운로드 수를 이전 버전에 합산 합니다.

이 모듈전에는 직접 DB에 접속해서 일일이 수정하였는데 게시판 설정에서 할 수 있게 되니 편하네요.

다운로드 수 변경 확장자에는 이미지파일, 동영상파일, 오디오파일등 미디어 파일들은 일단 제외 했습니다.(옵션에서 선택 가능)

image = 'jpg','jpeg','png','gif','bmp','webp','svg','ico','tiff','tif'

video = 'mp4','avi','mov','wmv','flv','mkv','webm','mpeg','mpg','m4v','3gp'

audio = 'mp3','wav','ogg','flac','aac','m4a','wma','ape','alac'

오리지널 버전 게시판 기능 확장 모듈의 라이선스가 GPL v2 이고,

제작자인 Xiso님의 홈피도 막혀 있고 딱히 연락할 길도 없고해서, 수정해서 올려도 별 문제가 되지 않을 것 같아서 올려 봅니다.

글 상자 작성 Text Box

2025-04-02T11:35:27+09:00

예전 XE시절에 사용하던 "글 상자 작성 Text Box" 에디터 컴포넌트를 약간의 기능을 추가하여 올립니다.

XE공식 자료실에서 찾아보니 라이선스가 GPL v2 라 이렇게 올려도 별 문제가 없을 것 같네요.

2009년에 만들어 졌지만 지금 사용해도 괜찮은 기능을 가지고 있습니다.

php8 이상에서도 잘 작동되게 수정했습니다.

설치 방법은 간단합니다.

다운받은 파일 압축을 풀어서 textbox폴더를 /modules/editor/components/textbox 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

그럼 게시판 글쓰기 항목에 "글 상자 작성" 추가됩니다.

클릭해 보면 아래 처럼 출력됩니다.

그냥 보이는 옵션들 지정하면 됩니다.

제가 추가한 기능이 "빈칸 제거 기능"입니다.

이건 문서를 복사해 오는데 앞줄에 빈칸들이 있을때 앞줄 빈칸들을 제거해 줍니다.

<var name="remove_whitespace" type="radio">
           <title xml:lang="ko">빈칸 제거 기능</title>
           <description xml:lang="ko">글의 앞부분의 빈칸을 제거합니다.</description>
           <options value="N">
               <title>제거안함(기본)</title>
           </options>
           <options value="Y">
               <title>제거</title>
           </options>
       </var>

<var name="remove_whitespace" type="radio">
           <title xml:lang="ko">빈칸 제거 기능</title>
           <description xml:lang="ko">글의 앞부분의 빈칸을 제거합니다.</description>

  <options value="N">
               <title>제거안함(기본)</title>
           </options>
           <options value="Y">
               <title>제거</title>
           </options>
       </var>

  링크

그리고 우측 상단에 "복사하기" 기능 추가했습니다.

[ V1.2 ]

- 형태를 유지한 체 앞 공백 제거 - 공백이 가장 적은 줄의 공백수 만큼만 모든 줄에 공백 제거 적용

- 검은색 배경색을 위해 "글 색상" 추가했습니다.

- 박스 상단 좌측에 제목 입력 가능

[ V1.3 완성본]

- 박스안 일부분 색상 지정 가능(span 태그시)

- <br /> 테그 적용
- <a> 태그 적용

- <img> 태그 적용

- 복사 버턴 출력 유무

- 제목글 가로폭 초과시 overflow 색상(Gold)

- 언어팩 추가

게시글 별 평점 모듈 V1.5 - 2026. 01. 09

2025-03-17T18:59:06+09:00

얼음조각티님이 기초적인 틀을 만들어 주고, 제가 약간의 디자인을 추가하여 얼음조각티님의 허락을 득한 후 모듈로 배포합니다.

[V 2.0 수정]

• 설정을 모듈에서 직접 관리 게시글 별 평점 모듈 V2.0

• 최소한의 게시판 스킨 수정 - V2.0

• 두 버전을 분리하는 이유는 사용자가 유리한 것을 선택하면 됩니다 - V1.5.2이 각 게시판 별로 형태나 색상을 다르게 적용 가능

• SketchBook5 게시판스킨 - 문하우스 수정버전 V3.5 를 사용할려면 V1.5.2를 설치하는게 좋습니다 - 특히 프로필 부분등

[V 1.5.2 수정]

1. 평가 취소 버턴 추가

2. 모듈 설정에 설치 메뉴얼 추가

3. vote_members.html 파일을 starpoint 모듈로 이동

[V 1.5 수정]

* 주의사항 - 기존 사용자는 게시판 설정을 다시 해야합니다.(기본스킨이 Simple 스킨 으로 변경)

1. 스킨 추가 지정 - Simple, Default, black_simple, black_default

           <var name="star_point" type="radio">
               <title>게시글 별 평점 모듈 사용</title>
               <description>게시글 별 평점 모듈이 설치되어 있어야 합니다.
               https://moonhouse.co.kr/xemy/598200</description>
               <options value="">
                   <title>모듈 설치 안됨(기본)</title>
               </options>
               <options value="Y">
                   <title>모듈 설치</title>
               </options>
           </var>
           <var name="starpoint_skin" type="radio">
               <title> ┖ 스킨</title>
               <description/>
               <options value="">
                   <title>Simple(기본)</title>
               </options>
               <options value="d">
                   <title>Default</title>
               </options>
               <options value="b_s">
                   <title>Black Simple</title>
               </options>
               <options value="b_d">
                   <title>Black Default</title>
               </options>
           </var>
           <var name="starpoint_text" type="text">
               <title> ┖ 타이틀</title>
               <description>상단에 들어갈 타이틀(기본문구 : 글)</description>
           </var>
           <var name="vote_members" type="radio">
               <title> ┖ 평가 회원 출력</title>
               <description>평점을 투표한 회원 출력</description>
               <options value="">
                   <title>출력(기본)</title>
               </options>
               <options value="N">
                   <title>출력 안함</title>
               </options>
               <options value="A">
                   <title>관리자만 출력</title>
               </options>
           </var>
           <var name="vm_form" type="radio">
               <title> ┖ 평가 회원 출력 형태</title>
               <description>평점을 투표한 회원 출력의 형태를 선택</description>
               <options value="">
                   <title>Simple(기본)</title>
               </options>
               <options value="D">
                   <title>Default</title>
               </options>
               <options value="T">
                   <title>Simple + Default(관리자)</title>
               </options>
           </var>

<include cond="!$module_info->star_point =='' && $module_info->starpoint_skin ==''" target="/modules/starpoint/skins/simple/rating.html" />
           <include cond="!$module_info->star_point =='' && $module_info->starpoint_skin =='d'" target="/modules/starpoint/skins/default/rating.html" />
           <include cond="!$module_info->star_point =='' && $module_info->starpoint_skin =='b_s'" target="/modules/starpoint/skins/black_simple/rating.html" />
           <include cond="!$module_info->star_point =='' && $module_info->starpoint_skin =='b_d'" target="/modules/starpoint/skins/black_default/rating.html" />

<include cond="!$module_info->star_point =='' && $module_info->vote_members ==''" target="vote_members.html" />
           <include cond="!$module_info->star_point =='' && $module_info->vote_members =='A' && $logged_info->is_admin == 'Y'" target="vote_members.html" />

2. 평가 회원 출력 추가 - 일반 출력, 관리자만 출력, 출력 안함

평가 회원 출력 형태 - Simple, Default, Simple + Default(관리자)

[Default]

[Simple - 평점은 관리자만 보임]

[Simple + Default(관리자) - Simple은 모두에게 출력 Default형은 관리자만 출력]

[V 1.4 수정]

1. 스킨 지정 - Default, Simple
평점모듈 이지만 게시판 스킨에서 설정과 수정이 많습니다.

어느 것이 정답인지는 모르겠지만 게시판 스킨 수정이 활용 범위가 더 넓은 것 같네요 (모듈 설정 능력이 안 되는 하수의 변명 ㅠㅠ)

스킨을 지정할려면 게시판 스킨의 skin.xml 와 _read.html 에 코드를 추가해야 합니다.

<var name="starpoint_skin" type="radio">
   <title> ┖ 스킨</title>
   <description/>
   <options value="">
       <title>Default(기본)</title>
   </options>
   <options value="s">
       <title>Simple</title>
   </options>
</var>

<include cond="!$mi->star_point =='' && $mi->starpoint_skin ==''" target="/modules/starpoint/tpl/rating.html" />
<include cond="!$mi->star_point =='' && $mi->starpoint_skin =='s'" target="/modules/starpoint/tpl/simple/rating.html" />

2. 평가하기시 별에 마우스 오버시 평가점 출력

[Simple 스킨] https://moonhouse.co.kr/xetip/598109

[V 1.3 수정]

1. 평가가 DB에 저장되지 않는다는 이슈가 있어서 수정했습니다.

2. 기존의 사용자중 평가가 없거나 중요하지 않으면 DB에 접속해서 rx_document_star 테이블 삭제해서

초기화후 관리자 설정에서 모듈 업데이트후 사용하면 깔끔합니다.

3. DB 오류나 다른 문제가 있으면 댓글이나 깃허브 이슈로 남겨주세요.

[V 1.2 수정]

1. 본인의 글은 평가할 수 없게 수정 (socialskyo)

2. 디자인을 심플하게 수정

3. skin.xml 에 빨간색 부분 추가 - 타이틀부분(글) 변경 가능

sketchbook5 게시판스킨이 아니면 _read.html 파일의 상단에 아래 파란색 코드 추가해야 정상 작동합니다.
{@ $mi = $module_info; }
$module_info로 작성시 starpoint모듈의 설정을 가져 올려고 하다보니 타이틀 변경이 안되고
$mi로 작성해야 해당 게시판 스킨의 설정을 가져 옵니다.

[설치 방법]

1. 다운 받은 모듈을 설치 - 관리자 설정 없음

2. 게시글 별 평점 모듈을 적용할 게시판 스킨의 파일에 아래의 코드를 작성합니다.

(예 : /modules/board/skins/sketchbook5)

<include cond="!$mi->star_point =='' && $mi->starpoint_skin ==''" target="/modules/starpoint/skins/simple/rating.html" />

3. 게시판 스킨 설정에서 "게시글 별 평점 모듈 사용" 에서 "모듈 설치"를 선택하면 됩니다.

[비로그인 화면]

[로그인 회원 화면]

[평점후 화면]

－Ｔｉｐ－

[ 게시글 목록에 별 평점 출력하기 ] https://moonhouse.co.kr/xemy

주의 : 모듈이 설치 되지 않은 상태에서 코드 적옹시 DB오류를 일으킵니다.

<var name="star_user" type="radio">
   <title> ┖ 게시글 목록에 평점과 형태출력</title>
   <description>게시글의 목록에 평점과 형태를 선택 합니다.
????주의 : 모듈이 설치 되지 않은 상태에서 출력 선택시 DB오류를 일으킵니다.</description>
   <options value="">
       <title>출력안함(기본)</title>
   </options>
   <options value="all">
       <title>전부 출력</title>
   </options>
   <options value="point">
       <title>평점만</title>
   </options>
   <options value="star">
       <title>별만</title>
   </options>
</var>

<block cond="!$module_info->star_point ==''">
   {@
       $oStarPointModel = getModel('starpoint');
       $total_point = $oStarPointModel->getDocumentRatedTotalPoint($document->document_srl);
   }
   
       <span cond="!$module_info->star_user == ''" class="starpoint">
           <span>평점 :</span>
           <span cond="$module_info->star_user == 'all' || $module_info->star_user == 'point'" class="score">{number_format($total_point->avg, 1)}점</span>
           <span cond="$module_info->star_user == 'all' || $module_info->star_user == 'star'" class="starRating pr_tooltip" pr_color="dark" pr_position="b_right" title="{number_format($total_point->avg, 1)}점">
               <span style="width:{$total_point->avg*20}%">{number_format($total_point->avg, 1)}</span>
           </span>
       </span>
   
</block>

.starRating,
.starRating span{overflow:hidden;display:inline-block;height:14px;background:transparent url(../img/white/iconStarRating.png) no-repeat}
.starRating{width:79px;vertical-align:middle;text-align:left !important}
.starRating span{font-size:0;line-height:0;vertical-align:top;text-indent:-100px;*text-indent:0;background-position:0 -14px}

/* 별점 스타일 */
.starpoint { display: inline-block; vertical-align: middle;}
.starpoint .score { display: inline-block; margin-right: 5px; vertical-align: middle;}

[ 위젯에 별 평점 출력하기 ] https://moonhouse.co.kr

주의 : 모듈이 설치 되지 않은 상태에서 코드 적옹시 DB오류를 일으킵니다.

<var id="star_point">
   <name>평점 표시</name>
   <description><![CDATA[
   <a href="https://moonhouse.co.kr/xemy/598200" target="_blank" style="color:#ff6600">게시글 별 평점 모듈</a> 설치가 필수입니다.]]>
????주의 : 모듈이 설치 되지 않은 상태에서 표시 선택시 DB오류를 일으켜 전체 페이지가 열리지 않습니다.
   </description>
   <type>select</type>
   <options>
       <name>표시하지 않음</name>
       <value></value>
   </options>
   <options>
       <name>표시</name>
       <value>Y</value>
   </options>
</var><var id="star_user">
   <name> ┖ 목록 평점 형태</name>
   <description>위젯 목록에 평점 형태를 선택 합니다.</description>
   <type>select</type>
   <options>
       <name>전부 출력</name>
       <value>all</value>
   </options>
   <options>
       <name>평점만</name>
       <value>point</value>
   </options>
   <options>
       <name>별만</name>
       <value>star</value>
   </options>
</var>

<block cond="!$widget_info->star_point == ''">
   {@
       $oStarPointModel = getModel('starpoint');
       $total_point = $oStarPointModel->getDocumentRatedTotalPoint($oDocument->document_srl);
   }
   
       <span class="starpoint">
           <span>평점 :</span>
           <span cond="$widget_info->star_user == 'all' || $widget_info->star_user == 'point'" class="score">{number_format($total_point->avg, 1)}점</span>
           <span cond="$widget_info->star_user == 'all' || $widget_info->star_user == 'star'" class="starRating pr_tooltip" pr_color="dark" pr_position="b_right" title="{number_format($total_point->avg, 1)}점">
               <span style="width:{$total_point->avg*20}%">{number_format($total_point->avg, 1)}</span>
           </span>
       </span>
   
</block>

위젯 따라 빨간색 부분 $oDocument->document_srl 을 바꾸어 주어야 합니다。

content 위젯의 경우는 $item->get('document_srl') 으로 처리됩니다。

/* 평점 표시 부분 */
.starpoint { display: inline-block; margin-left: 5px; float:right; }
.starpoint .score { color:#bbb; }
.starRating,
.starRating span { overflow:hidden;display:inline-block;height:14px;background:transparent url(이미지경로/iconStarRating.png) no-repeat}
.starRating { width:79px;vertical-align:middle;text-align:left !important}
.starRating span{ font-size:0;line-height:0;vertical-align:top;text-indent:-100px;*text-indent:0;background-position:0 -14px}

iconStarRating.png 다운로드

Mh Folding Panel 애드온

2025-02-11T18:24:58+09:00

A.I 들을 괴롭히면서 이번엔 에드온을 한번 만들어 봤습니다.

별건 아니고 게시판 상단에 전할 내용을 접고 펴고 하는 폴딩 판넬입니다.

SketchBook5 게시판스킨 - 문하우스 수정버전에 내장 되어 있는 기능을 에드온으로 만들어 봤습니다.

공부 하는겸 이런 저런 기능들을 테스트 하면서 만들어서 에드온을 제작해볼 초보분들이 코드를 보면 좋을 것 같습니다.

Claude https://claude.ai/new - 전반 작업

DeepSeek https://chat.deepseek.com - 후반 작업

Claude의 도움으로 전반 작업을 하던중 하루 사용량을 초과 하여 후반 작업은 DeepSeek의 많은 도움을 받았습니다.

근데 DeepSeek가 서버만 busy 안하니 끝없이 대화해 주는군요. 무료 사용량이 어는 정도인지 궁금합니다.

질문해 보니 하루 최대 300회의 질문 기회를 제공한다고 하네요.

근데 Claude는 무료 사용량이 100개의 메세지 라는데 난 몇개 안하니 제한에 걸리던데...

에드온 설정 화면입니다.

1. 스킨을 지정할 수 있습니다.

2. 여러 text 항목을 설정

3. 선택항목 설정

4. mid별 내용 다르게 설정 가능

5. mid별 접기 /펼치기 선택 가능 V1.1
6. mid별 판넬폭 지정 V1.2

이 정도면 간단한 에드온을 만들기는 충분할 듯 합니다.

MH Tab Slide 위젯 V1.1

2025-02-06T23:29:16+09:00

XE 초창기에 만들어졌던 tab_newest_document 위젯을 바탕으로

php8 이상에서 작동하고 목록들이 slick.js 이용하여 좌우로 슬라이드 되게 만들었습니다.

[ 특징 ]

1. Auto Play 지원

2. 하단 Dots 지원

3. 슬라이딩 방향을 좌우, 상하로 지정 가능

4. 각 Tab별로 각계 슬라이드 작동

5. 모든 Tab 자동으로 이동 슬라이드 작동

5. 반응형 지원

6. 기타 auto 속도등

확장변수 선택지별 출력 위젯

2025-02-03T10:48:48+09:00

Tip 으로 남긴 내용을 위젯으로 만들었습니다.

[V1.1 특징]

1. php8 이상 적용

2. 제목옆에 내용글 출력

[특징]

스케치북 List형식을 빌려 왔습니다.

- 위젯 설정에서 대상모듈을 출력할 게시판으로 지정

- 해당 게시판의 확장변수 ID 와 선택지들을 작성합니다.

선택지는 최대 5개 입니다. 더 많은 선택지를 만들려면 수정해야 합니다.

템플릿 컴포넌트 이력서 MH 템플릿

2024-12-09T21:50:28+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

			성 명	한 글		주민등록번호		-
			성 명	한 자		생 년 월 일	년 월 일생 (양)
			현주소					전 화 번 호
			현주소					010-
호 주 관 계			호 주		본인과의관계	부	주소	상 동
년	월	일	학력 및 경력사항					발령청
			OO 고등학교 졸업
			OO 대학교 OO과 입학





			자 격 증





			위 사항은 사실과 다름없음.
			2024. 1. 1.

템플릿 컴포넌트 문학이야기 MH 템플릿

2024-11-17T12:32:16+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

초기에 위와 같이 출력됩니다.

상단의 표지 이미지 & 하단 배경 이미지 & 사인 이미지는 "사진 및 파일 첨부"로 대체하면 됩니다.

그리고 제목이나 내용글들은 직접 작성하시면 됩니다.

기본 템플릿의 이미지나 문구를 바꾸고 싶으면 index.html 파일을 수정하면 됩니다.

/modules/editor/components/ap_template/templates/mh_story/index.html

윈도우 메모장이나 나모에서 편집하면 안 됩니다.

EditPlus나 이와 비숫한 편집기를 사용하세요.

https://moonhouse.co.kr/utils/140270

모듈형 webzine 스크롤 출력 - MH 모듈별 최근글 스킨 추가

2024-05-29T21:18:40+09:00

XE 초창기에 만들어진 모듈별 웹진형 스크롤 출력 위젯이 있었는데

XE가 업데이트 되면서 문제가 발생했었는데 라이믹스 버전에서는 정상적으로 작동을 합니다.

근데 이 위젯이 중요한 이유가 모듈별로 한개의 게시글만 모듈별로 출력하는 제가 아는 유일한 위젯입니다.

그래서 제가 스킨을 약간 수정해서 스크롤 작동이 아닌 모듈별로 한개의 게시글이 전체 출력되게 만들어 봤습니다.

[mh_webzin skin]

[mh_gallery skin]

[ VER 0.1 ]

- MH 모듈별 최근글 타이틀 출력 스킨 추가

• 가로정렬

• 세로정렬

SketchBook5 게시판스킨 - 문하우스 수정버전 V3

2024-05-13T23:32:41+09:00

• 기존 스케치북 게시판 스킨에 덮어 쓰기 해도 잘 작동됩니다. (혹시 모르니 백업은 필수!!)
- /modules/board/skins/sketchbook5 에 모든 파일을 덮어 쓰기 하면 됩니다.

• XE 사용자의 경우 xe.zip 파일의 압축을 풀어서 _read.html & list.html & write_form.html & _write_form_mobile 을 덮어 씌우면 작동합니다.
- 사용 환경(xe버전, php버전등)에 따라서 정상 작동하지 않을수도 있습니다. XE에서는 테스트 후 적용을 검토하세요.

• 오리지날 스케치북 게시판 메뉴얼

• 개발 버전은 Github에 올려져 있습니다.

이전 버전들 의 내용이 너무 길어져서 V3.0 부터는 새로운 글로 시작합니다.

Ver 3.6 - 2026.07.28최신기능추가개선

• 기능추가본문글 자동 스크롤 적용 — 스크롤 속도, 스크롤 대상 선택자, 헤더 여백, 속도 다이얼 표시

• 개선댓글 평점 Stat 삭제 — 리스트, 웹진형 목록글 아레에 댓글 출력시 평점 Stat 삭제

• 개선버전 출력 — 업로드 파일 이름에 버전 정보가 존재하지 않아도 xml 파일을 읽어서 버전 출력

압축 파일 안에 본 프로그램 그대로 압축

Ver 3.5.3 - 2026.06.28버그수정개선수정파일만 제공

• 버그수정댓글 평점 기능 수정 — 댓글 작성 없이 댓글 등록 되는 버그 수정

• 개선목록글 아래 댓글 출력 — 리스트, 웹진형 목록글 아레에 댓글 출력시 평점 Stat로 출력

• 수정파일_comment_write.html, list_comment.html, list_webzin_comment.html, board.css

Ver 3.5.2 - 2026 06 13 - 수정 파일만 업로드

• 댓글 등록시 평점 입력 추가 - skin.xml, _comment.html, _comment_write.html

Ver 3.5.1 - 2026 05 30 - 수정 파일만 업로드

• 릴리즈 정보 모듈 에 정상적으로 작동하는 버전 - write_form.html, _read.html
• 자료실 형태 출력 시 앞 칸에 버전 정보 출력 - _read_data.html
- 단, 업로드 파일 이름에 버전 정보가 존재해야 됨(ex; sketchbook5_MH V3.5.zip)

Ver 3.5 - 2026.01.13신규버그수정기능추가개선

• 버그수정php8.4에서 에러 수정

리스트, 웹진, 첫 글만 썸네일형 목록에서 댓글 출력 순서 / 댓글 칸 출력 형태 변경 시

리스트, 웹진, 첫 글만 썸네일형 목록에서 목록에 #태그 출력 시

수정파일 - skin.xml, _list_FirstThumb.html, _list_normal.html, _list_webzine.html

• 버그수정외부 링크 파일을 로그인 회원만 확장 변수 활용 다운 받게 하는 방법 수정 - 새 창 대신 현재 창에서 파일 다운로드 가능

수정파일 - down.html

• 개선댓글에 지정 문구 출력 - 댓글에 이미지, 동영상만 존재할 때 리스트 댓글에 지정 문구 출력 등

수정파일 - list_comment.html, list_webzin_comment.html, __setting.html, skin.xml, img/image-line.svg, img/file-video-line.svg

• 개선자료실 형태 출력 시 Total 다운 수 출력

수정파일 - _read_data.html

• 기능추가확장 변수 지정일 후 숨김 처리 - rhymix.org/qna에 적용되어져 있는 기능

확장변수 설정 > 지정 날 수 Over Hidden 확장변수 ID

수정파일 - extravars.html, skin.xml

• 신규Wizard 설정 게시판 상단에 출력 - https://moonhouse.co.kr/xetip/601072

전체 설정 > 위저드 설정 사용

수정파일 - list.html, skin.xml, _wizardsetting.html

• 기타지정 시간(5초)이 지나면 게시판 화면에서 사리 지게 만드는 기능들 - https://moonhouse.co.kr/html/601127

수정파일 - board.js, list.html, ver.html, _wizardsetting.html

• 신규게시글 별 평점 모듈 업데이트 - https://moonhouse.co.kr/xemy/598200

본문 일반 설정 > 게시글 별 평점 모듈 사용

평가 회원 출력 추가 - 일반 출력, 관리자만 출력, 출력 안함

평가 회원 출력 형태 - Simple, Default, Simple + Default(관리자)

수정파일 - _read.html, skin.xml, vote_members.html, vote_member.css

• 개선skin.xml 파일에 영어버전 포함

[ V3.4 수정 ] 2025.11.14

잔잔한 버그 및 코드 수정

1. https://moonhouse.co.kr/xemy/590994#comment_600573

2. 댓글부분 클립보드로 복사하기 잘못된 링크 코드 수정

- 수정전 -
<a class="copycomLink" style="font-size:12px; color:#aaa" href="{getUrl('', 'mid', $mid, 'act', 'document_srl', $comment->document_srl, 'comment_srl', $comment->comment_srl)}#comment_{$comment->comment_srl}" data-clipboard-text="{getFullUrl('', 'mid', $mid, 'act', 'document_srl', $comment->document_srl, 'comment_srl', $comment->comment_srl)}#comment_{$comment->comment_srl}" onclick="return false;">#comment_{$comment->comment_srl}</a>

-수정후-
<a class="copycomLink" style="font-size:12px; color:#aaa" href="{getUrl('', 'mid', $mid, 'document_srl', $comment->document_srl)}#comment_{$comment->comment_srl}" data-clipboard-text="{getFullUrl('', 'mid', $mid, 'document_srl', $comment->document_srl)}#comment_{$comment->comment_srl}" onclick="return false;">#comment_{$comment->comment_srl}</a>

[ V3.3.2 수정 ] 2025.03.19

1. 리액션 모듈 추가
[ 본문 일반 설정 > 리액션 모듈 사용 ]
https://rhymix.org/pds/1902871
2 게시글 별 평점 모듈 추가
[ 본문 일반 설정 > 게시글 별 평점 모듈 사용 ]
https://moonhouse.co.kr/xemy/598200

3. 게시판 목록에 별 평점 출력 - 목록형, 웹진형, FT형

4. php8 이상 버전 에서의 in_array 오류 수정

list.html 파일 php8 이상에서 오류 수정 - 'category' 따옴표 누락

href="{getUrl(category,$val->category_srl,'document_srl','','page','')}"

href="{getUrl('category',$val->category_srl,'document_srl','','page','')}"

[ V3.3 수정 ] 2025.03.01

Php 8.0 이상에서 정상 작동됨
1. 목록형 선택시 목록이 본문폭을 넘어 설때 마우스 휠 좌우 스코롤로 작동하기
[ 전체 설정 > ┖ 마우스 휠 좌우 스코롤 ]
https://moonhouse.co.kr/html/594178

2. 본문에서 테이블 가로폭이 본문을 넘어설때 마우스 휠 좌우 스코롤로 작동하기
table의 class를 tg로 줘야함
<table class="tg" style="width:1000px">
내용
</table>

3. 거래장형 Url 바로가기 확장변수 번호 오류 수정
4. 게시판목록 조회수별 아이콘출력 설정 이미지 기본 수 적용 오류 수정
5. 확장변수 형식에 폼형태(좌측 사진) 추가
[ 확장변수 설정 > ★폼 형태 ]
https://moonhouse.co.kr/xetip/594999
6. 내용글 세로 칸수 지정 - 웹진형, 첫글 썸네일형

[ V3.2 수정 ] 2024.11.14

[긴급 수정]
게시판 List 형식시 분류가 있는 공지글 작성시 분류칸이 넓어지고 제목칸이 좁아지는 오류 수정
이 오류만 수정할려면 V3.2에서 _notice.html 파일만 교체해도 됩니다.

1. 웹진형 리스트에 에드센스 삽입 3개까지 추가 - https://moonhouse.co.kr/xetip/592403
[ 웹진형 설정 > ★웹진형 리스트에 광고 삽입(FT) ]

Sample - https://moonhouse.co.kr/festival
2. 목록형 List 애드센스 출력

Sample -https://moonhouse.co.kr/free

3. 추천인 기능 추가
[ 본문 일반 설정 > 추천인 표시 ]

4. 게시판에 여러개 업로드된 파일을 파일명 으로 정리
https://xetown.com/questions/1844831#comment_1844839
[ 첨부파일 > ┖ 파일이름명 순서대로 출력 ]
5. 게시판 전체영역(List, 본문등) table 가로 overflow-x: auto 적용
https://xetown.com/questions/1845494#comment_1845571
[ 전체 설정 > table 가로 overflow-x: auto 적용 ]

[ V3.1 수정 ] 2024.07.11

1. Book 갤러리형 스킨, Webzine 스킨 - https://moonhouse.co.kr/xetip/591921

- 확장변수명 price 적용시 천단위 쉼표 자동 적용

- 가격 앞, 뒤에 단위 입력 가능

[ 확장변수 설정 > ★수정확장변수 게시판명 > ┖ 수정할 확장변수 확장 변수 ID 이름 > ┖ 확장변수 전방 단위 > ┖ 확장변수 후방 단위 ]

2. 글 리스트에서 댓글 출력 모양 수정 - https://moonhouse.co.kr/html/591987

3. 관리자에게 모듈번호 출력 (OrangeDay_board 에서 가져옴) - https://moonhouse.co.kr/xetip/592258

[ 전체 설정 > 모듈번호 출력 ]

4. 관리자에게 SketchBook5_MH 버전 정보 출력 (OrangeDay_board 에서 가져옴)

[ 전체 설정 > SketchBook5_MH 버전 정보 출력 ]

[ V3.0 수정 ] 2024.04.10

1. 폰트어썸 웹폰트와 문하우스 전용 버턴 기능을 에드온에 의존하지 않고 게시판 설정에서 직접 관리
전체설정 > 폰트어썸 사용형태 or Sexy Button 사용형태

2. 게시글 상단 네비에 목록과 쓰기 버턴 추가

3. 공지글 폴딩 형태로 출력 기능 추가 선택 가능 - https://moonhouse.co.kr/xetip/588063

목록 공통 설정 > 공지글 폴딩 출력

4. 게시판 최상단 판넬의 형태 선택 추가 - Html 과 js (게시글 상단의 "필히 보세요!" - html적용)

5. 지도 항목에서 마커 이름 확장변수(shop)만 적용에서 제목/확장변수 둘중 선택
6. Github 파일을 확장변수 다운로드에 추가 - https://moonhouse.co.kr/comtip/589318
확장변수 설정 > ┖ 확장변수 입력항목 이름(Github 전용)
7. skin.xml에 "목록에 #태그 출력(FT)" 항목이 이중으로 작성된 것 수정
8. Tag 버그 수정- https://xetown.com/questions/1818810#comment_1818923
9. 목록상부에 Tag 버턴 출력 - tag_list_adv 위젯이 설치 되어 있어야 함 - https://xetown.com/download/299989
게시판 상단 설정 > ★상단 TAG 버튼

10. D-day 기능에 시작전 기능 추가
목록 공통 설정 > 날짜종료 사용자정의 이름 >┖ 시작

11. 글작성 상단에 빵조각
게시판 상단 설정 > 게시판 최상단에 빵조각 and 글작성

[참조1]

확장변수명이 특정단어로 끝날때 숨김처리 하기
•확장변수명이 _wh, _wrh로 끝날때 글 작성시 숨김처리 하기(관리자는 예외) - write_form.html
•확장변수명이 _rh, _wrh로 끝날때 본문 읽기시 숨김처리 하기(관리자는 예외) - extravars.html
https://moonhouse.co.kr/xetip/582252

SketchBook5 게시판스킨 - 문하우스 수정버전 V2

2024-04-10T22:31:30+09:00

• XE 사용자의 경우 [ 본문 일반 설정 > 추천/비추천 기능 XE사용 ] 에서 XE사용을 선택하면 됩니다.

글의 내용이 너무 길어져 V3.0 부터는 새로운 글로 시작합니다.

https://moonhouse.co.kr/xemy/590994

[ V2.6 수정 ]

1. 프로필 이미지 자동 입력 형태 선택시 이미지 or 색상(추가)으로도 선택 가능 - 글쓰기 및 댓글쓰기 설정 > 자동 프로필 형태

https://moonhouse.co.kr/xetip/509675/comment/584143#comment_584143

[색상] [이미지]

2. 게시판 리스트 목록에 확장변수중 url변수를 버턴형식으로 출력 - 확장변수 설정 > ★게시판 리스트에 버튼 형식으로 출력할 확장변수 ID
https://moonhouse.co.kr/xetip/584217

3. 추천+댓글 동시에 등록 하는 버튼 추가 - 글쓰기 및 댓글쓰기 설정 > 댓글 등록 + 추천 버턴 출력
https://moonhouse.co.kr/xetip/586363

4. 비회원 글 작성시 이메일, 홈페이지란 미출력시 글쓴이와 비번란 가로 확대 적용

5. bootstrap을 사용하는 레이아웃(EX : simplestrap)과의 호환성 문제 해결

[-]

[ 2023. 09. 15. 라이믹스 2.1.5 버전 사용시 예러 수정법 }

첨부파일 표시 방법을 자료실 목록 형태로 꾸미기 - https://moonhouse.co.kr/xetip/578018 를 사용하고 계신 유저분들은

/modules/board/skins/sketchbook5_MH/_read_data.html 파일에서 아래부분 수정해 주세요

18줄 빨간색 부분 삭제해 주세요. 모바일 m.skins/sketchbook5_MH에서도 수정하세요.

{@ $re_files = array_reverse($re_files); // 시간 역순으로 정렬}

{@ $re_files = array_reverse($re_files)}

[ V2.5 수정 ]

* Rhymix 2.1.0 버전업 후 sketchbook5_MH 사용시 본문글 진입시 에러 출력 수정

1. skin.xml 파일 - 모든 언어에서 설정 선택시 한국어로만 보임, 타 언어로 번역하지 않았음 - 한국인만 사용하라는 뜻 ^.^!퍽

https://moonhouse.co.kr/xemy/530374/comment/581086#comment_581086
2. 관리자는 필수 확장변수 프리패스
https://moonhouse.co.kr/xetip/575768
3. 레이아웃 다크모드 설정시 웹진형 문제 수정 - "웹진형 설정 > 다크모드"
https://moonhouse.co.kr/xetip/581777
4. 웹진형을 다크모드형식으로 적용시 "게시판 목록에서 확장변수 바로 수정 애드온"이 적용

5. "게시판 목록에서 확장변수 바로 수정 애드온"이 적용된 확장변수 항목 아래 언더바 출력 - 관리자만

6. 확장변수에 미리 글씨넣기 - "확장변수 설정 > ★지정글 확장변수 No"
https://xetown.com/questions/1767626#comment_1767658
7. 게시판을 클릭 했을때 관리자 이외의 접속자는 글쓰기 폼이 먼저 출력 - "목록 공통 설정 > ★글쓰기폼 먼저 출력 mid"
8. 확장변수명이 특정단어로 끝날때 숨김처리 하기

•확장변수명이 _wh, _wrh로 끝날때 글 작성시 숨김처리 하기(관리자는 예외) - write_form.html

•확장변수명이 _rh, _wrh로 끝날때 본문 읽기시 숨김처리 하기(관리자는 예외) - extravars.html

https://moonhouse.co.kr/xetip/582252

9. 확장변수 사용하여 날짜 기간 출력하기 - "확장변수 설정 > 날짜 기간 출력시 제목"

https://moonhouse.co.kr/xetip/582728

[-]

[ 2023. 06. 21. 긴급 패치 ]

Rhymix 2.1.0 버전업 후 sketchbook5_MH 사용시 본문글 진입시 에러 출력 수정 방법

/modules/board/skins/sketchbook5_MH/__setting.html

/modules/board/m.skins/sketchbook5_MH/__setting.html

두 파일에서 아래 부분 찾아서 수정해 주세요.

<include cond="file_exists(_XE_PATH_.'modules/board/skins/sketchbook5_MH/custom/custom.php')" target="custom/custom.php" />

[ V2.4.1 수정 ] - V2.4에서 수정된 파일만 올립니다. 처음 설치하시는 분은 V2.4를 먼저 받으시고 V2.4.1을 덮어 씌우면 됩니다.
1. 외부링크 다운로드 출력에도 다른 확장변수 출력가능 - 관심이 없었다면 모르고 있었겠지만???? 이전 까지는 되지 않았음

[ 확장변수 설정 > ★확장변수 입력항목 이름(일반텍스트 링크) ]

아래 이미지의 출처부분과 하단의 다운로드 버턴이 같이 출력됨

2. 게시판 상단 풀립 판넬이 본문 상단에도 출력가능 - [ 전체 설정 > ★게시판 최상단 판넬 출력과 내용 > ┖ 본문 상단에도 출력 }

[ P.S ] 관리자만 글작성, 수정 확장변수 부분 설정을 본문내용에서도 보이지 않게 수정할려면 - [ 확장변수 설정 > ★관리자전용 작성 확장 변수 ID ]
extravars.html 아래 부분에서 && $val->eid!==$mi->admin_extra 추가하면 됩니다.

아님 "┖ Hidden 확장변수 입력항목이름"에 확장변수의 이름을 작성해도 됩니다.

[ V2.4 수정 ]

1. 확장 변수가 자동으로 제목으로 대체되는 진짜 방법 - [ 글쓰기 및 댓글쓰기 설정 > ★제목 대체 확장변수 번호 }
https://moonhouse.co.kr/xetip/579242

2.확장 변수가 자동으로 제목으로 대체되는 가짜(?)방법 - [ 글쓰기 및 댓글쓰기 설정 > ★확장변수로 제목 대체 ]
https://moonhouse.co.kr/xetip/578453
3. 게시판 배경 색상 지정 - [ 전체 설정 > 게시판 배경 색상 입력 ]
https://moonhouse.co.kr/xemy/530374?comment_srl=578784#comment_578784
4. 확장변수 "URL 형식" 주소란 에 텍스트 Link 출력하는 방법 - [ 확장변수 설정 > ★URL 형식 주소 대신 텍스트 출력 확장변수 ID ]
https://moonhouse.co.kr/xetip/579377

5. 다크모드시 투명창 문제 수정

https://moonhouse.co.kr/qa/578821?comment_srl=579630#comment_579630

[-]

[ V2.3 수정 ]

1. _list_FirstThumb.html 확장변수 버턴 출력에서 "카테고리/확장변수 바로 수정 애드온" 적용시 확장변수명을 change로 지정 - 애드온에서도 change를 추가 해야합니다.

2. 비회원 글 작성시 E-mail란 삭제 옵션 추가

3. 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 - "목록형" & "첫 글만 썸네일 출력 웹진(FT)"에 적용
https://moonhouse.co.kr/xetip/577872

4. 첨부파일 표시 방법을 자료실 목록 형태로 꾸미기

https://moonhouse.co.kr/xetip/578018

[-]

[ V2.2.1 수정 ]

1. 기존 오리지날 스케치북 스킨 /modules/board/skins/sketchbook5 에 덮어 씌울시 수정할 부분 추가

_comment.html 74줄 수정
background:url('./modules/board/skins/sketchbook5_MH/img/
background:url('{$tpl_path}img/

editor_textarea.js 11, 12줄 수정
a = a.replace('/modules/board/skins/sketchbook5_MH/','');
a = a.replace('/modules/board/m.skins/sketchbook5_MH/','');

a = a.replace('$tpl_path','');
a = a.replace('$tpl_path','');

[ V2.2 수정 ]

1. 스티커모듈 사용시 비회원 댓글 작성시 닉네임 영역이 출력되지 않아서 댓글 작성을 할 수 없었던 문제 수정

sketchbook5_MH 게시판스킨과 스티커모듈을 함께 사용중이면 필히 업로드 해야합니다.

이렇게 올바르게 작동 되지 않은지가 한참은 된 것 같은데 이제야 알게 되었네요.ㅠㅠ

2. 기존 오리지날 스케치북 스킨 /modules/board/skins/sketchbook5 에 덮어 씌울시 수정할 부분 없이 정상작동 합니다.

[-]

[ V2.1 수정 ]

1. 댓글 작성자가 원글 작성자인 경우 표시

https://moonhouse.co.kr/xetip/554591

2.원댓글/대댓글 따로따로 애드온 적용

https://moonhouse.co.kr/xetip/554827

3. 첫 게시글만 썸네일 출력 스킨 추가

https://xetown.com/questions/1685046 해당 글의 질문과 댓글을 종합하여 거의 근접하게 구현해 보았습니다.

Demo : https://moonhouse.co.kr/qa

- 썸네일, 프로필, 닉네임, 날짜, 제목, 태그, 내용글, 댓글수, reader, voted, 댓글 출력, 카테고리, 통합게시판으로 사용시 게시판명, 확장변수 평가 항목, 확장변수 분류항목 출력 가능

- 전체 게시글 썸네일 출력도 가능

[-]

[ V2.0 수정 ]

1. Rhymix 2.0.15 이상 적용, 확장변수 작성시 확장변수칸 문제 수정

2. 외부링크 다운로드창 선택 - self, blank
3. 확장변수 ID를 admin_select로 생성후 글 작성시 확장변수란에 보이지 않으며 관리자가 수정시에만 보임

4. 게시판 스킨 설정항목(skin.xml)에 해당항목 적용팁 링크 추가

5. 라이믹스 통합게시판 적용시 게시판명 클릭시 오류 수정 - 해당 게시판으로 이동
6. 라이믹스 통합게시판 적용시 제목글 우측에 게시글로 직접 연결되는 아이콘 출력 - 기존 게시글 클릭시 통합게시판내에서 출력

https://moonhouse.co.kr/total1

7. 숭숭군님의 자동 댓글 애드온 사용시 - https://ssgroom.com/xecenter/603

스티커버턴 과 자동댓글 버턴의 위치 조정

8. "게시판 목록에서 확장변수 바로 수정 애드온" 을 게시판과 모바일에 적용

원 게시글 : https://xetown.com/download/1666779

Tip 게시글 : https://moonhouse.co.kr/xetip/553814

9. 게시목록 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정 하는 기능 추가

https://moonhouse.co.kr/xetip/554284

[-]

[ V1.9.2 수정 ]

1. 웹진형에도 댓글출력 가능

- https://moonhouse.co.kr/xetip

2. 확장변수이용 분류 버턴을 웹진형에도 출력가능

3. 기타 잔잔한 버그 수정

[ V1.9.1 수정 ]

1. 댓글칸수를 지정할 수 있으며 댓글의 순서를 지정할 수 있음

"설정" > "목록형 설정" > "★리스트형식 댓글 출력"

2. https://moonhouse.co.kr/xetip/545078 적용

3. XE에서도 아래 설정을 선택하면 사용은 가능 하나, 특정기능에서는 오류를 일으킬 수 있습니다. 되도록이면 라이믹스에서의 사용을 권합니다.

"설정" > "본문일반설정" > "추천/비추천 기능 XE사용"

[ V1.9 수정 ]

1. 문하우스 게시판스킨 에 구현 되어져 있던

"리스트 글제목 아래에 댓글을 함께 출력"을 SketchBook5_MH 게시판스킨에도 적용했습니다.

[Sample] https://moonhouse.co.kr/qa

[-]

[ V1.8.5 수정 ]

1. 기본파일은 라이믹스에서 정상작동합니다.

2. XE 버전을 사용할려면 (단지, 추천후 취소가 되지 않음)

XE 적용 Click

라이믹스 적용 Click

[ V1.8.4 수정 - 라이믹스전용 버전]

1. https://moonhouse.co.kr/qa/543730#comment_543791 적용한 버전입니다.

제목앞에 확장변수이용 분류 버턴을 출력할 수 있습니다.

• 위의 기능 적용된 mh_multi 위젯입니다. (구매회원만 사용 가능)

https://moonhouse.co.kr/m_board/543913

2. 지도출력 사용시 php상위버전(7.2이상) 에서 지도화면 일부만 출력되는 문제 해결

[ V1.8.3.2 수정 ]

1. https://moonhouse.co.kr/xemy/530374#comment_539348 댓글 부분 수정한 파일입니다.

2. https://moonhouse.co.kr/xemy/530374#comment_539437 스케치북 sns공유 버턴 수정했습니다.

[ V1.8.3 내용 ]

1. 확장변수 "내용 복사" 버턴

https://moonhouse.co.kr/xetip/536633

2. 스티커모듈 설치시 댓글에 스티커 입력 표시

모바일에서도 작동됩니다 - /modules/board/m.skins/sketchbook5_MH 에도 업로드해야 합니다.

https://moonhouse.co.kr/xetip/538290

[ V1.8 내용 ]

1. 카카오지도 출력

- https://moonhouse.co.kr/xetip/519523

2. 웹진형에 에니메이션 효과 적용 가능

- https://moonhouse.co.kr/xedata

3. 라이믹스 2.0 통합게시판 기능에 게시판명 출력

- https://moonhouse.co.kr/xetip/527393

4. Book 갤러리 형태 게시판 추가

- 데모 : https://moonhouse.co.kr/book

- 메뉴얼 : https://moonhouse.co.kr/xetip/530228

- Book Skin 위젯 : https://moonhouse.co.kr/xemy/530666

[-]

[ 수정버전 특징 ]

필요할때 마다 조금씩 수정 보안 한거라 일일이 열거 하기가 쉽지 않네요. 큰 부분만 적겠습니다.

1. 거래장형 리스트 추가

- https://moonhouse.co.kr/xetip/484252

2. 게시판 목록 아이콘들 출력 - 개별 아이콘마다 출력 선택 가능

- https://moonhouse.co.kr/xetip/502571

3. 게시판목록 조회수별 아이콘출력

- https://moonhouse.co.kr/xetip/284429

4. 웹진형에 링크게시판 사용 안해도 별점 기능 사용

- https://moonhouse.co.kr/xetip/337645

5. 파일 다운 권한 mid 지정 가능

- https://moonhouse.co.kr/xetip/504893

6. 게시물 주소 복사 출력

- https://moonhouse.co.kr/xetip/535638

7. 모바일에서 다음/이전글 스크롤 사용

- https://moonhouse.co.kr/xetip/477057

8. 게시판 상단에 풀립형식으로 위젯이나 기타글 등록

- https://moonhouse.co.kr/xetip/504341

9. 댓글이 2줄 이상일 경우 접고 펴는 기능

- https://moonhouse.co.kr/xetip/464911

10. 구글 드라이브 자료링크를 게시판에 적용

- https://moonhouse.co.kr/xetip/457183

11. 댓글유도문구에 에니메이션 효과 적용

- https://moonhouse.co.kr/xetip/433425

12. 내용글 없이 글 작성하기

- https://moonhouse.co.kr/xetip/432885

13. 확장변수중 "단일 선택(radio)"시 "직접입력" 부분 나오게 수정

- https://moonhouse.co.kr/xetip/405474

14. 대댓글에 'OOO님에게 달린 댓글' 구현

- https://moonhouse.co.kr/xetip/405391

15. 타임라인모듈 사용시 게시판명 나오게 수정하기

- https://moonhouse.co.kr/xetip/388839

16. 그리고 다수의 확장변수를 이용한 기능들 -

숨김기능 - https://moonhouse.co.kr/xetip/335835

색상적용 - https://moonhouse.co.kr/xetip/404287

종료출력 - https://moonhouse.co.kr/xetip/505865

[-f]

MH Before V1.2 위젯

2023-07-06T10:40:34+09:00

php 8 이상에서 작동됨

[ 특징 ]

1. Before이미지 와 After이미지를 비교하는 위젯

2. 지정 게시판에 Before 이미지를 처음 올리고 After 이미지를 두번째로 업로드

3. 대상 분류 srl값으로도 출력가능

4. 이미지의 사이즈는 첫이미지, 즉 Before이미지의 사이즈를 따라갑니다. 되도록이면 사이즈를 동일하게 만들면 됨

5. 중앙에 화살표를 좌우로 움직이면 Before / After 이미지로 출력

6. 하단문구 지정 가능

7. 게시글의 이미지 순서 지정 가능

Mh Make 위젯스타일

2023-05-24T09:27:40+09:00

문하우스 대문페이지에 있는 위젯스타일입니다.

[특징]

1. 테두리의 유무

2. 타이틀 색상, 타이틀 앞 언더바 색상 지정 가능

3. 더 보기 출력

4. V1.1 - 테두리 색상 지정 가능

[설정 화면]

Mh BigSlider V3.0 위젯 - 2025.02.05

2023-05-19T20:26:04+09:00

[ V 3.0 특징 ]

1. php8 이상에서 적용

[ V 2.1 특징 ]

1. 내용글 영역에 확장변수 출력가능

2. 확장영역 버턴 대신 내용 출력

3. D-day / 시작전 출력

4. 기간 출력 - https://moonhouse.co.kr/xetip/590008

[ V 2.0 특징 ]

1. 배경 이미지 제거 스킨 추가

2. 어떤 크기라도 가능

3. 슬라이드 내용 가로, 세로 정렬

[ V 1.1 특징 ]

1. Slide 설정에 자동 슬라이드쇼, 마우스 hover시 슬라이드 쇼 일시 중지, 랜덤 재생 추가

2. 마우스 hover시 썸네일 확대

[ 특징 ]

1. 깔금한 슬라이드 배경이미지 적용

2. 3개의 스킨 적용 - 1080px / 850px / 750px 레이아웃폭에 적당한 크기

3. 좌,우측 네비와 하단 Dot 선택 가능

4. 썸네일과 제목, 내용, 날짜를 출력하는 위젯 - 선택가능

5. 확장변수 선택시 바로가기 버턴 출력

6. 단점으로 배경이미지의 크기가 정해져 있어서 크기를 임의로 조절이 안됨

Mh Justice Layout V 1.6 [ 2025. 06. 09 ] - Sale 제품

2023-03-26T10:34:36+09:00

Mh Justice Layout is a one page html5 bootstrap template.

This template comes with smooth animations, pop-up video and many more…

1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동

2. 거의 완벽한 반응형(모바일형)으로 츨력

3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능

4. 상단 메뉴를 자유자재로 선택 가능

• 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴

• 메인 메뉴 - 레이아웃 설정 메뉴에서 선택한 mid들로 이동(3차 메뉴 까지 지원)

• 메인 + 원페이지 - 두가지 메뉴 둘다 적용

5. 다양한 자체 프로그램을 내장

• 아코디언 메뉴

• 아이폰배경 로그인 팝업

• 배경 슬라이드

• 공지사항 팝업창

• 동영상 팝업 플레이어

• 사이트정보 메뉴 팝업창 출력

• 페밀리 메뉴

• 메뉴위치 View

• 롤링 배너

• 유튜브 출력 롤링 배너

6. 다양한 위젯, 애드온을 같이 동봉

• 포인트 상태 위젯

• Mh Slide Pro위젯

• Contact 위젯 문의 스킨

• Web Fonts 애드온

• 말풍선(툴팁) 애드온

7. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다.

Web Fonts Addon / 말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다.

페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다.

[적용페이지]

• https://moonhouse.co.kr/justice

• https://moonhouse.co.kr

• https://moonhouse.co.kr/one?l=kr

• https://moonhouse.co.kr/youtube

• https://moonhouse.co.kr/xemy

• https://moonhouse.co.kr/buy - MH Gallery를 제외한 2차 메뉴들

• 지금 보고 있는 페이지

메뉴얼

Mh SmartBanner Widget V1.1 [2021.01.13] - Sale 제품

2023-03-26T10:25:33+09:00

카테고리지정 / 시작,종료설정 / 배경 블랙 / 좌로 이동 / 랜덤 / 네비가능 / 무한루프 / 클릭시 지정사이트로 이동 / 풍선도움말

- "대상 분류값"으로 배너 출력 가능

- "위젯 NO" 처리로 여러개의 배너를 다양한 형태로 생성 가능

- Slide의 다양한 옵션

- Auto기능과 타임지정 가능

- 좌우 네비와 하단에 도트 네비 출력 가능

- 슬라이딩의 방향을 좌우 / 상하로 선택 가능

- 슬라이딩의 모습를 4가지로 선택 가능 - 서서히, 착, 튕기기, Fade

- 배너에 마우스 Hover시 풍선도움말 출력

- 게시판의 확장변수와 연동하여 배너 클릭시 지정된 주소로 연결

- 확장변수를 이용하여 배너출력의 시작일과 종료일을 지정 가능 - 지정하지 않을시 항시 출력

"게시판관리" < "확장변수"

- 주소(url) : URL 형식

- 시작(start),종료일자(end) : 일자(연월일) 형식

- 게시판 글 작성시 주소와 시작,종료일자를 지정

- 배너출력이 시작일에 출력되며 종료일 자정이후에 사라짐

- 배너클릭시 지정 주소로 연결

- 게시판 제목이 풍선도움말로 출력

스케치북 문하우스 버전 을 사용하시면 게시판에서도 종료일 및 진행사항을 볼 수 있습니다.

- 게시물의 원본 이미지를 가져 오는 방식

- Png, Gif파일의 투명배경 지원

- 동적인 Gif파일 지원

Mh Brickfolio Widget V2.0 [2025.02.02] - Sale 제품

2023-03-26T10:11:37+09:00

[ V2.0 특징 ]

1. php8 이상에서 작동

[ V1.3 특징 ]

[ SketchBook5_Mh 수정버전과 같이 연동 ]

• 확장 변수가 자동으로 제목으로 대체되는 방법
https://moonhouse.co.kr/xetip/578453

• 확장변수를 이용해 진행버턴과 D-Day를 함께 출력
https://moonhouse.co.kr/xetip/577872

[ V1.2 특징 ]

1. 페이지기능을 탑재한 Box형 위젯

2. 통합게시판 위젯으로도 활용가능

3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원

4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때)

5. Box를 총8가지의 에니메이션 효과로 출력

6. Box의 색상 / 테두리 / 그림자등을 지정

7. 썸네일 / 제목 / 내용 / 기타등등의 출력유무, 크기, 색상을 지정

8. 모듈별 / 분류별로 지정 가능

9. 상품진열 형식으로 설정가능

- 상품(썸네일) Zoom, Rightbox 선택

[ Zoom ]

[ Rightbox ]

- 먼저 상품을 진열하는 게시판에서

"사용자정의"(확장변수) - "정의이름작성"

가격은 "price - 한줄 입력칸", New 스티커는 "new - 단일선택", 품절은 "soldout - 단일선택", 평점은 "rating - 단일선택"으로 작성

"new & soldout"은 기본값으로 "Y,N" / "rating"은 기본값으로 "0,1,2,3,4,5,6,7,8,9,10" 주면 됩니다.

Mh Portfolio V1.0

2023-03-26T10:00:29+09:00

[ V1.0 특징 ]

1. 깔끔한 썸네일 위젯

2. 썸네일 Box에 마우스 Hover시 제목과 내용글이 다양한 효과와 색상으로 출력

-- 효과 15가지, 배경색상 13가지, 버턴색상 17가지

3. 카테고리별 출력도 가능

4. 페이지 기능 가능

-- ajax적용으로 화면 리프레쉬 없이 작동

5. 확장변수를 이용해 버턴출력 가능

6. 다수의 위젯생성도 가능

7. 반응형 지원

Mh Owl Slide V1.0

2023-03-26T09:55:17+09:00

[ 특징 ]

1. 깔금한 배너 롤링 위젯입니다.

2. Auto Slide를 지원합니다.

3. 슬라이드에 타이틀 / 썸네일 / 네비를 지원합니다.

4. 배경색상외 여러 색상들을 지정할 수 있습니다.

5. 타이틀 / 내용 / 각종 옵션등을 지정 가능합니다.

6. 카테고리 출력도 가능합니다.

7. 원본 코드의 테마 색상이 Red에 맞추어져 있어서 기본 색상은 Red입니다.

8. 완벽한 반응형 지원과 모바일에서 스와프기능도 지원합니다.

9. 두종류의 스킨 지원 - Default Skin, All Pictures Skin

All Pictures Skin은 게시물안의 모든 이미지들을 불러올 수 있으며 이미지클릭시 Lightbox형식으로 출력됩니다.

최대한 설정을 기본으로 두고 출력한 위젯모습입니다. 썸네일에 마우스 오버시 내용글과 날짜등이 출력되며 썸네일 아래에 제목이 출력됩니다.

내용글 영역과 제목 영역을 출력하지 않고 확장변수(d_url)를 이용하여 마우스 오버시 확장변수 주소가 출력되고 썸네일 클릭시 확장변수주소로 이동합니다. 배너광고로 활용하면 좋겠죠~

Mh Multi Widget V2.0 [2025.01.25] - Sale 제품

2022-07-01T09:04:18+09:00

메뉴얼

[ V 2.0 업데이트 내용 ]

php 8 이상에서 작동됨

• 확장변수 선택지별 출력 스킨 추가

https://moonhouse.co.kr/xemy/595959

[ V 1.6 업데이트 내용 ]

• 댓글 많은순으로 정렬.
https://xetown.com/questions/1394764#comment_1395175

• 예약발행 모듈에 대응
https://xetown.com/download/1721679#comment_1722728

[ SketchBook5_Mh 수정버전과 같이 연동 ]

• 확장 변수가 자동으로 제목으로 대체되는 방법
https://moonhouse.co.kr/xetip/578453

• 확장변수를 이용해 진행버턴과 D-Day를 함께 출력
https://moonhouse.co.kr/xetip/577872

[ V 1.5 업데이트 내용 ]

•FirstThumb 스킨 추가

스케치북 게시판 스킨 V 2.1 에 추가된 "첫 게시글만 썸네일 출력 스킨"을 위젯에서도 구현했습니다.

근데 첫 게시글만 썸네일 출력 기능은 지원하지 않습니다.

Demo : https://moonhouse.co.kr/mhtotal

- 썸네일, 프로필, 댓글등의 모든 항목의 출력을 지정 가능

- 프로필 이미지의 경우 프로필 사진을 등록하지 않은 경우와 비로그인 작성자도 자동으로 프로필 이미지를 등록합니다.(40가지의 이미지중 랜덤)

- 썸네일의 경우 모바일에서는 가로 화면 전체로 출력

- 게시판명, 분류명, 확장변수 2개까지 출력

Mh Sideways Layout

2022-05-16T20:42:44+09:00

[특징]

•화면전환이 가로 방향으로 움직입니다.

•홍보용 사이트 레이아웃에 적합합니다.

•화면 좌우에 마우스 Hover시 자동으로 슬라이딩 됩니다.

•좌측 삼선 햄버거 메뉴형식 / 페밀리 사이트 / 자체 로그인 지원합니다.

•카카오 지도를 지원합니다 - 카카오톡 앱키 입력 필수

•본문 아래에 각 섹션 바로가기 아이콘을 지원합니다.

•완벽한 반응형으로 작동합니다.

•메세지 보내기(Contact Us)를 적용할려면 contactfree.zip 위젯을 설치하면 됩니다.

•갤러리 섹션은 Lightbox 전용 Hover 위젯 을 사용했습니다.

Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품

2022-05-02T21:15:50+09:00

[ V2.2 특징 ]

•Colorbox Skin 추가

- 첫화면에 박스출력

- Auto Slide 지원

•본문 메뉴(GNB)를 상단 가로 형태에서 좌측 삼선 햄버거 형태로 변경

•배경이미지 슬라이드 로딩 기능을 적용

Demo - https://moonhouse.co.kr/cb

[ V2.0 LightBox Skin 특징 ]

•LightBox Skin 추가 -- 지연님 요청

•Default Skin은 이미지를 전체화면 Fullscreen 으로 출력되는 반면 LightBox Skin은 이미지의 원본 크기로 출력됩니다.

Demo - https://moonhouse.co.kr/lb

[특징]

•레이아웃과 위젯의 콜라보로 이루어진 전체화면 갤러리 스킨입니다.

•레이아웃만으로는 게시글의 이미지를 가져오기가 힘들어서 위젯으로 이미지를 가져옵니다.

•레이아웃 설정에서 위젯의 모든 설정을 제어 할 수 있습니다.

•Gallery Layout은 Gallery Widget과 함께 해야 됩니다 - 다른 기능 없습니다.

•Gallery Widget은 단독으로 사용이 가능하나 레이아웃에 따라서 적용이 어려울 수 있습니다.

•위젯으로 사이드 메뉴 & 레이웃으로 본문 메뉴 사용가능

•다크모드 적용 했습니다.

•완벽한 반응형으로 작동합니다.

•PC에서는 키보드 화살표로도 이동 가능, 모바일에서는 터치로도 이동 가능합니다.

[PC Mode]

[Mobile Mode]

•확장변수를 사용하여 New 아이콘 & 평가(별 아이콘) & Best 메달 & 확장변수 2종류를 출력할 수 있습니다.(이미지에서는 가격과 품절 - 수정가능)

•다양한 정렬대상을 지원합니다.

•다양한 SNS 계정연결을 지원합니다.

[적용방법]

1. 주문요청 > 입금 > 관리자가 권한 부여 > 구매자게시판 > 첨부파일을 다운받아서 압축을 풀면 아래와 같이 layouts & widgets 폴더가 생성됩니다.

2. layouts & widgets 폴더를 ftp로 업로드 해 주면 됩니다.

3. 대상모듈 게시판의 확장변수를 추가합니다.

4. 레이아웃 설정을 해 줍니다.

•대상모듈 번호를 필히 입력하셔야 정상적으로 출력됩니다.

관리자설정 > 고급 > 설치된 위젯 > Mh Gallery > 코드생성 > 대상모듈 > 추가> 코드생성 > 코드에 출력되는 module_srls 값을 입력하면 됩니다.

•대상모듈의 분류항목별로도 출력이 가능합니다.

•License 영역은 출력하지 않아도 됩니다.

•모바일(사이드) 메뉴(SNB)를 잘 이용하시면 여러 종류의 갤러리를 운영 할 수 있습니다.

p.s XE 버전은 코어 자체에서 다크모드 기능을 지원하지 않으므로 다크모드 기능이 빠져 있습니다.

Mh Width Hover Slide 위젯 V1.0 (2022.04.30)

2022-04-30T14:11:23+09:00

[ 특징 ]

•화면의 사이즈에 따라서 배너의 갯수가 자동으로 조절되며 배너 좌우측 네비게이션 Hover시 슬라이드로 작동

•Auto 슬라이드는 지원하지 않으며 Hover시만 슬라이드 작동

1. 썸네일, 제목, 내용 출력하는 위젯 - 선택가능

2. 대상 분류 srl값으로도 출력가능

3. 확장변수 사용하여 바로가기 버턴지원 - 선택가능

4. 위젯코드 생성후 레이아웃의 바깥영역에 위치시 전체 넓이로 출력

5. 다양한 정렬대상 지원

•자세한 기능은 https://moonhouse.co.kr/wtest 에서 확인가능

Mh Tilted Content 위젯 V1.1

2022-04-26T14:07:46+09:00

자료실모듈이 라이믹스가 업되면서 수정시 문제를 일으키네요, 이제 부터 새로운 자료는 "나의 Rhymix"로 올립니다.

[ V1.1 UP ] -2022.04.26

•AutoSlide기능 추가됨

- 특징

1. 슬라이드 Box형 위젯

2. Box내의 썸네일이 에니메이션 효과로 움직입니다.

3. 대상분류 srl값으로도 게시글 출력

4. 각 Box 바탕색상을 다르게 출력 가능

Mh Width Free 위젯 V1.0 (2022.04.12)

2022-04-12T00:34:49+09:00

[ 특징 ]

•화면의 사이즈에 따라서 배너의 갯수와 크기가 자동으로 조절되며 마우스 오브시 지정글이 출력되는 형식

•owl.carousel 소스를 이용한 슬라이딩 형태

1. 썸네일과 제목, 내용, 날짜, 글쓴이를 출력하는 위젯 - 선택가능

2. 대상 분류 srl값으로도 출력가능

3. 썸네일 마우스 Hover시 상세 글 출력 - 선택가능

4. 확장변수 사용하여 바로가기 버턴지원 - 선택가능

5. Lightbox 출력 지원 - 선택가능

6. 위젯코드 생성후 레이아웃의 바깥영역에 위치시 전체 넓이로 출력

•이미지에서 상단은 위젯페이지에서 위젯생성으로 레이아웃안 content 영역에 츨력된 형태

•이미지에서 하단은 레이아웃의 content 바깥영역에 위젯코드 복사해서 출력된 형태로 브라우즈 전체 가로폭으로 출력

content 위젯스킨 - 공지사항 형태로 출력하는 mhHome스킨

2022-04-02T08:42:26+09:00

라이믹스 기본 위젯인 content 위젯에 공지사항 형태로 출력되는 간단한 스킨입니다.

상단1열의 내용은 제목 썸네일 내용이 기본으로 출력되고

2열 부터는 썸네일과 내용없이 제목과 기타 등등 다른 content 위젯의 설정을 따라 출력되는 형태입니다.

참고로 상단 박스안의 날짜와 글쓴이는 "엮인글수 표시"의 유무로 결정됩니다.

Mh Appoint PopUp Pro V1.5 - 2025. 06. 03

2021-06-05T11:03:40+09:00

Q. 직접입력을 해서 유튜브 동영상 소스코드를 넣으면 팝업이 보이지 않습니다.

A. 직접 입력을 선택하셔도 문서번호는 필히 입력하셔야 됩니다.

Q. 문서 번호를 넣어봤는데요 썹네일과 동영상이 작게 나와서요.

A. "media_embed 애드온"을 사용하시는 것 같은데 글 작성시 소스코드를 직접 입력하셔야 됩니다.

[ V1.5 UP ] -2025.06.03

• 출력된 팝업창을 지정 Time 경과시 자동으로 종료 추가(선택가능)

[ V1.4 UP ] -2022.04.19

•상단에 닫기 아이콘 선택 가능

•팝업 외부에 하단 닫기 영역 위치시 Bar전체에 배경색 적용 - 내부에 위치시는 기존의 방식 유지

•달카페님의 요구 관철 - https://moonhouse.co.kr/qa/555255?comment_srl=555331#comment_555331

[ V1.3 UP ] -2021.06.05

•무한대의 팝업 출력 가능을 단순화

•팝업의 출력을 그룹별로 지정 가능

[ V 1.2 Up ] -2021.01.22

무한대의 팝업 출력 가능 - 팝업 순서와 팝업 Class명만 바꾸어 주면 됩니다.

- V 1.1 Up [2020.12.23]

지정한 게시판외에 직접 입력방식 추가

상단부분은 이미지이며 하단 부분은 html로 작성한 경우입니다.

- 사용방법

mh_appoint_popup Pro 위젯은 대상문서의 번호를 입력하면 팝업으로 출력됩니다.

- Pro 특징

1. 자체적으로 2개의 팝업을 띄울 수 있습니다.

2. 2개의 팝업창이 완전히 다르게 작동합니다.

(팝업순서와 팝업 Class명 으로 적용)

3. 팝업창 닫는 기간 날 수를 정 할 수 있습니다.

4. 지정한 날짜에 팝업을 닫을 수 있습니다.(2가지 방법)

두 방법 다 장단점이 있습니다.

위젯의 설정을 이용하는 방법은 간단하나 클라이언트가 방법을 어려워 할 수 있습니다.

게시판의 확장변수를 이용하는 방법은 설정이 좀 복잡하나 한번 설정해 놓으면 게시판에서 글 수정만으로 종료일을 변경할 수 있습니다.

[첫번째 - 위젯의 설정를 이용]

위젯의 설정에서 "팝업창 출력종료 날짜지정"란에 종료할 날짜를 20191207 이런 형식으로 적어주시면 됩니다.

[두번째 - 게시판의 확장변수를 이용하여 설정]

A. 먼저 팝업으로 지정할 게시판에

"설정" - "사용자정의" 에 사용자정의 이름을 end로 하고

"형식"을 "일자(연월일)"로 확장변수를 하나 만듭니다.

B. 게시판에 글 작성시 확장변수의 팝업종료일을 지정합니다.

(종료일을 지정하지 않으면 종료 기능이 작동하지 않습니다)

C. "사용지 정의 이름"이 end가 아닌 경우는

팝업위젯 출력시 "날짜지정 팝업닫기 사용자정의 이름"란에 이름을 적어 주시면 됩니다

이전 일반 버전들 입니다.

Mh Author 위젯 V2.0 (2025.02.02)

2021-02-12T13:05:08+09:00

V 2.0 수정내용(2025.02.02)

1. php 8 이상에서 작동

2. css 수정

V 1.5 수정내용(2024.01.13)
1. 베너스킨 바로가기 확장변수 미작성시 문제 해결
2. 유튜브스킨 추가 - 확장변수 사용자정의 (기본 : transfer) : 위젯상에서 유튜브 재생 가능 합니다만 사이트가 약간 느려집니다.

V 1.4 수정내용(2021.02.12)

SketchBook5 게시판스킨 - 문하우스 수정버전 V1.8.1 북 갤러리 형태 게시판에 맞추어 "Book 갤러리"스킨 추가

- Book 갤러리형식 게시판의 확장변수를 그대로 가져옵니다 - new, best, soldout, 평점

- 제목글아래 지정한(ID) 확장변수를 출력 가능

- 게시판의 png, gif 이미지들은 원본을 가져와 투명배경을 지원하므로 좀더 섬세한 진열이 가능하며, jpg 기타 이미지들은 썸네일로 출력

- 진열받침대을 우드, 아크릴, 출력 없음으로 선택가능

- 썸네일 Overley시 내용 출력기능 가능 - 제목, 평가, 확장변수2, 내용글

p.s Mh Author 위젯은 진짜 돈 받고 팔아야 하는데 2021년 기념으로 올린거라 계속 무료로 버전업합니다^.^

V 1.3 수정내용(2021.01.20)

- 게시글의 mp4, gif 파일들을 위젯에서 실시간으로 동적으로 보여 줍니다.

- 그외의 jpg, png파일들은 썸네일로 출력됩니다.

- 상단영역 출력시는 하단영역은 썸네일로 출력, 상단영역만 동적으로 움직임

- 하단 영역만 출력시는 하단영역 동적으로 움직임

V 1.2 수정내용(2021.01.04)

1. 한위젯에서 상단 영역(갤러리형식)과 하단 영역으로 분리하여 출력가능

2. 설정이 다른 다수의 위젯 생성가능

3. 좌우 화살표와 하단 Dots로 Navi 사용 - 선택가능

4. slick 지원항목 다수 추가

5. Banner Skin 추가

- 확장변수이용해서, 클릭시 해당사이트로 이동

- 게시물의 원본 이미지를 위젯에서 출력하는 방식 - 배너이미지 작업시 가로, 세로의 사이즈를 통일하면 깔끔

- 배너이미지중 가로 큰이미지, 세로 큰이미지의 사이즈를 적용하면 가로, 세로 중앙 정렬

[ 특징 ]

쉽고 가벼운 슬라이더 slick.js를 사용했습니다.

1. 썸네일과 제목, 내용, 날짜를 출력하는 깔끔한 위젯 - 선택가능

2. 대상 분류 srl값으로도 출력가능

3. 썸네일 마우스 Hover시 Zoom기능 지원 - 선택가능

4. 확장변수 사용하여 바로가기 버턴지원 - 선택가능

5. Box안 출력물 가로, 세로 형태 출력가능

[slick 지원항목]

1. 슬라이딩 Auto기능 - 선택가능

2. 슬라이딩 Speed

3. 슬라이딩 Box 갯수

4. 하단 Navi - 선택가능

5. 슬라이딩 형태 - 일반(ease), 뜅기기(cubic-bezier)

6. 화면 Fade - 선택가능

7. 슬라이딩 방향을 좌우, 상하로 지정 가능

8. 화면 좌우로 이전Box, 다음Box 일부 출력(50px) - 선택가능

9. 세로 단 쌓기 지원 - 선택가능

10. 모바일 반응형 지원

11. 터치 Swipe 지원

거래장+Map 게시판스킨 Mh Books V1.2 - 2022. 03 20

2021-02-05T21:39:52+09:00

게시판으로 간단한 거래장부 만들기

스케치북 게시판에 카카오지도 출력 V1.2

예전에 Tip으로 올렸던 2개의 내용을 합쳐서 하나의 게시판스킨으로 만들어 보았습니다.

기본 코드는 스케치북 게시판 스킨을 그대로 가져 왔습니다.

[ V1.2 수정 ]

• "게시판 목록에서 확장변수 바로 수정 애드온" 을 게시판과 모바일에 적용

원 게시글 : https://xetown.com/download/1666779

Tip 게시글 : https://moonhouse.co.kr/xetip/553814

• 게시목록 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정 하는 기능 추가

https://moonhouse.co.kr/xetip/554284

[ V1.1 수정 ]

• 지도출력 사용시 php상위버전(7.2이상) 에서 지도화면 일부만 출력되는 문제 해결

기능은 거래장부에 확장변수로 주소 입력시 지도가 출력되는 게시판입니다.

자세한 기능 내용들은 두개의 Tip을 읽어 보시면 됩니다.

1. 받으신 파일의 압축을 풀어서 /modules/board/skins/mh_books 설치를 합니다.

2. "Mh 거래장" 스킨으로 게시판을 생성 합니다.

3. 확장변수에 자신이 원하는 항묵들을 추가합니다.

4. 지도를 출력하기위해서는 "카카오톡 앱키 입력"이 필수 입니다.

https://developers.kakao.com 접속해서 받으시면 됩니다.

다양하게 활용할 수 있으므로 받아놓으시면 좋습니다.

5. "스킨 설정"을 자신이 원하는 형태로 설정합니다.

6. 본문 작성시 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣으시면 편합니다.

http://tablesgenerator.com/html_tables

7. 목록형태

8. 본문 내용

10. 모바일

11. 위젯출력 - Mh_multi 위젯

템플릿 컴포넌트 이미지 비교기능 MH 템플릿

2021-01-24T11:46:52+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

[일부 수정]
- 좌우로 정확하게 화살표가 가지 않는 문제 수정
- main.js 파일을 /modules/editor/components/ap_template/templates 폴더안에 넣어 주세요

소스보기에서 아래부분을 찾아서 수정하시면 됩니다.

<img src="/modules/editor/components/ap_template/templates/mh-before/001.jpg" /> // left Img

<img src="/modules/editor/components/ap_template/templates/mh-before/002.jpg" /> // Right Img

위의 부분을 파일추가한 이미지 경로로 수정하시면 됩니다.

이미지의 크기는 최대 화면폭의 90%로 설정되어 있습니다.

수정 하실려면 <div class="inner" style="max-width:90%"> 이 부분 수정하시면 됩니다.

소스출처 : https://marshall-ku.com

Web Fonts 애드온 1.9 - 2024.05.12

2020-11-23T13:25:54+09:00

[ V_1.9 업데이트 ] - 2024. 05. 12

• 네이버 나눔스퀘어 네오 NanumSquareNeo 외부링크 추가

https://moonhouse.co.kr/xetip/590732

• Font Awesome 6.5.2 외부링크 UP

[ Noto Sans KR 수정 ]

기존 ebay.co.kr에서 제공하던 소스가 막혔네요, 구글로 수정해 주세요

/addons/web_fonts/web_fonts.addon.php 파일 수정

if( $addon_info->noto_use == 'enable' ) {
Context::addCSSFile('///fonts.googleapis.com/earlyaccess/notosanskr.css');
}

[ V_1.8 업데이트 ] - 2022. 03. 29

• 폰터 어썸 V 6.1.1으로 버전 UP

[ V_1.7.1 업데이트 ] - 2021. 08. 29

1. sky 색상 추가해서 총10가지 - SketchBook5 MH 게시판스킨 에서 10가지 색상 필요

[ V_1.7 업데이트 ] - 2020. 11. 23

1. 폰터 어썸 V 5.15.1으로 버전 UP

2. Noto Sans Korean 폰트 추가 - 외부파일 불러오기

css파일에 { font-family: "Noto Sans Korean", "Open Sans", sans-serif; }

[ V_1.6 업데이트 ] - 2019. 12. 18

1. 폰터 어썸 V 5.12.0으로 버전 UP

2. Sexy Button

- dark와 white 색상 추가해서 총 9가지

- 버턴크기 mini를 추가해서 총 3가지

class="sbtn_mini sbtn-white"

class="sbtn_mini sbtn-dark"

[ V_1.5 업데이트 ] - 2018. 10. 29

1. 폰터 어썸 V 5.4.2으로 버전 UP

2. 폰터 어썸 V4 / V5 통합됨

[ V_1.4 업데이트 ]

1. Sexy Button의 button소스가 XE와의 충돌로 문제

- button_ 부분을 sbtn_으로 수정

- button- 부분을 sbtn- 으로 수정

- button_small button-red 를 sbtn_small sbtn-red 이렇게 변경해야지 Sext Button에드온이 작동함.

- Sexy Button으로 자신이 버턴을 만든적이 없으면 Pass~

[ V_1.3.1 업데이트 ]

1. 폰터 어썸 5.0.2으로 버전업후 일부 4.7.0 아이콘들 사리지는 증상을 해결(두버전 모두 포함)

[ V_1.3 업데이트 ]

1. 폰터 어썸 5.0.2으로 버전업

2. 나눔고딕도 내,외부 파일 불러오기로 구분하였습니다.

[ V_1.2 업데이트 ]

1. 폰터 어썸 4.7.0으로 버전업

2. 폰터 어썸 을 내부, 외부 둘 중에서 선택해서 불러올 수 있게 수정함

Web Fonts 애드온 1.0 에 Sexy Button을 추가했습니다.

Font Awesome Icons도 4.5.0으로 버전업 되었습니다.

"Sexy Button"은 웹폰트는 아니지만 작동기능이 비슷하고 사용목적도 비슷해서 같이 합쳤습니다.

Sexy Button은 제가 붙힌 것은 아니고 소스를 얻은 곳에서 사용된 제목입니다.

[Sexy Button 사용법]

위의 이미지에서 보이는 버턴들이 "Sexy Button"을 적용해 만든 버턴들입니다.

큰 버턴, 작은버턴, 총 7가지의 색상으로 구현할 수 있습니다.

그리고 Font Awesome Icons과 함께 사용하도록 만들어져 있습니다.

위에 다섯개가 작은버턴 5가지 색상입니다.

1. blue <a href="{getUrl}" class="sbtn_small sbtn-blue"><i class="fa fa-step-backward"></i>문구</a>

2. green <a href="{getUrl}" class="sbtn_small sbtn-green"><i class="fa fa-step-forward"></i>문구</a>

3. purple <a href="{getUrl}" class="sbtn_small sbtn-purple"><i class="fa fa-list"></i>목록</a>

4. orange <a href="{getUrl}" class="sbtn_small sbtn-orange"><i class="fa fa-pencil-square-o"></i>수정</a>

5. red <a href="{getUrl}" class="sbtn_small sbtn-red"><i class="fa fa-trash"></i>삭제</a>

아래 두개가 큰버턴 2가지 색상입니다.

6. yellow <a href="{getUrl}" class="sbtn sbtn-yellow"><i class="fa fa-comments"></i><i class="fa fa-folder-open"></i>문구</a>

7. gray <a href="{getUrl}" class="sbtn"><i class="fa fa-comments"></i><i class="fa fa-folder-open"></i>문구</a>

웹콘 최신게시물 뉴스형위젯의 MH스킨

2020-10-30T00:09:16+09:00

webcon님의 웹콘 최신게시물 뉴스형위젯

제가 원하는 기능과 비슷하여 스킨을 만들어 보았습니다.

설정들을 약간 수정한 관계로 위젯전체를 올립니다.

[특징]

1. 선택한 mid의 첫게시글이 썸네일과 제목, 내용이 상단에 출력되며 아래로 게시글들이 리스트로 출력됩니다.

2. 해당 리스트에 마우스 hover시 상단에 해당 글의 썸네일과 제목, 내용이 출력됩니다.

3. 페이지 기능을 지원합니다.

p.s 문하우스 대문페이지의 기존 형태를 최대한 살리려고 노력했습니다.

예전에는 위젯2개를 상하로 배치해서 (http://moonhouse.co.kr/qa/278769) 형태를 만들었는데 -- 왼쪽 이미지

현재는 한개의 위젯으로 구현했습니다 -- 오른쪽 이미지

Mh All Pictures 위젯 V1.0

2020-09-08T13:21:18+09:00

[ 특징 ]

1. 게시판내의 모든 이미지를 출력해 주는 위젯

2. 대상 분류 srl값으로도 출력가능

3. 박스에 마우스 hover시 이미지 확대기능 선택

4. 제목글과 내용글 출력을 선택

5. 원본 이미지를 불러오는 방식이라 움직이는 gif파일도 불러옵니다.

6. 이미지클릭시 게시판출력과 Lightbox출력중 선택

7. 게시판내의 이미지가 다수일때 세로 칸수 지정 가능

8. 모바일 반응형 지원

9. 정렬방법 선택

10. 단점 : 썸네일들이 원본을 축소해서 보여 주는 방법이라 위젯에서도 트래픽이 원본의 사이즈대로 나옵니다.

특별한 경우가 아니면 사용을 자재하는 것이 좋을 듯 합니다.

♦ 중앙정렬 - 게시물별로 중앙 정렬

♦ 좌측정렬 - 게시물 상관 없이 좌측 일렬로 정렬

마스크 판매 위치 위젯 - 문하우스 수정 버전

2020-03-11T12:31:06+09:00

람보님이 마스크 판매 위치 위젯 을 배포해 주셔서 대구 시민의 한사람으로 많은 도움이 됩니다.

감사합니다.

라이센스가 MIT라 저도 조금의 보탬이라도 될까 하고 조금은 더 편리하고 직관적으로 만들어 보았습니다.

댓글에 달려 있는 팁들도 적용하고,

반응형도 지원하여 스마트폰에서도 보기 좋게 출력되고,

검색시 마다 페이지가 다시 열려서 ajax로 작업했습니다.

그리고 기존의 위젯페이지에 전체 페이지가 출력되면 너무 길어져서 세로 높이 조절 옵션도 넣었습니다.

sexy button 적용버전 - mask_store_mh.zip

원본수정 버전 - mask_store.Ver.1.1.zip

아무쪼록 이 위젯이 빨리 필요없어 지기를 바라면서...

Mh Slide Pro V2.0

2020-01-19T09:33:39+09:00

[ V2.0 특징 ]

1. php8 이상 적용
2. css 수정 및 보안

[ 특징 ]

1. Slide Pro 슬라이드 추가 를 위젯으로 만들었습니다.

2. Auto Slide를 지원합니다.

3. 슬라이드 아래에 타이틀 / 썸네일 / 네비를 지원합니다.

4. 배경이미지와 각 Box별 색상을 지정할 수 있습니다.

5. Box안의 타이틀 / 내용 / 썸네일의 각종 옵션을 지정 가능합니다.

출석부모듈에 pr_stamp 스킨을 수정한 버전 - 업데이트

2019-12-16T13:07:00+09:00

GitHub - moonhouse-80san/attendance: 출석부 모듈 - 문하우스 수정버전 출석부 모듈 - 문하우스 수정버전. Contribute to moonhouse-80san/attendance development by creating an account on GitHub. from GITHUB.COM

Git에 올려진 모듈은 V7.2.9에 맞추어 수정한 버전입니다.
저 혼자 사용하고 테스트하여 별 문제는 없는데 안정적인지는 모르겠습니다.

pr_stamp 스킨에서 해당칸 클릭시 해당 날짜 내용글 출력됩니다 - 이전 버전은 해당 날짜 클릭

[업데이트]

아무래도 모듈전체를 올리는 것은 문제의 소지가 있는 것 같아서 수정파일과 스킨만 올립니다.

출석부 모듈 v 7.2.7 에서 작업했습니다.

ps. 혹시라도 작동이 이상하면 댓글 남겨 주세요.

[설치]

1. 먼저 출석부 모듈 v 7.2.7을 받아서 설치를 합니다.

2. 첨부파일을 받아서 압축을 풀면 m.skins / skins 두개의 폴더와 attendance.model.php, attendance.view.php 2개의 파일이 있습니다. 이 파일들을 modules/attendance/ 폴더안에 넣어 주시면 됩니다.

3. 버턴들이 올바르게 출력될려면 Web Fonts 애드온을 설치해서 Sexy Button을 활성화해야 됩니다.

[기능]

1. 달력의 해당 날짜를 클릭하면 그날의 인사말을 볼 수 있습니다.

2. 약간의 이미지 변경

람보님의 출석부모듈 에 prologos님의 도장스킨 pr_stamp 을 약간 수정해 보았습니다.

수정이라기 보다는 default스킨과 pr_stamp스킨을 합쳤다고 하는게 맞겠네요.

default스킨의 기본 기능에 pr_stamp스킨의 달력과 스템프기능을 합쳤습니다.

그리고 모바일에서도 보기좋게 출력되도록 좀 단순하게 수정했습니다.

날짜 부분 버턴색상은 Web Fonts 애드온 을 설치해서 Sexy Button을 활성화 해야 합니다.

[스마트폰 화면]

Mh Close 위젯스타일

2019-11-16T23:36:15+09:00

위젯에 닫기 버턴을 달아보자 Tip 을 남기고

이것을 적용해 위젯(Mh Folding 위젯) 을 만들다가

이것을 위젯스타일로 적용해도 좋겠다 쉽어서 만들어 보았습니다.

[특징]

1. Close 버턴의 모양을 텍스트와 이미지로 선택하게 작업(이미지 3개)

2. 버턴의 위치를 좌/우로 선택 가능.

3. 텍스트 선택시 문구와 색상, 크기를 작성할 수 있습니다.

Mh Folding 위젯 V2.0 - 2025.01.29

2019-11-12T14:01:31+09:00

[V2.0 특징]

1. php8 이상에서 작동

2. 모바일에서 좌우로 스크롤 작동

[ V1.2 특징 ]

"박스에 마우스hover시 이미지가 반듯하게 펼쳐집니다"가 정상적으로 작동됨

[ V1.1 특징 ]

1. Rightbox 출력 및 Zoom기능 선택시 원본이미지 가져오기를

게시판 확장변수 설정에서 가져 오던 것을 위젯에서 간단하게 가져오는 방식으로 처리했습니다.

2. 게시판지원 스킨과 이미지및 제목, 내용 직접 작성 스킨 2가지를 지원합니다.

[이미지및 제목, 내용 직접 작성 Direct Skin]

[ 특징 ]

1. 폴딩형태의 아코디언 위젯입니다.

2. 박스에 마우스hover시 이미지가 반듯하게 펼쳐집니다.

3. 제목글과 내용글, 썸네일, 날짜, 글쓴이, More 출력을 선택할 수 있습니다.

4. 다양한 옵션을 선택 할 수 있습니다 - 박스그림자, 썸네일 흑백, 배경색선택 등등

5. 썸네일클릭시 게시판형식, 줌형식, 라이트박스형식 총 3가지 지원

6. 위젯 닫기 지원

7. 페이지 기능 지원(위젯 케시를 0 으로 둬야 작동)

8. 모바일 반응형 지원

[일반 게시판지원 Default Skin]

[Url Skin]

Mh Elegant Accordion 위젯

2019-11-03T20:11:54+09:00

[특징]

1. 책갈피형태의 아코디언 위젯입니다.

2. 책갈피에 마우스hover시 좌,우로 이미지 펼쳐집니다.

3. 제목글과 내용글 출력을 선택할 수 있습니다.

4. 다양한 옵션을 선택 할 수 있습니다 - 박스그림자, 썸네일 흑백, 배경색선택 등등

5. 모바일 반응형 지원합니다.

Mh Hoverbox 위젯

2019-10-06T16:58:47+09:00

게시판 내용중 이미지만 간단히 출력해 주는 위젯입니다.

[특징]

1. 썸네일에 마우스 hover시 원하는 크기로 확대해서 보여 줍니다.

2. 확대 썸네일에 제목 출력 - 배경칼라 / 제목칼라 설정 가능

3. 페이지 기능으로 전체 게시판형태로 출력할 수 있습니다.

p.s MH Hoverbox 위젯 설치시 적용된 Layout의 css파일에 아래 코드가 있으면 max-width:100%;를 제거해야 줌이 적용됩니다.

.content_area img { max-width:100%; height:auto }

Mh Thomsander Layout V1.0

2019-09-12T17:09:28+09:00

[특징]

- 페이지안에서 부메뉴가 Box형식으로 열립니다.

- 배경이미지를 슬라이드로 출력합니다.

- 로그인정보를 가진 아이콘을 우상단에 배치 했습니다.

- 거의 모든 메뉴의 출력을 선택 할 수 있습니다 - 상단메뉴바 / 하단출력 / 배경슬라이드 / 로그인정보 아이콘 등등

- 배경슬라이드 미출력시 바탕색상을 선택 할 수 있습니다.

- Contact Box(위젯출력박스)를 페이지에 지정 할 수 있습니다.

- 레이아웃 특성상 반응형을 지원하지 않습니다. 모바일 페이지를 따로 지정할 수 있습니다.

[설정 방법]

- Box안의 내용은 레이아웃 특성상 레이아웃 설정에서 수정 하실 수 없습니다.

- Box안의 설정은 /layouts/Mh_Thomsander/layout.html를 편집기로 열어서 직접 하셔야 합니다.

- layout.html를 편집기로 열어 보시면 설명글이 적혀 있으므로 따라 하시면 됩니다.

- 세번째 메뉴의 Box안의 이미지들은 Lightbox 형태로 열립니다.

- layout.html 파일안의 기본 설정은 저의 홈피에 맞게끔(위젯. 이미지경로등)꾸며져 있습니다. 자신의 홈피에 맞게끔 재설정 하셔야 합니다.

- 설정이 어려우시면 댓글 남겨 주세요.

Mh Hover Effect Sliding V1.0 위젯

2019-09-02T00:23:33+09:00

Mh Hover Effect 위젯 과 MH 슬라이딩 타일의 슬라이딩 기능을 합쳐서 만들었습니다.

[V1.0 특징]

1. 코드를 정리하였습니다.

2. 대상 분류 srl값(분류)으로도 게시물을 출력합니다.

- https://moonhouse.co.kr/xetip/498956

3. Rightbox 출력 이미지를 확장변수를 이용하여 원본으로도 출력가능

- https://moonhouse.co.kr/xetip/500312

4. 페이지기능을 추가하였습니다.

[특징]

1. Hover Effect 선택 - 15가지

슬라이딩 효과 - 12가지 를 적용할 수 있습니다.

2. 썸네일 클릭시 Lightbox로 출력 선택을 할 수 있습니다.

3. Effect효과와 썸네일의 크기와 여러가지 경우 약간씩의 차이가 날 수 있으므로 스킨설정에서 적절한 옵션을 선택하세요.

4. 모바일 반응형 지원합니다.

Mh Hover Effect 위젯

2019-08-29T22:45:14+09:00

썸네일에 마우스 Hover시 15가지의 다양한 효과를 선택할 수 있습니다.

https://tympanus.net/Development/HoverEffectIdeas

위 사이트에 있는 Hover Effect를 되도록이면 비슷하게 구현했습니다.

[특징]

1. Hover Effect 선택 - 15가지

2. 제목과 내용글 선택 및 크기 색상등을 지정할 수 있습니다.

3. 게시글에 이미지가 없을시 리스트에 출력되지 않습니다.

4. 게시글과 이미지를 램덤으로 가져 올 수 있습니다.

5. 일부 효과에서 이미지 클릭시 Lightbox 형식과 게시글 바로가기 형식으로 선택할 수 있습니다.(Ex: Zoe효과)

Mh 3D Slide 위젯 V1.2 - 2025.01.28

2019-08-27T12:47:11+09:00

지정한 갯수의 이미지가 Cube및 다양한 형태의 효과로 슬라이딩 되는 위젯입니다.

[V1.2 특징]

1. php 8 이상에서 작동됨

2. 썸네일과 제목 테두리 및 그림자

[특징]

1. Slide 효과 선택 - cube, slide, fade, flip, coverflow

2. 게시판 or Url지정 스킨 선택

3. 게시판스킨의 경우 이미지 아래 제목 출력가능

4. 페이지블랫 or 좌우 네비 출력 가능

Mh White Layout V1.1

2019-04-04T13:42:26+09:00

[ V1.1 특징 ]

1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택

- mwea.html 와 mwea.css / tcs.html 와 tcs.css 를 레고 조립하듯이 끼워 맞추면 다른 레이아웃에도 쉽게 적용이 가능합니다.

2. 상단 / 본문의 폭과 이미지박스의 폭을 달리 설정 가능합니다.

[Accordions 이미지박스]

[ V1.0 특징 ]

가장 기본적인 것만 적용한 심플한 흰색 레이아웃입니다.

바탕색은 흰색만 적용하였으며 상단 로그인, 로고, 메뉴 그리고 본문, 하단영역으로 구분되며

상단과 본문의 폭은 조정 가능하며 하단은 전체 폭입니다.

메뉴는 4단까지 가능하며 자체 로그인폼을 지원합니다.

반응형도 심플하게 적용 가능합니다.

Url 링크에 아이콘을 달아주는 urllink_external 애드온

2019-02-23T23:20:16+09:00

게시글보기 링크문구 바로가기 아이콘 출력하기 팁을 애드온으로 만들어 봤습니다.

https://moonhouse.co.kr/xetip/479253 <- 요거

애드온 설정에서 아이콘이 출력될 영역의 ID 나 Class를 지정하시면 그 부분만 아이콘이 출력됩니다.

1. 기본으로는 body 이므로 레이아웃이나 게시글, 페이지글 모든 영역에 적용이 되며

2. 스케치북5 스킨의 게시글의 본문 영역만 설정할려면 .rd_body

본문영역+댓글+확장영역 게시판전체를 설정할려면 .rd

3. 레이아웃의 content부분만 설정할려면 layout.html 파일을 열어서 {$content}부분을 content ID로 감싸주시고

<div id="content">
{$content}
</div>

에드온 설정에서 #content 로 적용하시면 됩니다. 저는 이게 가장 마음에 듭니다.

Accordions Tabs 위젯

2019-02-04T11:33:21+09:00

아코디언처럼 각각의 페이지가 하단으로 펼쳐지는 위젯입니다.

[특징]

1. 지정한 갯수의 게시물이 탭클릭시 상하로 아코디언처럼 펼쳐집니다.

2. 페이지기능을 적용할 수 있습니다 - ajax 기능으로 작동

3. 썸네일, 타이틀, 내용글, 날짜, 작성자등 모든 기능을 제어할 수 있습니다.

4. 8가지의 칼라셋 적용 - 타이틀과 기타부분

5. 갤러리뷰 형식을 3가지중 선택가능 - 게시판형식, Zoom형식, LightBox형식

5. 반응형지원

참고로 페이지기능 활성화시 위젯케시를 주면 페이지기능이 작동하지 않습니다.

- V 1.1 특징

1. 페이지기능 오류 수정

2. 선택 Tab색상 지정 - 블랙, 블루, 오렌지, 골드

Triple Panel 위젯

2019-01-26T18:44:02+09:00

병풍처럼 펼처진 3개의 가로 판넬에 이미지가 슬라이딩 되는 위젯입니다.

[특징]

1. 두개의 스킨 - 게시판의 썸네일을 불러오는 일반적인 위젯과, 이미지의 주소를 가져오는 Url위젯

2. 슬라이드쇼의 선택가능

3. 썸네일 or 이미지의 가로, 세로 크기등 지정

4. 캡션영역의 지정과 높낮이등 지정

5. 반응형지원

Mh LeftMenu 레이아웃 V1.2

2019-01-07T00:35:45+09:00

[특징]

- Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다.

- 최대한으로 코드를 단순하게 하고 이미지를 최소화할려고 노력했습니다.

- 원본 디자인의 화려한 원색 색상을 가져 왔습니다.

- 우측 상단에 슬라이딩기능으로 로그인영역을 배치했습니다.

- 우측 Wing영역을 활용할 수 있게 했습니다.

+ Adsense나 위젯등을 배치하시면 됩니다.

- 자체 로그인 Box를 가지며 SNS로그인도 지원합니다.

- 간단하게나마 반응형을 지원합니다.

+ 풀립형 메뉴

+ 하단 Copyright 영역

Free Website Templates 에서 디자인을 가져 왔습니다.

https://freewebsitetemplates.com/preview/originarchitectswebsitetemplate/index.html

Reveal Hover 위젯

2018-12-16T21:45:04+09:00

위젯 전체글에 썸네일을 출력하기에는 무리가 있고,

보여 주고는 싶을때 해당글에 마우스Hover시 썸네일을 출력해주는 위젯입니다.

[특징]

- 썸네일 출력형식을 11가지의 fx효과중 선택할 수 있습니다.

- 위젯의 넓이를 지정해서 중앙에 위치 시킬 수 있습니다.

- 테두리 및 색상, 작성자, 작성일등 선택 가능

[ https://moonhouse.co.kr/ Wing영역에 설치한 이미지]

[ https://moonhouse.co.kr/wp 에 적용된 이미지 - Hover색상 / 제목에도 fx적용 ]

Lightbox 전용 Hover 위젯

2018-12-10T00:51:21+09:00

위젯에서 썸네일 클릭시 이미지가 화면위에 출력되는 Lightbox기능 전용 Hover 위젯입니다.

[특징]

1. 기본설정으로 두면 250*200의 썸네일이 가로3줄 세로2줄 총 6개의 게시물 이미지가 출력

2. 썸네일에 마우스 Hover시 제목과 내용글이 슬라이딩 되며 출력

3. 썸네일하단에 게시글로 바로가기 버턴 출력

4. 썸네일을 클릭하면 이미지가 화면 중앙부위에 Lightbox로 출력

5. Lightbox 좌,우로 Nav버턴 과 이미지 아래 좌측에 게시글제목과 우측에 X 버턴으로 닫기 적용

6. 썸네일의 갯수와 위젯가로,세로폭 조절을 잘 이용하면 가로열과 세로열을 마음대로 조절 할 수 있습니다.

- 한개의 썸네일만 보이게 하고 라이트박스에 출력은 여러개 할려면 : 위젯가로(250), 세로(200), 이미지수(다수)

- 가로 두줄, 세로 한줄 : 위젯가로(500), 세로(200), 이미지수(다수)

7. 썸네일의 색상형태를 원본과 그레이로 설정 가능

8. 반응형(모바일)기능도 잘 작동합니다.(한개의 썸네일만 출력 / Lightbox 이미지는 지정 수 만큼)

9. 게시글에 이미지파일이 없으면 위젯에 게시글이 출력되지를 않습니다.

p.s MH FullPage 레이아웃을 만들고 나서 페이지에 출력될 마땅한 위젯이 없어서 만듬

MH FullPage 레이아웃 V1.2

2018-12-04T01:39:49+09:00

마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다.

[Tip]

페이지에 Youtube코드 넣는 방법

<iframe width="560" height="315" src="https://www.youtube.com/embed/qiCVPpI9l3M" frameborder="0" allowfullscreen data-autoplay></iframe>

위의 코드를 layout.html의 출력하고 싶은 위치에 넣어 주시면 됩니다.

그 외에 HTML 5 videos를 출력하는 코드

<video loop controls="false" data-autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
 </video>

Audio를 출력하는 코드

<audio controls="" data-autoplay>
  <source src="img/horse.ogg" type="audio/ogg">
  <source src="img/horse.mp3" type="audio/mpeg">
 </audio>

[V1.2 특징]

1. 로고 / 메뉴 / 회원정보 부분을 수정했습니다.

2. 바탕화면 문구들과 Html영역 에니메이션 사용.

3. 반응형 메뉴 따로 분리 - 1차메뉴 링크유무. 2차 메뉴 펼치기/접기 선택, 반응형메뉴의 색상

4. 로그인메뉴 배경색상/이미지 선택, 일반로그인과 SNS 로그인의 분리

5. Section 영역에 타이틀설정 가능

6. 배경슬라이드 8개 까지 추가

[V1.1 특징]

- 원페이지로도 작동

- 상단 메뉴바에 색상 지정가능.(바탕색 투명일때 유용)

- 반응형 메뉴에서 3차메뉴 지원

- 사용자팝업메뉴에 포인트바 표시

- 사용자팝업메뉴에 "레이아웃설정" 타겟이 blank로 출력

라이믹스의 경우 "관리자페이지"에서 "시스템설정 - 고급설정"에서 "모듈 설정 화면"을 "관리자 레이아웃 사용"으로 지정하면 편리함.

p.s XE 사이트(http://www.xpressengine.com/)에는 버전업 파일들 올리지 않을 예정입니다.

파일 올리고 11일만에 게시글이 등록이 되었네요.ㅠㅠ

그리고 "통합 Web Fonts 애드온 V1.5"은 아직도 등록 대기중입니다.

기다리지는 않았지만 그래도 지치내요...

[특징]

- 총 3단계의 상하 페이지로 구성되며, 2단계는 2개의 좌우 슬라이딩 페이지로 구성.(총 4개의 페이지)

- 2-2 페이지에 내용등 작성하지 않으면 출력되지 않음

- 각 페이지의 배경을 이미지와 색상으로 지정 가능.(아래 이미지에 보이는 색상이 기본 색상)

- 첫 페이지의 이미지는 배경 슬라이딩 이미지로도 설정 가능.(총4개의 이미지 지정 가능)

- 각 페이지마다 타이틀, 서브타이틀, content(위젯생성)영역, Html영역의 출력 가능.

- content(위젯생성)영역은 여러 페이지중 한 곳에서만 가능.(출력안함 가능)

- 상단영역과 하단영역의 출력 유무 가능.

- 상단영역에 메뉴버턴과 로고이미지와 검색, 사용자 팝업메뉴(로그인/관리/기타) 출력가능.

- 하단영역에 Copyright와 이메일, 기타문구 출력가능.

- 각 옵션마다 적합한 색상과 크기, 높 낮이 지정 가능.(상하단 바탕색상, 메뉴/버턴/글꼴 색상)

- 반응형(모바일) 지원.

- 일반 메뉴바 와 반응형 메뉴바 구분 지원(1024px 기준)

- Html영역(위젯)에 일반형과 다른 반응형코드 작성 가능.

- 반응형 Menu의 경우 로고문자와 로그인을 지원하며, 2차 메뉴는 드롭메뉴로 작동.

- 페이지내용이 한 화면을 초과할시 스크롤사용 기능 선택 가능.

- 각종 네비 기능 선택 가능.(상하버턴, 좌우버턴, 페이지버턴등)

- 페이지 Loop기능 선택 가능.(1페이지에서 3페이지로, 3페이지에서 1페이지로)

- SocialXE 모듈설치시 SNS로그인 가능.

Tip - 반응형메뉴의 경우 1차메뉴를 클릭시 2차 메뉴 슬라이딩으로 출력되게 수정하는 법(no1s님 요청)

smenu.html를 편집기로 열어서 46~49줄을 아래와 같이 수정하시면 됩니다.

[수정전]

<li loop="$Smart->list=>$key1,$val1" class="active"|cond="$val1['selected']" style="padding-top:10px">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<li class="dropdown" cond="$val1['list']">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">

[수정후]

<li loop="$Smart->list=>$key1,$val1" class="active"|cond="$val1['selected']" style="padding-top:10px">
<li class="dropdown" cond="$val1['list']">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul class="dropdown-menu" role="menu">

소스는 아래 fullPage.js 에서 제공 받아서 XE 에서 작동하게끔 수정 / 변형 했습니다.

https://www.alvarotrigo.com/fullPage/

Lightbox 전용 Slideing 위젯

2018-11-25T15:57:34+09:00

위젯에서 썸네일 클릭시 이미지가 화면위에 출력되는 Lightbox기능 전용 Slideing 위젯입니다.

[특징]

1. 기본설정으로 두면 250*200의 썸네일 한개씩 5개의 게시물 이미지가 슬라이드로 출력

2. 썸네일을 클릭하면 이미지가 화면 중앙부위에 Lightbox로 출력

3. Lightbox 좌,우로 Nav버턴 과 이미지 아래 좌측에 게시글제목과 우측에 X 버턴으로 닫기 적용

4. 설정을 잘 이용하면 여러개의 이미지 출력도 가능하며, 제목글 내용글등도 출력가능합니다.

5. 반응형(모바일)기능도 잘 작동합니다.(한개의 썸네일만 출력 / Lightbox 이미지는 지정 수 만큼)

6. 게시글에 이미지파일이 없으면 위젯에 게시글이 출력되지를 않습니다.

[Lightbox 위젯]

[썸네일 클릭시 출력되는 프레임]

MH Multi V3.3 - 최신글+내용글+댓글+썸네일(링크, 줌, Lightbox)

2018-11-24T23:15:46+09:00

최신버전 바로가기

이전 버전에서 설명을 보고 오시면 편합니다.

[주의사항]

페이지기능을 선택했을시 위젯캐시를 주면 페이지기능이 작동을 하지 않습니다.

[V3.3 특징]

1. 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화

https://moonhouse.co.kr/463054

2. 마우스 Hover시 배경 색상지정 가능

3. Skin별로 겹쳐지는 images와 css, js 통합

4. 썸네일 클릭시 "Lightbox 형식" 추가, 총3가지 선택 가능합니다.(링크, Zoom)

https://moonhouse.co.kr/wp 의 아래 썸네일 클릭시 Lightbox형태로 출력됩니다.

MH StartStopSlider 위젯

2018-11-08T20:12:52+09:00

화면 출력이 슬라이딩형식으로 흘러 갑니다.

[특징]

- 이미지, 제목, 내용, 날짜, 글쓴이 출력 유무 가능합니다.

- 이미지만 출력도 가능합니다.

- 위젯의 크기를 조절 가능합니다.

- 스마트폰에서도 잘 작동합니다.

[옵션 설정으로 다양한 형태 가능]

MH Pointy Slider 레이아웃

2018-10-27T19:11:00+09:00

MH_Pointy-Slider 레이아웃을 공개합니다.

소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니다.

http://www.htmldrive.net/items/show/1810/2016-Awesome-pointy-Slideshow

[특징]

MH_Sliding 레이아웃과 같은 곳에서 배포한 소스라 비슷한 점이 많아서 편했습니다.^.^

- 화면을 2등분해서 왼쪽은 타이틀과 설명 작은이미지 Zoom보기, 오른쪽은 큰 슬라이드 이미지가 출력됩니다.

- 왼쪽 화면의 배경색과 Zoom이미지 지정 가능 합니다.

- 오른화면의 이미지는 따로 선택도 가능하고, 왼쪽화면의 Zoom이미지를 그대로 가져 올 수도 있습니다.

- 오른쪽 화면의 이미지는 원본 / 흑백/ 세피아로 출력 선택 가능합니다.

- 메뉴버턴과 로고이미지와 관리자버턴(로그인/관리/기타)을 출력할 수 있습니다.

- 관리자버턴 아래에 부메뉴 설정도 가능

- Url 바로가기(Direct) 색상 및 문구 지정 가능(웹폰트 에드온 설치하고 "Font Awesome" 과 "Sexy Button" 사용)

- 스마트폰에서는 터치 슬라이드 기능도 작동합니다.

MH PageSwitch 위젯

2018-10-25T23:05:08+09:00

갤러리슬라이드를 다양한 형태로 제공하는 PageSwitch Widget입니다.

[특징]

1. Slide의 형태가 120가지 입니다.

2. 제목, 내용, 날짜, 글쓴이 출력 유무 가능합니다.

3. 스마트폰에서도 잘 작동합니다.

4. 마우스 휠로 이전 다음 작동

슬라이드의 형태가 너무 많아서 설정에는 기본되는 10가지만 넣었습니다.

/widgets/mh_pageswitch/skins/default/list.html 안에 보시면 120가지의 형태가 있습니다.

해당 형태를 적용해 볼려면 list.html파일안에 {$wi->slide_type}부분을 지우고 해당 형태를 대입해 보면 됩니다.

MH_Sliding 레이아웃

2018-10-20T22:46:33+09:00

MH_Sliding 레이아웃을 공개합니다.

소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니다.

http://www.htmldrive.net/items/show/1848/Sliding-preview-images-Panels-Template-with-jQuery

[특징]

- 화면을 4등분해서 각각 메뉴로 작동합니다.

- 각 화면의 배경을 이미지로 지정 가능 합니다. 이미지로 지정하지 않을시 배경색상으로도 지정 가능합니다.

- 각 화면을 클릭시 전체 화면으로 슬라이드되며 배경아래에 설명문을 작성할 수 있습니다.

- 상단 메뉴와 슬라이딩 메뉴를 출력할 수 있습니다.

- 로고이미지와 관리자버턴(로그인/관리/기타)을 출력할 수 있습니다.

- 텍스트영역의 높낮이를 설정할 수 있습니다.

카카오링크 애드온(mh_kakao_link)

2018-10-15T00:03:36+09:00

sejin7940님이 2015년에 만드신 카카오링크/카카오스토리 (sejin7940_kakao link)애드온이

최근에 카카오톡 링크 V2 API 로 업데이트 되면서 아래 문구가 뜨면서 작동이 되지를 않더군요.

" 최신 버전의 카카오톡 링크가 적용되지 않은 앱(또는 서비스)에서 공유하기를 하였습니다.

해당 앱을 업데이트 하거나 최신 버전의 카카오톡 링크를 적용하도록 앱 개발사에 요청해 주세요. "

그래서 필요에 의해서 수정하면서 올려봅니다.

이름을 그대로 사용하기가 그래서 살짝 이름 변경했습니다.

사용법은 sejin7940님의 것을 그대로 가져 왔으며,

카카오링크만 적용 했으며, PC / 스마트폰 모두 작동합니다.

새 애드온에는 불가피하게 카카오사이트에 가입하고 API 키 발급과정이 필요합니다.

1. API 키 발급방법

1) https://developers.kakao.com 에 가입
2) 앱만들기 에서, 앱 이름을 정하신 후 (큰 의미 없습니다)
3) Javascript 키 값을 기억을 해두세요 ( 애드온 설정에 기재하셔야합니다)
4) 좌측 설정->일반 을 누른후, '플랫폼 추가' 버튼을 클릭하고
   웹 클릭 후 , 사이트 도메인 기재하시고 저장

   << 주의 >> 사이트도메인은 www 포함한 도메인, www 뺀 도메인 두가지 다 기재해주세요!

5) 설치된 애드온에서, mh_kakao_link 애드온 설정 누르신 후
javascript key 입력하고, 사이트 이름 입력 (카카오링크 하단에 나타날 이름입니다) 하시면 됩니다.
그 후 해당 애드온을 사용으로 체크하시면 됩니다

"https://developers.kakao.com/docs/js/kakaotalklink#스크랩-템플릿-보내기" 참고로 수정했습니다.

p.s 참고로 문서페이지와 게시판에서만 작동합니다.(위젯페이지에서는 작동 안합니다)

Mh Accordion 위젯

2018-10-01T21:23:09+09:00

사진전용 갤러리 Mh Accordion 위젯입니다.

[특징]

1. 슬라이드 자동, 수동으로 설정 가능

2. 마우스 Hover시 화면 확대

3. 제목, 내용, 날짜, 글쓴이 화면에 출력 유무

4. 이미지 뒤썩기 설정 가능

5. Board Select Skin 은 선택한 게시판의 이미지를 불러옵니다.

6. Url Upload Skin 은 외부의 이미지를 불러옵니다.

이미지들이 Accordion처럼 자동으로 펼쳐집니다.

총 이미지갯수가 가로열 이미지갯수를 넘어서면 세로열로 자동으로 정렬되며 Accordion처럼 펼쳐집니다.

아래의 이미지는 가로5개, 총15개로 설정한 화면입니다.

Mh HTML5Sticky 위젯

2018-09-29T15:13:44+09:00

MH 템플릿으로 만들었던 mh-sticky 템플릿을 위젯으로 만들어 보았습니다.

[특징]

1. 메모장의 크기 조절 가능

2. 메모장 편집창 크기 조절 가능

3. 글꼴 색상 선택

4. 그룹별, 포인트별, 레벨별로 지정하여 출력

5. 케시를 사용하므로 회원별, 브라우즈별로 각각의 메모 페이지가 생성됩니다.

이것을 장점이라고 해야 할지 단점이라고 해야 할지...

[메모장 모습]

[메모 에디터창]

템플릿 컴포넌트 HTML5Sticky MH 템플릿

2018-09-28T22:37:21+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

메모장을 출력해 주는 탬플릿입니다.

케시를 사용하는 프로그램으로 각자의 웹브라우즈에 따라 각자의 메모가 생성됩니다.

그러므로 자기가 만든 메모는 자신만 보입니다.

활용은 사용하시는 분의 몫으로...

템플릿 컴포넌트 Swiper Slide MH 템플릿

2018-08-31T20:24:21+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

서 시

윤동주

하늘을 우러러 한 점 부끄럼 없기를,
잎새에 이는 바람에도 나는 괴로워했다.
별을 사랑하는 마음으로 모든 죽어가는 것들을 사랑해야지,
그리고 나에게 주어진 길을 걸어가야겠다.
오늘도 별이 바람에 스치운다.

님의
침묵

한용운

님은 갔습니다.
아아, 사랑하는 나의 님은 갔습니다.
푸른 산빛을 깨치고 단풍나무 숲을 향하여
난 작은 길을 걸어서 차마 떨치고 갔습니다.
황금의 꽃같이 굳고 빛나던 옛 맹세는
차디찬 티끌이 되어서 한숨의 미풍에 날아갔습니다.
날카로운 첫 키스의 추억은 나의 운명의 지침을 돌려놓고
뒷걸음쳐서 사라졌습니다.
나는 향기로운 님의 말소리에
귀먹고 꽃다운 님의 얼굴에 눈멀었습니다.
사랑도 사람의 일이라 만날 때에 미리 떠날 것을 염려하고
경계하지 아니한 것은 아니지만,
이별은 뜻밖의 일이 되고
놀란 가슴은 새로운 슬픔에 터집니다.
그러나 이별을 쓸데없는 눈물의 원천으로 만들고 마는 것은
스스로 사랑을 깨치는 것인 줄 아는 까닭에
걷잡을 수 없는 슬픔의 힘을 옮겨서
새 희망의 정수박이에 들어부었습니다.
우리는 만날 때에 떠날 것을 염려하는 것과 같이
떠날 때에 다시 만날 것을 믿습니다.
아아, 님은 갔지마는 나는 님을 보내지 아니하였습니다.
제 곡조를 못 이기는 사랑의 노래는 님의 침묵을 휩싸고 돕니다.

진달래꽃

김소월

나 보기가 역겨워
가실 때에는
말없이 고이 보내 드리우리다

영변에 약산
진달래꽃
아름 따다 가실 길에 뿌리우리다

가시는 걸음 걸음
놓인 그 꽃을
사뿐히 즈려 밟고 가시옵서소.

나 보기가 역겨워
가실 때에는
죽어도 아니 눈물 흘리우리다.

템플릿 컴포넌트 PopUp MH 템플릿 - 닫기버턴 추가

2018-08-23T19:35:38+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

PopUp이 게시판 본문에서 작동합니다.

별 쓸모가 있을지 모르겠지만 제작해 봅니다. ^.^,

본문은 PopUp 템플릿과 Zoom기능 템플릿 의 콜라보입니다.

p,s 닫기버턴 추가 했습니다.

템플릿 컴포넌트 Popeye MH 템플릿

2018-08-22T18:00:50+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

용비어천가

Next image Previous image Enlarge Close

불휘 기픈 남간 바라매 아니 뮐쌔
곶 됴코 여름 하나니
새미 기픈 므른 가마래 아니 그츨쌔
내히 이러 바라래 가나니

목판본. 10권 5책. 1445년(세종 27) 4월에 편찬되어 1447년(세종 29) 5월에 간행된, 조선왕조의 창업을 송영(頌詠)한 노래이다. 모두 125장에 달하는 서사시로서, 한글로 엮은 책으로는 한국 최초의 것이다. 왕명에 따라 당시 새로이 제정된 훈민정음을 처음으로 사용하여 정인지(鄭麟趾)·안지(安止)·권제(權踶) 등이 짓고, 성삼문(成三問)·박팽년(朴彭年)·이개(李塏) 등이 주석(註釋)하였으며, 정인지가 서문(序文)을 쓰고 최항(崔恒)이 발문(跋文)을 썼다.

내용은 조선 건국의 유래가 유구함과 조상들의 성덕을 찬송하고, 태조(太祖)의 창업이 천명에 따른 것임을 밝힌 다음 후세의 왕들에게 경계하여 자손의 보수(保守)와 영창(永昌)을 비는 뜻으로 이루어져 있다. 매장(每章) 2행에 매행(每行) 4구로 되어 있으나, 1장이 3구이고 125장이 9구로 된 것만은 예외이다. 3장에서 109장까지는 대개 첫 절에 중국·역대 제왕의 위적(偉蹟)을 칭송하였고, 다음 절에 목조(穆祖)·익조(翼祖)·도조(度祖)·환조(桓祖)·태조(太祖)·태종(太宗) 등 6대 임금의 사적(事蹟)을 읊고 있다. 110장에서 124장까지는 물망장(勿忘章)이라 하여 “닛디 마ㆄ쇼셔”로 끝마친다.

이 《용비어천가》의 형식은 《월인천강지곡(月印千江之曲)》과 함께 쌍벽을 이루는 것으로, 원문 다음에 한역시(漢譯詩)와 언해(諺解)를 달았다. 또 이 노래의 1·2·3·4·125장 등 5장에는 곡을 지어서 《치화평(致和平)》《취풍형(醉豊亨)》《봉래의(鳳來儀)》《여민락(與民樂)》 등의 악보를 만들고 조정의 연례악(宴體樂)으로 사용하였다. 《세종실록(世宗實錄)》 권14 〈악보(樂譜)〉에 한글 가사 전문과 그 악보가 실려 전한다. 이 작품은 전통적인 시의 형식을 무시하고 충분한 표현과 운율을 얻지 못하여 시가(詩歌)로서의 완벽에는 미흡한 점이 없지 않으나, 한글로 기록된 최고(最古)의 문헌으로서 15세기의 언어와 문학 연구에 중요한 사료(史料)가 되고 있다. 뿐만 아니라 주석(註釋) 중의 여진(女眞)·왜(倭) 등에 관한 기록은 역사 연구에도 귀중한 자료를 제공하고 있다.

1612년(광해군 4), 1659년(효종 10), 1765년(영조 41)에 각각 나온 중간본(重刊本)이 있으나, 초간본은 그 전질(全帙)이 전해지지 않는다. 현재의 영인본(影印本)은 광해군 연간의 재간본(再刊本)을 대본으로 하여 1938년 경성제국대학에서 찍어낸 것이며, 1948년에 김성칠(金聖七)이 이를 다시 발췌·영인하였고, 1956년 허웅(許雄)의 주해본 및 1968년 김형규(金亨奎)의 《고가요주해(古歌謠註解)》 등도 있다.

현재 전10권 중 계명대학교 소장본 권8~10의 3권은 보물 제1463-1호로, 서울역사박물관 소장본 권3~4의 2권은 보물 제1463-2호로, 서울대 규장각 한국학연구원 소장본 권1~2권은 보물 제1463-3호로, 고려대 중앙도서관 소장본 권 1~2, 7~8권은 보물 제1463-4호로 지정되어있다. [네이버 지식백과] 용비어천가 [龍飛御天歌] (두산백과)

Next image Previous image Enlarge Close

Popeye템플릿은 문서의 상단 우측에 이미지를 썸네일로 보이게 하고, Enlarge버턴 클릭시 원본 이미지가 출력됩니다.

소스보기에서 아래의 파란색 부분을 첨부이미지 경로로 수정해 주시면 됩니다.

템플릿 컴포넌트 스마트테이블 MH 템플릿

2018-08-20T19:44:59+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

상단 메뉴의 수정은 소스에서 직접하셔야 하며 내용은 본문에서 수정하시면 됩니다.

성명	나이	직업	선호상품	선호색상	전화번호	생일	주소	배송날짜	배송지
홍길동	510	의적	황금	골드	파발마	1595. 08. 08	우산국	2018. 08. 08	대한민국 경상북도 울릉군
임꺽정
성춘향
이몽룡
X-man

[소스보기]

td:nth-of-type(1):before { content: "성명"; }
td:nth-of-type(2):before { content: "나이"; }

이 부분이 작은화면에서 의 상단 메뉴 부분들입니다.

이 부분이 큰화면에서의 상단 메뉴 부분들입니다.

템플릿 컴포넌트 Gallery기능 MH 템플릿

2018-08-17T22:31:40+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

썸네일 이미지에 마우스 Hover시 확대된 이미지가 아래에 출력되는 형태입니다.

Simply beautiful.
Simply beautiful.
Simply beautiful.
Simply beautiful.

<a class="thumbnail" href="#thumb"><img src="/files/attach/images/177/077/451/82ba6e5a989eaa96f0c1332dde217f53.jpg" width="100px" /><span><img src="/files/attach/images/177/077/451/82ba6e5a989eaa96f0c1332dde217f53.jpg" /><br />Simply beautiful.</span></a>

빨간색 부분에 첨부된 이미지 경로 적어주시면 되고,

파란색부분에 제목 적어주시면 됩니다.

템플릿 컴포넌트 Slide기능 MH 템플릿

2018-08-06T21:56:20+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

제목 그대로 이미지 슬라이딩기능을 가진 템플릿입니다.

이미지의 크기는 제 사이트에 맞추어져 있습니다.

가로 690px 세로 430px로 만들어 올리시던지 아님 소스보기에서 크기 수정하시면 됩니다.

이미지 파일추가한 경로로 수정하시면 됩니다.

그리고 width / height 부분 찾아서 수정하시면 되고, 이미지 클릭시 바로가기를 원하시면 <a href="#">부분 수정하시고, 이미지 추가는 위의 코드 추가해서 붙여 주면 됩니다.

MH PopUp 위젯 - mh_appoint_popup V2.0(19.03.24)

2018-07-29T23:08:03+09:00

최신버전 바로가기

MH 트렌스포머 PopUp위젯 V2.0 위젯은 대상 모듈을 지정해서 팝업을 열었다면

mh_appoint_popup 위젯은 대상문서의 번호를 입력하면 팝업으로 출력됩니다.

아무래도 전체 모듈을 지정하는 것 보다 특정 문서를 지정하여 팝업창으로 출력하는 것이 더 유용한 것 같군요.

[특징]

1. MH 트렌스포머 PopUp위젯과 두개의 팝업을 띄울 수 도 있습니다.

최대한 두개의 팝업이 따로 작동 되겠끔 만들었습니다.

2. 팝업창 닫는 기간 날짜를 정 할 수 있습니다.

[V2.0 특징]

1. 자체적으로 다수의 팝업을 띄울 수 있습니다.

[V2.1 특징]

1. 코드정리 및 닫기 날짜 오류 수정

MH Multi V3.2 업그레이드(18.09.20) - 최신글+썸네일+내용글+댓글

2018-07-22T00:07:05+09:00

[V3.3으로 업데이트 되었습니다]

https://moonhouse.co.kr/xemy/337307

V2.1 버전 에서 구현하지 못했던 페이지 기능등을 추가 하여 버전업 합니다.

[V3.2 특징]

1. sketchbook5게시판 웹진형 스킨추가 - MH sketchbook5 스킨

- 모바일에서 제목과 날짜, 글쓴이 정도만 지정하면 멋진 통합게시판위젯이 출력됩니다.(문하우스의 모바일 첫화면)

2. sketchbook5게시판 리스트형 스킨추가 - MH sketchbook5 List스킨

[V3.1 특징]

1. 스마트폰에 적합한 스킨 추가 - MH 스마트 스킨

2. 제목글의 색상을 8가지중 선택 (black, gray, blue, skyblue, green, purple, red, pink)

3. 그 외 소소한 코드정리와 글꼴 크기 정리

[V3.0 특징]

1. 페이지기능을 구현하여 위젯으로도 타임라인게시판 같은 기능을 출력할 수 있습니다.

(@윤삼님이 많은 도움을 주셨습니다)

2. 페이지기능에 ajax기능 추가로 화면 리플레쉬 없이 작동합니다.

(@윤삼님의 멤버 소개 위젯의 코드를 가져 왔습니다)

3. 썸네일영역에 기존의 게시글이동 기능과 이미지확대 기능을 선택할 수 있게 했습니다.

상품소개의 경우 유용하게 사용하실 수 있습니다.

4. 전 버전들과 같이 카멜레온스킨은 박스, 썸네일, mid명, 분류, 확장변수, 제목, 내용, 댓글 기타 모든 항목의 선택이 가능합니다.

5. 페이지기능을 사용하려면 위젯의 케시를 0으로 두어야 정상 작동을 합니다.

[왼쪽 : 스마트스킨] [오른쪽 : 카멜레온스킨]

[스마트폰 화면]

MH 이미지 Hover 위젯의 Skin추가 - Zoom스킨

2018-07-20T00:43:03+09:00

썸네일 마우스 Over시 제목, 내용등 출력 위젯 V2.1

위의 위젯에 skin하나를 추가합니다.

이름하여 Zoom스킨 입니다.

썸네일안에서 마우스를 이동시 확대된 전체 이미지가 이리저리 보입니다.

적용된 링크에 접속해 보시면 확실히 알 수 있을 것입니다.

https://moonhouse.co.kr/special

[기본 상태]

[마우스 오버시]

템플릿 컴포넌트 Zoom기능 MH 템플릿

2018-07-19T00:04:14+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

아래목록에 있는 "MH 템플릿5종"과는 달리 약간의 설명이 필요하여 따로 글을 작성합니다.

- MH-Zoom 템플릿 mh-zoom.zip

상품설명 : 이미지에 마우스를 대면 이미지가 확대되면서 상품의 자세한 부분 까지 확인할수 있습니다.

mh-zoom을 설치해서 게시판에 삽입하면 위와 같이 출력됩니다.

그런 다음 자기가 출력하고자 하는 이미지를 화면에 첨부한후 소스보기를 눌러서 해당 이미지의 소스(아래 빨간색 부분)를 zoom소스에 대입하면 됩니다.

화면에 출력되는 이미지의 크기는 width="250"를 수정하시면 되고 원본이미지의 크기는 넓이 250px보다 큰 이미지라야 확대가 되겠죠.

템플릿 컴포넌트 "MH 템플릿" 5종

2018-07-07T13:40:00+09:00

MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다.

탬플릿 컴포넌트

문하우스에서 만든 템플릿

-포스트잇 mh-postit.zip

공지 사항

오늘의 공지사항 입니다.Read this.

이 사이트는 MoonHouse Click.

포스트잇 가로 크기 수정은 소스에서 width:350px을 수정하시면 됩니다.

MH 트렌스포머 PopUp위젯 V2.0 과 같이 사용하시면 활용도가 높습니다.

- 스마트 테이블 mh-smart-table.zip

요금 안내

평형	입실인원 기준/최대	비수기	준성수기 8/21~9/30	성수기 7/20~8/20
20평 67m²	6인/10인	주중:20만 주말:23만	주중:23만 주말:26만	30만
10평 34m²	2인/4인	주중:7만 주말:9만	주중:9만 주말:14만	16만
12평 40m²	2인/5인	주중:8만 주말:10만	주중:10만 주말:15만	17만
12평 40m²	2인/5인	주중:8만 주말:10만	주중:10만 주말:15만	17만
15평 50m²	2인/6인	주중:10만 주말:12만	주중:12만 주말:16만	18만

- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.

PC와 스마트폰에서 자동으로 변환되는 테이블입니다.

PC 뷰 수정은 에디터에서 해도 되지만 스마트폰 뷰 수정은 소스에서 하셔야 합니다.

- 세도우 메모 mh-sbox.zip

Notice Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.

- 겹메모 mh-sbox1.zip

Notice Box

- 3D 리본 박스 mh-ribbon.zip

3D CSS Ribbon

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!

MH 슬라이딩 타일 V1.2.1

2018-02-22T23:52:04+09:00

예전에 만들었던 MH 슬라이딩 배너 위젯과 썸네일 마우스 Hover시 제목, 내용등 출력 위젯을 혼합해서

MH슬라이딩 타일 위젯을 만들었습니다.

[V1.2 수정 사항]

- 익스플로러에서 마우스오버시 타이틀과 내용글 나타나지 않는 문제점 수정¹⁾

지정한 갯수의 썸네일이 좌로 이동하면서 출력되며 각 썸네일에 마우스 Hover시 제목, 날짜, 글쓴이, 내용들을 나타나게 할 수 있으며, 확장변수를 이용해서 다이렉트Url 설정도 가능합니다.

다이랙트url설정은 해당게시판의 "설정"에서 "사용자 정의" 항목을 추가하면서 "사용자 정의 이름"을 d_url로 생성해 주어야 작동합니다.

다이랙트url 마우스Hover시 아래 출력되는 내용은 말풍선(툴팁) 애드온을 위젯에 적용했습니다.

https://moonhouse.co.kr/special 적용된 링크의 상단에 위치한 위젯입니다.

각주

구글 크롬만 사용해서 몰랐음 ㅠㅠ

문하우스의 라이믹스 업데이트 여정

2018-01-27T16:04:14+09:00

XETOWN을 알고 라이믹스를 알게 되었고

기본 XE보다는 좋아보이고 괜히 최신을 따라해 보고 싶어서

라이믹스를 지원하는 무료 호스팅에도 설치해 보고

컴에도 한동안 설치 하지 않았던 서버 프로그램 까지 설치해서 테스트 해본 결과 자신이 있어서 설치 할려고 보니

응! 우비 웹호스팅이 라이믹스의 PHP버전을 따라 가지 못한다ㅠㅠ

그래서 우비호스팅의 관리자에게 PHP버전 올릴 수 있는지 질문을 남기니, 조만간은 버전업 계획이 없단다.

기간만 얼마 남지 않으면 다른 호스팅으로 옮길려고 하니 거의 1년반 이나 남았다.

일단 정식 문하우스(moonhouse.co.kr)에는 보류하고 다시 이리저리 옮기는 연습을 하고 있는데

어느 날 우비호스팅 공지사항에 PHP업글 내용이 좍~

근데 UP하는 김에 PHP7이상으로 하지 아쉽네요.

지체 없이 신청하고 데이터백업과 DB백업 꼼꼼하게 하고 기다리니 이전 됐다는 답글이 달렸습니다.

이젠 지금껏 연습하면서 제일 좋았던 방법으로 설치를 시작해 봅니다.

XETOWN에 있는 팁 내용대로 덮어 씌우기 하면 저 같은 경우는 백지 화면만 보게 되더군요.

https://xetown.com/rxe_issue/668140

참고로 라이믹스의 전반적인 내용을 담고 있는 내용을 먼저 보시는 것이 좋습니다.

https://github.com/rhymix/rhymix-docs/blob/master/ko/introduction/index.md

참고로 처음에 설치된 호스팅환경에 php모듈의 json모듈과 mcrypt모듈이 빠져 있었습니다.

다시 웹관리자에게 설치 부탁글을 남기니 3일만에 설치 되어다는 메세지가 왔습니다.

[첫번째 방법 설치]

먼저 라이믹스 원본 파일로 깨끗한 라이믹스를 먼저 설치합니다.

이때 기존의 XE의 정보를 잘 간수해 두었다가 그대로 라이믹스의 설치시에 적용합니다.

xe/files/config/db.config.php의 아이디, 비번, DB명, 테이블접두사(prefix) 등

설치 후 첫화면이 나타나면 관리자화면으로 들어 갑니다.(계속 열어 두세요)

그리고 ftp로 접속해서 기존에 백업해 두었던 xe/files안의 파일들중 /config, /cache, /thumbnails 폴더를 제외하고

업로드 해줍니다. 슈퍼캐시모듈을 설치 했다면 /supercache폴더도 제외, 자료가 많으면 시간이 꽤 걸리겠죠.

자료를 올리는 동안 호스팅의 DB(MySQL)에 접속합니다. 보통은 phpMyAdmin으로 들어 가겠죠

라이믹스로 만들어져 있는 테이블접두사(prefix) - 보통 xe_ 겠죠.

모두 선택해서 삭제한 후 백업해 두었던 DB파일 - 보통 sql파일을 import합니다.

xe/files안의 파일들이 전부 업로드 되었으면 기존 XE에서 사용하던

/layouts, /m.layouts, /widgets, /widgetstyles, /modules/board/skins, /modules/board/m.skins

폴더에서 자신이 사용중인 프로그램을 ftp로 업로드 합니다.

업로드가 끝난 후 기존에 열어 두었던 관리자화면에서 리로드(F5)해서 정상적으로 화면이 나오고 홈페이지 첫화면 나오면 일단 성공입니다. 관리자화면에서 "캐시파일 재생성"을 실행합니다.

만약 첫화면 출력에 성공 했다면

/addons, /modules 중 자신이 사용중인 프로그램 업로드 하시면 됩니다.

관리자화면에서 리로드해서 모듈 업데이트 버턴들 눌러주고

마지막으로 각 모듈의 /skin방안에 자신이 다운 받아서 사용중인 프로그램이 있다면 함께 업로드해 주세요.

그럼 일단 라이믹스 업데이트 완성입니다.

이상 까지 해서 성공 하셨다면 운이 Good~~입니다.

장점 :

1.실패할 획률이 기본적인 방법보다 적고, 모듈이나 에드온을 일일이 올리면서 테스트하기 때문에 문제가 있는 프로그램을 알아내기 쉽습니다.

2. XE의 필요 없는 폴더나 파일이 존재하지 않는 깨끗한 라이믹스를 만들 수 있습니다.

단점 : 많은 시간적 노동이 필요합니다,

[두번째 방법 설치 - 제가 설치한 방법]

일단 이 방법으로 설치를 할려면 호스팅에 여유공간이 넉넉해야 합니다.

만약 지금 설치된 호스팅 사용 총용량이 1G면 여유 공간이 1G이상 남아 있어야 됩니다.

그러니까 총 호스팅 용량이 2G이상 이라야 합니다.

그리고 XE가 /xe폴더나 하위폴더에 설치된 경우에 한합니다.

위의 조건을 충족하고 라이믹스를 설치할 모든 조건이 만족되었다면

기존의 XE가 설치된 폴드와 DB는 그대로 두고 /xe폴더가 아닌 임의의 폴더(지금 부터 /rx로)에 라이믹스를 새로 설치합니다. 그냥 편하게 설치하시면 됩니다.

그런데 테이블접두사(prefix) xe_는 필히 다르게 적어 주세요 보통 rx_가 되겠죠. 같으면 설치도 되지 않지만...

설치가 되었다면 첫화면과 관리자화면에 들어갑니다.

ftp로 들어가서 xe/files안의 파일들중 /config, /cache, /thumbnails 폴더를 제외하고 전부를

rx/files 안으로 이동 이나 복사 해줍니다.

위의 방법에 있는 각각의 파일들도 순서에 따라서 이동 이나 복사합니다.

복사하는 중에 /rx/files/config/config.php파일을 에디터기로 열어서

'prefix' => 'rx_', 를

'prefix' => 'xe_', 로 수정

'default' => 'https://moonhouse.co.kr/rx/', 를

'default' => 'https://moonhouse.co.kr/', 로 수정

db.config.php 파일을 열어서

'db_table_prefix' => 'rx_', 를

'db_table_prefix' => 'xe_', 로 수정

총 2군데입니다.

위의 복사가 끝나고 php파일 수정도 끝났다면

/xe폴더의 이름을 임의로 이름으로 변경하고 /rx폴더의 이름을 /xe로 수정하세요.(제일 중요)

그리고 난 후 관리자페이지에서 리로드 후 "모듈업데이트"들 하신 후

위의 첫번째 설치를 따라 하시면 됩니다.

이 방법은 파일과 DB를 따로 업로드 하지 않아도 되어서 시간적으로 단축됩니다.

설치에 성공 하였다면 임의의 폴더를 삭제하고 DB에 접속해서 rx_부분들도 삭제하시면 됩니다.

장점 :

1. 첫번째 설치 장점과 같습니다.

2. 첫번째 설치 방법 보다 시간적으로 단축됩니다.

단점 :

1. 호스팅공간제약이나 /xe에 설치된 홈피 같은 제약이 따릅니다.

2. 기본적인 방법 보다는 시간이 좀 더 걸립니다.

[성공했다고 생각들면 체크해야 할 부분들]

- 에디터인 ckeditor의 글작성과 댓글작성 부분이 정상적으로 출력되는지 체크해 봅니다.

만약 글 작성 부분이 출력되지 않으면 js파일 같은 부분에 문제가 있다고 하는데

저 같은 경우는 브라우즈의 캐시를 지우고 돌아오니 정상적으로 작동이 되더군요.

이 부분 때문에 몇 번 재 설치를 했습니다. 거의 하루 정도~~~

그리고 라이믹스에서는 xpresseditor에디터는 사용할 수 없습니다.

xpresseditor_axupload5처럼 xpresseditor에서 파생된 것들도 마찬가지입니다.

https://github.com/rhymix/rhymix/pull/925

- 일단 로그인 로그아웃이 정상적으로 작동되는지 확인합니다.

저 같은 경우는 모든 이전을 완성하고 완성되었구나 싶어서 사용중이던 모듈이나 에드온 업데이트하고 잠을 청하고 일어나서 보니 관리자아이디던 일반 아이디로던 로그인이 되지를 않더군요.

여기서 몇번 재설치. 고민 하고 검색하는데 하루 종일~~~

마지막으로 진짜 진짜 깨끗하게 설치해서 한 단계씩 진행 할때 마다 로그인 로그아웃 테스트하면서 진행 한 결과~

모듈중 "로그인 기록 모듈"을 설치하니 로그인이 되지를 않더군요. 휴~~~~(xxx 나올번)

https://www.xpressengine.com/index.php?mid=download&package_id=18905882

- 자신이 사용중인 게시판에 내용 영역 출력하지 않고 글 작성 기능을 사용중이라면

https://xetown.com/qna/873356

댓글에 기진곰님의 답글이 있습니다. 안 된답니다.

(Tip으로 우회해서 작동 시키는 방법 - sketchbook5 기준)

- 게시판에 글을 작성했는데 "내용 글은 필수 입니다" 라고 팝업이 뜰때

이 경우는 XE시절에 "이 페이지 나가기" 메세지가 출력되는 경우가 있어서 레이아웃에 jquery를 수정한 경우입니다.

https://moonhouse.co.kr/401623

수정한 부분이 있다면 삭제하시면 됩니다.

이상 험난했던 XE 에서 라이믹스로 갈아타기의 긴 여정을 적어보았습니다.

긴 글 읽어 주신다고 고생하셨습니다.

감사합니다.

p.s 제가 경험하지 못했던 많은 문제들이 더 있을 것이고 해결 방법이 있을 것입니다.

여러분들의 경험담도 댓글로 적어 주시면 서로 돕고 돕는 웹환경이 되지 않을까 합니다.

썸네일 마우스 Over시 제목, 내용등 출력 위젯 V2.2

2017-11-04T11:51:27+09:00

V1.0 에서 스킨과 코드 업데이트를 했습니다.

https://moonhouse.co.kr/402555

[업그레이드 V2.2 내용]

1. 분류값으로 출력 가능 https://moonhouse.co.kr/xetip/498956

2. 전체적인 코드 정리

[업그레이드 V2.1 내용]

1. 말풍선(툴팁)애드온과의 콜라보네이션 추가

2. zoom스킨에도 직접연결 적용가능

[업그레이드 V2.0 내용]

1. 스킨이 2개 추가되어 총3종류의 hover위젯이 되었습니다.

- Slide스킨 : 왼쪽이 마우스hover시 상태, 오른쪽이 평상시 상태입니다.

- Zoom스킨 : 왼쪽이 마우스hover시 썸네일 줌인 상태, 오른쪽이 평상시 상태입니다.

2. 위젯의 정렬이 왼쪽정렬과 가운데 정렬을 선택 할 수 있습니다.

3. 직접연결 선택시 형태를 문구명(직접 작성 가능)과 확장변수명 으로 선택 할 수 있습니다.

MH 위젯스타일 V2.2

2017-11-03T21:41:25+09:00

https://moonhouse.co.kr/397195

예전의 V1.0 에서 문제된 코드 수정과 색상 업데이트를 했습니다.

[V2.2 업데이트 내용]

- 색상지정스타일 선택시 색상 그라데이션 적용 (참조사이트 http://www.cssbuttongenerator.com)

- url지정시 책갈피 클릭가능

- 폰트어썸 웹폰트와 함게 사용

[V2.1 업데이트 내용]

- 책갈피부분 5개 이미지와 색상지정 선택가능

[V2.0 업데이트 내용]

- 위젯부분 정렬 문제 수정

- 색상 총 5개 : black, blue, green, orange, gold

- more부분 슬라이딩 기능

탭 형태 최근 문서 출력 3가지 스킨

2017-10-11T23:36:06+09:00

XE 초기에 나왔던 위젯인 tab_newest_document 입니다.

Zero님이 만드신 기본스킨 "xe_official"만 있었는데

Uyano님이 만드신 "탭 최근글 출력 스킨"과

누가 만든지는 모르겠지만 "탭 형태 최근 이미지 출력" 이렇게 2가지스킨이 추가된 위젯을 올립니다.

XE가 많은 버전업이 되었고 라이믹스도 나왔지만 잘 작동하고 필요한 위젯인 것 같아서 올려봅니다.

참고로 설치시 대상모듈을 꼭 지정해야합니다.

전체를 선택할려고 아무 모듈도 지정하지 않으시면 "대상을 찾을 수 없읍니다."라는 메세지만 출력됩니다.

그리고 지정한 모듈중 새로운 글이나 수정된 글이 있는 모듈이 앞으로 나오는 설정입니다.

사이트선택 전용 레이아웃 V1.1

2017-06-19T23:31:20+09:00

홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다.

[특징]

- 배경이미지 or 색상 적용가능

- 슬라이드 배경이미지 선택가능

- 상단 메뉴바의 선택가능

- 선택사이트 마우스오브시 화려한 이미지출력

- 본문 에니메이션 적용

- 사이트 4개까지 가능

[V 1.1 업데이트 내역]

- "본문 내용영역" "졸졸이 스토커" "SNS로그인" 설정 추가

- 게시판이나 위젯을 출력할때 설정하시면 됩니다.

상단메뉴, 전체배경이미지, 내용영역 바탕 투명(기본), 게시판은 스케치북5 / 웹진형 / 카드스타일 / 링크게시판으로 사용 / 게시판 부분만 출력

https://moonhouse.co.kr/mhlayout

상단메뉴, 회원관리영역, 졸졸이스토커, 배경슬라이드, 내용영역 바탕 White, 게시판은 스케치북5 / 웹진형 / 카드스타일 / 게시판스타일

https://moonhouse.co.kr/xedata

https://moonhouse.co.kr/html

썸네일 마우스 Over시 제목, 내용등 출력 위젯 V1.0

2017-03-29T14:06:05+09:00

지정 게시판출력을 썸네일로 위젯을 출력합니다.

위젯 썸네일에 마우스 오버시 썸네일화면에 mid명, 카테고리, 제목, 날짜, 작성자, 내용들을 출력합니다.

[설정화면]

*가로정렬과 세로중앙정렬을 선택할 수 있습니다.

*확장변수에 url설정시 직접연결아이콘 생성을 선택할 수 있습니다.

MH 트렌스포머 PopUp위젯 V2.0

2017-01-05T20:14:31+09:00

최신버전 바로가기

2010년에 만들었던 팝업위젯을 약간 수정해서 다시 올립니다.

설치방법은 https://moonhouse.co.kr/266107 예전버전을 참고하시면 될 것 같습니다.

이 위젯은 지정한 이미지를 팝업으로 띄우는 방식이 아닙니다.

이 위젯은 지정한 mid, 그러니까 지정한 게시판에 올려져 있는 내용을 팝업으로 띄우는 방식입니다.

예를 들면 먼저 팝업을 올리는 게시판을 새로 하나 만듭니다.(아님 기존의 게시판도 상관 없습니다)

일단 popup이란 이름의 게시판을 만들었다고 하면

게시판에 팝업에 보여줄 이미지나 글, 아님 설문조사, 지도, 동영상 어떤 것이라도 좋으니 글 작성을 합니다.

그 후 트렌스포머팝업위젯을 페이지에 설치시 대상모듈을 popup으로 지정하시면

해당 게시물의 내용이 팝업으로 보이는 방식입니다.

[V 2.0 변경사항]

1. 혼합스킨(mix)을 제외 했습니다 - 사용 용도가 별로 없을 것 같고, 확장변수 설정도 시간이 지나면 까 먹고^.^

2. https://moonhouse.co.kr/400525 Tip을 추가해서 마우스로 이동 가능하게 수정했습니다.

3. 나름 반응형으로 스마트폰에서도 알맞은 크기로 보입니다.

3. 그리고 이곳 저곳 코드정리하고...

배경을 투명으로 하고 png파일을 만들어서 팝업창테두리와 테두리색상을 투명으로 하면 아래 미미지같이 됩니다.

XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄

2016-12-26T19:58:44+09:00

XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전

https://moonhouse.co.kr/399750 1탄을 먼저 보세요.

화면출력이 너무 길어지고 최후버전인 관계로 따로 리스트 작성합니다.

[v6.2 업데이트 내용]

1. 배경이미지 슬라이드 하단에 썸네일기능을 추가 https://moonhouse.co.kr/special

2. 그리고 여기 저기 잡다한 버그들 수정

[v6 업데이트 내용]

1. 메인페이지에도 Wing영역출력 가능 http://moonhouse.co.kr

2. 서브페이지에도 상단 슬라이드출력 가능

3. 본문 가로사이즈 1200px(기본), 980px(구버전) 선택가능

3. Wing영역 2차메뉴 디자인 3가지 선택가능 - Normal, 이미지삽입, 아코디언형태

4. 하단 토글영역과 하단정보영역 위젯상단에 타이틀작성 가능

5. 졸졸이스토커 하단에 라운드메뉴 추가 https://moonhouse.co.kr/gongi

6. 배경이미지 슬라이드 기능 가능 https://moonhouse.co.kr/zbxe

* 특별한 버그가 없으면 더 이상 수정하지 않습니다.

수정버전이지만 시간이 꽤 많이 소요되네요 ^.^

XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 1탄

2016-12-07T21:21:27+09:00

XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 버전

[v5 업데이트 내용]

1. 스마트폰에 적용가능하게 css 수정 했습니다.

- toggle들 히든, 졸졸이스토커 히든, wing영역히든, 하단 메뉴와 위젯 히든 등...

[v4 업데이트 내용]

1. 본문의 가로폭 크기를 지정 할 수 있습니다 - 1200px(기본), 980px(예전형)

2. 'SocialXE 모듈' 설치시 로그인박스에 SNS로그인 기능 추가

3. 개인정보 팝업의 위치를 수정 - 잘 보이게 ^.^!

[v3 업데이트 내용]

1. Font Awesome icon 정상적으로 작동 되게끔 수정 - 이전버전 에서 누락됨

2. 상단 토글영역 추가 - 전체메뉴, Html메뉴

3. Wing영역 위젯, 베너 추가 확장

4. 사이트 개인정보알림 메뉴 추가 - 화면 중앙 팝업으로 출력

[v2 업데이트 내용]

1. Sub형태시 Body 우측에 졸졸이메뉴 추가 - 메뉴, 이미지, html선택가능

2. 사용자정의 단계별로 정리

[특징]

1. 배경색상과 텍스트색상을 변경가능

2. 상단영역 이미지와 사용가능

3. Wing영역과 하단영역에 위젯추가 가능(토글기능 가능)

4. 최하단에 페밀리사이트 추가가능

단순하게 특징을 적었지만 위의 적용만으로도 많은 편집이 가능합니다.

참고로 Demo버전은 삭제 했습니다.

p.s xedition_MH 폴더를 새로 만들어 적용을 하셔도 되고 xedition을 사용중이시라면 _MH를 삭제하고 기본 폴더에 그대로 적용하셔도 됩니다.(쉬운설치를 실행하면 기본으로 돌아갑니다)

레이아웃에 원형메뉴 구현하기

2016-10-28T00:14:40+09:00

위의 이미지에서 보는 것과 같이 마우스클릭시 6개의 원형메뉴가 레이아웃에 나타나게 하는 방법입니다.

적용할 레이아웃을 고릅니다.

1. ../conf/info.xml을 열어서 아래의 메뉴항목을 추가합니다.

<title xml:lang="en">★Total Bottom User</title>

<description xml:lang="ko">하단 원형 메뉴를 출력합니다</description>

<description xml:lang="en">Bottom User</description>

<title xml:lang="en">Not Display</title>

</options>

<title xml:lang="en">Display</title>

</options>

</var>

<title xml:lang="ko"> ┖ 버턴메뉴명</title>

<title xml:lang="en"> ┖ Button Menu</title>

<description xml:lang="ko">버턴메뉴명을 작성하세요.</description>

<description xml:lang="en">Button Menu Name</description>

</var>

<title xml:lang="en"> ┖ Button Color</title>

<description xml:lang="ko">버턴색상을 지정하세요(기본 블랙)</description>

<description xml:lang="en">Button Menu Colore(Basic black(#000000))</description>

</var>

<description xml:lang="ko">1번 메뉴명을 작성하세요.</description>

</var>

</var>

<description xml:lang="ko">2번 메뉴명을 작성하세요.</description>

</var>

</var>

<description xml:lang="ko">3번 메뉴명을 작성하세요.</description>

</var>

</var>

<description xml:lang="ko">4번 메뉴명을 작성하세요.</description>

</var>

</var>

<description xml:lang="ko">5번 메뉴명을 작성하세요.</description>

</var>

</var>

<description xml:lang="ko">6번 메뉴명을 작성하세요.</description>

</var>

</var>

2. ../layout.html에 아래 코드를 적당한 곳에 추가합니다.

<block cond="$layout_info->roundmenu == 'Y'"><include target="roundmenu.html" /></block>

3. roundmenu.html파일을 아래와 같이 만듭니다.

<style>

.menu { width:80px; height: 80px; box-sizing: border-box; font-size:12px; }

.menu-open { display: none; }

.menu-open-button { border:5px double #ffffff; border-radius: 50%; width: 50px; height: 50px; margin-left: 0px; position: absolute; color: #FFFFFF; text-align: center; line-height: 50px; -webkit-transform: ranslate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; }

.menu-open-button { z-index: 12; cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); }

.menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); }

.menu-item { background: #555555; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; position: absolute; color: #FFFFFF; text-align: center; text-decoration:none; margin:3px; z-index: 11;}

.menu-item:hover { background: #EEEEEE; color: #3290B1; }

.menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); }

.menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -74.99997px, 0); transform: translate3d(0.08361px, -74.99997px, 0); }

.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(60.9466px, -32.47586px, 0); transform: translate3d(60.9466px, -32.47586px, 0); }

.menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(60.9466px, 32.47586px, 0); transform: translate3d(60.9466px, 32.47586px, 0); }

.menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 74.99997px, 0); transform: translate3d(0.08361px, 74.99997px, 0); }

.menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-60.86291px, 32.62064px, 0); transform: translate3d(-60.86291px, 32.62064px, 0); }

.menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-60.03006px, -32.33095px, 0); transform: translate3d(-60.03006px, -32.33095px, 0); }

.bluer { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.bluer:hover { color: #669AE1; text-shadow: none; }

.greenr { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.greenr:hover { color: #70CC72; text-shadow: none; }

.redr { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.redr:hover { color: #FE4365; text-shadow: none; }

.purpler { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.purpler:hover { color: #C49CDE; text-shadow: none; }

.oranger { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.oranger:hover { color: #FC913A; text-shadow: none; }

.lightbluer { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }

.lightbluer:hover { color: #62C2E4; text-shadow: none; }

</style>

<block cond="!$layout_info->rm_b_color">{@ $layout_info->rm_b_color = 'black'}</block>

<label class="menu-open-button" for="menu-open" style="background: {$layout_info->rm_b_color};">

<span>{$layout_info->rm_text0}</span>

</label>

<a href="{$layout_info->rm_url1}" class="menu-item bluer">{$layout_info->rm_text1}</a>

<a href="{$layout_info->rm_url2}" class="menu-item greenr">{$layout_info->rm_text2}</a>

<a href="{$layout_info->rm_url3}" class="menu-item redr">{$layout_info->rm_text3}</a>

<a href="{$layout_info->rm_url4}" class="menu-item purpler">{$layout_info->rm_text4}</a>

<a href="{$layout_info->rm_url5}" class="menu-item oranger">{$layout_info->rm_text5}</a>

<a href="{$layout_info->rm_url6}" class="menu-item lightbluer">{$layout_info->rm_text6}</a>

</div>

style="margin:0px 0px 0px 0px;" 이곳에 원형메뉴가 위치할 적당한 수치를 입력하세요.

CSS3로 메뉴에 hover 효과주기 - 회전하며 색상및문구변경

2016-06-11T00:50:31+09:00

[크롬에서는 정상적으로 작동을 하나, 익스플로러에서는 마우스클릭이 어렵습니다]

아래의 메뉴에서 처럼 마우스오버시 회전하며 색상및 문구가 변경되게 하는 Tip을 XE메뉴에 적용하는 방법입니다.

반갑습니다

<style>

.gnb { margin:0px Auto; text-align: center; padding:0 5px; }

.gnb a { padding:0 5px 0 0px; font-weight:bold; font-size:1em; line-height: 25px; text-decoration:none; overflow:hidden; color:white;}

.link-effect-1 a span { position: relative; padding: 0 5px; background:black; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; -moz-transform-origin: 50% 0 50%; -ms-transform-origin: 50% 0 50%; -webkit-transform-origin: 50% 0 50%; transform-origin: 50% 0 50%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}

.link-effect-1 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: gray; content: attr(data-hover); -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -moz-transform-origin: 50% 0 50%; -ms-transform-origin: 50% 0 50%; -webkit-transform-origin: 50% 0 50%; transform-origin: 50% 0 50%;}

.link-effect-1 a:hover span, .link-effect-1 a:focus span { -moz-transform: rotateX(90deg) translateY(-22px); -ms-transform: rotateX(90deg) translateY(-22px); -webkit-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px);}

.link-effect-1 a:hover span::before, .link-effect-1 a:focus span::before { background:white; color:black;}

</style>

{@ $menu_1st = $val }

<a href="{$val['href']}"onclick="window.open(this.href);return false;">| <span data-hover="{$val['text']}">{$val['text']}</span></a>

</span>

</div>

오렌지색 부분이 바탕색상 및 글꼴색상 변경하는 부분입니다.

파란색부분을 수정하면 가로,세로 배열을 바꿀 수 있습니다. span 대신에 div 하면 세로 정렬됩니다.

MH 위젯스타일 V1.0

2016-06-08T01:05:49+09:00

https://moonhouse.co.kr/296781

예전에 급하게 만들었던 위의 "MH 위젯스타일"을 약간 수정했습니다.

전 버전은 이미지가 고정되어 있었으나 이번 버전은 타이틀 글수에 따라서 이미지가 자동으로 조정됩니다.

윈도우창기능 팝업위젯 - MH_Windows_Popup V 1.2

2016-05-09T23:32:20+09:00

[스케치북게시판 사용시 주의사항]

- 윈도우창기능 팝업위젯을 스케치북게시판 사용중인 사이트에 적용하면

댓글 등록시 "내용값을 입력하세요" 라는 문제점이 발견되었습니다.

- 위젯을 수정해 볼려고 했으나 잘 안되고 스케치북 코드를 살펴봐도 잘 모르겠네요.ㅠㅠ

- 그래서 편법이지만 스케치북 게시판의 설정을 변경하는 방법으로 우회합니다.

이 방법이 마음에 들지 않으시면 이 팝업위젯은 스케치북 게시판에는 사용을 하지 말아 주세요.

그리고 되도록이면 게시판에는 사용을 자제하시고 위젯페이지에서 위젯설치로 사용을 권합니다.

-설정변경 방법

1. 해당게시판의 스케치북 "스킨관리"에서 "글쓰기 및 댓글쓰기 설정" - "댓글 에디터 설정"과 "에디터 선택버턴 표시"를

아래 이미지와 같이 설정하시면 됩니다. "Textarea(기본)"으로 선택하면 문제를 일으킵니다. "에디터"로 선택하면 문제가 없이 댓글 등록이 됩니다.

2. 댓글 에디터의 잡다한 html이나 기타 옵션이 보기 싫으시면 해당 게시판의 설정 - 추가설정 - 위지윅에디터에서 댓글 에디터스킨의 Html편집권한이나 기타 권한을 선택하지 않으면 됩니다. 이런것도 싫으시면 아래 이미지에서 보이는 형관색의 에디터스킨을 받아서 설치하시고 선택하시면 됩니다.

textarea.zip

xpresseditor_slim_mh.zip

[ V 1.2 업그레이드 내역 - 2016년 5월 13일 ]

- "PostIt출력"추가해서 총4개의 스킨으로 업그레이드

- 이미지폴더와 js폴더를 하나로 통합해서 소스 간략화

[ V 1.1 업그레이드 내역 - 2016년 5월 12일 ]

"게시판 리스트출력" "Html_Text직접입력" 두개의 스킨 추가해서 총3개의 스킨으로 업그레이드

[ V 1.0 - 2016년 5월 9일 ]

윈도우창과 같이 화면이동, 최소화, 최대화, 닫기, 스크롤, 창크기 마우스로 조절 그리고 "24시간 닫기" 기능까지 갖춘 팝업위젯입니다.

팝업창의 기본 위치, 크기 조절, 팝업창출력유무, 그룹별 출력유무도 설정에서 가능합니다.

팝업창안의 내용은 게시판의 내용을 그대로 가져옵니다.

특정 게시판을 하나 만들어서 팝업전용으로 하셔도 되고 기존 게시판을 지정하셔도 됩니다.

팝업창의 버턴 아이콘들은 Font Awesome Icons 와 이미지 두가지 사용이 가능합니다.

https://moonhouse.co.kr/395931 - Web Fonts 애드온 1.1

p.s 레이아웃에 기능을 넣을려고 하니 "24시간 닫기"가 제대로 작동을 하지 않아서 위젯으로 만들었습니다.

레이아웃에 팝업창 띄우기

2016-05-02T00:30:30+09:00

XE 레이아웃에 Windows창 같이 움직이고 작아지고 커지고 화면조절 되는 팝업창 설치하는 방법입니다.

먼저 팝업창을 설치할 레이아웃의 layout.html안에 메인화면부분에 아래의 코드를 삽입합니다.

1. PopUp창 출력설정

<block cond="!$layout_info->popup == ''"><include target="popup.html" /></block>

2. popup.html 내용

</div>

<div class="window_handle_center"><span class="window_title">{$layout_info->popup_title}</span></div>

</div>

</div>

</div>

<span cond="$layout_info->popup_text">{$layout_info->popup_text}</span>

<span cond="$layout_info->popup_image"><a href="{$layout_info->popup_image_url}" target="_{$layout_info->popup_image_target}"><img src="{$layout_info->popup_image}" width="350" /></a></span>

</div>

</div>

</div>

</div>

<block cond="!$layout_info->popup_width">{@ $layout_info->popup_width = '400'}</block>

<block cond="!$layout_info->popup_height">{@ $layout_info->popup_height = '400'}</block>

<block cond="!$layout_info->popup_posx">{@ $layout_info->popup_posx = '300'}</block>

<block cond="!$layout_info->popup_posy">{@ $layout_info->popup_posy = '150'}</block>

var mywindow;

var anotherwindow;

window.onload=function() {

mywindow=new Window(

{

"name":"TestWindow",

"z_index":1000,

"min_height":10,

"action":"debug",

"id":"window_A",

"scrollbars":1,

"is_minimized":0,

"stayontop":0,

"min_width":10,

"height":{$layout_info->popup_height},

"posx":{$layout_info->popup_posx},

"posy":{$layout_info->popup_posy},

"width":{$layout_info->popup_width}});

</script>

빨간색부분이 팝업창안의 내용이 들어가는 부분입니다.

지우시고 일반 내용을 넣어셔도 됩니다.

3. windows.css 내용

.window_dragger a { text-decoration:none; font-weight:bold; font-size:10px; }

.window_dragger { cursor:move; z-index:1; width:100%; height:36px; position:absolute; top:0px; left:0px; }

.window_resize_handle { position:absolute; cursor:se-resize; width:20px; height:16px; font-size:10px; z-index:1; } .window_container { padding:0px; position:absolute; }

.window_fader { border:0px; width:100%; }

.window_topslice { position:relative; border:0px; width:100%; height:36px; }

.window_middleslice { width:100%; position:relative; }

.window_bottomslice { position:absolute; height:16px; border:0px; width:100%; }

.window_handle_left { font-size:3px; position: absolute; left:0px; top:0px; width:15px; height:36px; background:url(./images/window_0.gif); }

.window_title { line-height:30px; font-size:14px; font-weight:bold; font-family:sans-serif; overflow:hidden; } .window_handle_center { font-size:3px; background:url(./images/window_1.gif); background-repeat:repeat-x; top:0px; height:36px; border:0px; margin-left: 15px; margin-right:74px; text-align:center; }

.window_handle_right { background:url(./images/window_2.gif); font-size:3px; position: absolute; right:0px; top:0px; width:74px; height:36px; border:0px; }

.window_border_left { background:url(./images/window_3.gif); background-repeat:repeat-y; position: absolute; left:0px; width:15px; border:0px; }

.window_content { text-align:left; /*overflow:auto;*/ position:relative; background:#D7D0BE; font-family:sans-serif; font-size:14px; border:0px; margin-left: 15px; margin-right:16px; padding:0px; }

.window_border_right { background:url(./images/window_4.gif); background-repeat:repeat-y; position: absolute; right:0px; top:0px; width:16px; border:0px; }

.window_bottom_left { font-size:3px; position: absolute; left:0px; bottom:0px; width:15px; height:16px; background:url(./images/window_5.gif); border:0px; }

.window_bottom_center { font-size:3px; background:url(./images/window_6.gif); background-repeat:repeat-x; margin-bottom:0px; height:16px; border:0px; margin-left: 15px; margin-right:16px; }

.window_bottom_right { background:url(./images/window_7.gif);font-size:3px; position: absolute; right:0px; bottom:0px; width:16px; height:16px; border:0px; }

.window_button_holder { position:absolute; right:19px; text-align:right; width:60px; padding-top:8px; font-size:6px }

4. js 파일들과 이미지들은 압축파일안에 모두 들어 있습니다.

5. 레이아웃설정은 info.xml 안에 추가해 주세요.

<group>

<title xml:lang="en">PopUp Info</title>

<title xml:lang="ko">PopUp 출력</title>

<title xml:lang="en">PopUp User</title>

<description xml:lang="en">PopUp User</description>

</options>

</options>

</var>

<title xml:lang="ko"> ┖ PopUp창 제목</title>

<title xml:lang="en"> ┖ PopUp Title</title>

<description xml:lang="ko">PopUp창의 제목</description>

<description xml:lang="en">PopUp Title</description>

</var>

<title xml:lang="ko"> ┖ PopUp내용</title>

<title xml:lang="en"> ┖ PopUp Text</title>

<description xml:lang="ko">PopUp안에 들어갈 내용을 등록합니다.(Html사용 가능)</description>

<description xml:lang="en">PopUp Text(Html use)</description>

</var>

<title xml:lang="ko"> ┖ PopUp내용 이미지</title>

<description xml:lang="ko">PopUp창 내용안에 들어갈 이미지를 등록</description>

</var>

<title xml:lang="ko"> ┖ PopUp 이미지 링크</title>

<title xml:lang="en"> ┖ PopUp Image Url</title>

<description xml:lang="ko">PopUp 이미지 클릭시 이동할 링크 URL을 입력해 주세요.</description>

<description xml:lang="en">PopUp Image Url</description>

</var>

<title xml:lang="ko"> ┖ PopUp 이미지 Target</title>

<title xml:lang="en"> ┖ PopUp Image Target</title>

<description xml:lang="ko">PopUp 이미지 클릭시 창의 선택</description>

<description xml:lang="en">PopUp Image Target</description>

<title xml:lang="en">New Window</title>

</options>

<title xml:lang="en">Current Window</title>

</options>

</var>

<title xml:lang="ko"> ┖ PopUp창 가로넓이</title>

<title xml:lang="en"> ┖ PopUp Width</title>

<description xml:lang="ko">PopUp창의 넓이(기본 400)</description>

<description xml:lang="en">PopUp Width</description>

</var>

<title xml:lang="ko"> ┖ PopUp창 세로높이</title>

<title xml:lang="en"> ┖ PopUp Height</title>

<description xml:lang="ko">PopUp창의 높이(기본 400)</description>

<description xml:lang="en">PopUp Height</description>

</var>

<title xml:lang="ko"> ┖ PopUp창 가로위치</title>

<title xml:lang="en"> ┖ PopUp X</title>

<description xml:lang="ko">PopUp창의 가로위치(기본 300)</description>

<description xml:lang="en">PopUp X</description>

</var>

<title xml:lang="ko"> ┖ PopUp창 세로위치</title>

<title xml:lang="en"> ┖ PopUp Y</title>

<description xml:lang="ko">PopUp창의 세로위치(기본 150)</description>

<description xml:lang="en">PopUp Y</description>

</var>

</group>

p.s 내가 할 수 있는 모든 방법을 동원해도 "24시간 동안 닫기"는 성공하지를 못하였네요ㅠㅠ

마우스오버시 우측으로 펼쳐지는 내용 및 메뉴

2016-04-26T19:37:53+09:00

마우스오브시 상단의 이미지와 같이 로그인메뉴가 나오고 알림글이 우측으로 펼처져 출력되게 하는 방법입니다.

아이디어에 따라서 다양한 출력이 가능하겠죠.

* 먼저 css파일에 추가할 코드

/* Accordion Toggle */

.ubt { text-align:left; list-style: none; padding:5px; margin:0 Auto; }

.ubt { zoom: 1; }

.ubt:before,

.ubt:after { content: ''; display: table; }

.ubt:after { clear: both; }

.ubt a { text-decoration:none; }

.ubt li { position: relative; float: left; margin: 0; }

.ubt li:active { margin-top: 1px; margin-bottom: 7px; }

.ubt li:after { content: ''; z-index: 2; position: absolute; top: 10px; right: -2px; width: 5px; height: 6px; opacity: .95; background: #eb6b22; border-radius: 3px 0 0 3px; -webkit-box-shadow: inset 1px 0 #99400e; box-shadow: inset 1px 0 #99400e; }

.ubt span { position: absolute; top: 1px; left: 100%; z-index: 2; overflow: hidden; max-width: 0; height: 24px; line-height: 21px; padding: 0 0 0 2px; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); background: #eb6b22; border: 1px solid; border-color: #d15813 #c85412 #bf5011; border-radius: 0 2px 2px 0; opacity: .95; background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14); background-image: -moz-linear-gradient(top, #ed7b39, #df5e14); background-image: -o-linear-gradient(top, #ed7b39, #df5e14); background-image: linear-gradient(to bottom, #ed7b39, #df5e14); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; -webkit-transition-property: padding, max-width; -moz-transition-property: padding, max-width; -o-transition-property: padding, max-width; transition-property: padding, max-width; }

.ubt p, s, .ubt span { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.ubt p, s { height: 26px; line-height: 23px; padding: 0 9px 0 8px; font-size: 12px; color: #555; text-decoration: none; text-shadow: 0 1px white; background: #fafafa; border-width: 1px 0 1px 1px; border-style: solid; border-color: #dadada #d2d2d2 #c5c5c5; border-radius: 3px 0 0 3px; background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05); }

.ubt p:hover span { padding: 0 7px 0 6px; max-width: 1000px; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); }

.ubt s:hover span { padding: 0 7px 0 6px; max-width: 1000px; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); }

.greena li:after { background: #65bb34; -webkit-box-shadow: inset 1px 0 #3a6b1e; box-shadow: inset 1px 0 #3a6b1e; }

.greena span { background: #65bb34; border-color: #549b2b #4f9329 #4b8b27; background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e); background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e); background-image: -o-linear-gradient(top, #71ca3f, #5aa72e); background-image: linear-gradient(to bottom, #71ca3f, #5aa72e); }

.bluea li:after { background: #56a3d5; -webkit-box-shadow: inset 1px 0 #276f9e; box-shadow: inset 1px 0 #276f9e; }

.bluea span { background: #56a3d5; border-color: #3591cd #318cc7 #2f86be; background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0); background-image: -moz-linear-gradient(top, #6aaeda, #4298d0); background-image: -o-linear-gradient(top, #6aaeda, #4298d0); background-image: linear-gradient(to bottom, #6aaeda, #4298d0); }

1. 로그인메뉴 추가방법

<style>

.ubt s:hover span { width: 230px; }

</style>

<div cond="$layout_info->b_menu_Login == 'Y'" class="ubt">

<li><s>LogIn <i class="fa fa-sign-in" aria-hidden="true" style="color:#ff6600;"></i><span>

<a href="{getUrl('act','dispMemberLogout')}" style="color:{$layout_info->bt_text_color};">Logout |</a>

<a href="{geturl('act','dispMemberInfo')}" style="color:{$layout_info->bt_text_color};">MyInfo |</a>

<a href="{getUrl('act','dispMemberLoginForm')}" style="color:{$layout_info->bt_text_color};">Login |</a>

<a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}" style="color:{$layout_info->bt_text_color};">Join |</a>

<a href="{getUrl('act','dispLayoutAdminEdit','layout_srl',$layout_info->layout_srl)}" style="color:{$layout_info->bt_text_color};">Edit |</a>

<a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}" style="color:{$layout_info->bt_text_color};">Modify |</a>

<a href="{getUrl('','module','admin')}" " onclick="window.open(this.href); return false;" style="color:{$layout_info->bt_text_color};">Admin |</a>

<a href="javascript:bookmarksite('{$layout_info->fa}', '{$layout_info->index_url}')" style="color:{$layout_info->bt_text_color};">Bookmark |</a>

</span></s></li>

</div>

2. 알림내용 추가방법

<style>

.ubt p:hover span { width:{$layout_info->bodyWrap_width-80}px; }

</style>

<ul cond="$layout_info->b_text_toggle == '' && $layout_info->b_text1" class="ubt greena" style="width:{$layout_info->bodyWrap_width}px;">

<li><p>Notice <i class="fa fa-bullhorn" aria-hidden="true" style="color:green"></i><span>{$layout_info->b_text1}</span></p></li>

</ul>

<ul cond="$layout_info->b_text_toggle == '' && $layout_info->b_text2" class="ubt bluea" style="width:{$layout_info->bodyWrap_width}px;">

<li><p>Notice <i class="fa fa-bullhorn" aria-hidden="true" style="color:blue"></i><span>{$layout_info->b_text2}</span></p></li>

</ul>

레이아웃설정 코드는 알아서 주셔야 합니다. {$layout_info->b_text1}

[중요]

1. 상단의 이미지와 같이 2개 이상의 버턴을 출력할려면 .ubt s, .ubt p와 같이

s 와 p 같은 분류자로 나누어 주어야 가로 넓이를 다르게 줄 수 있습니다.

2. 색상출력

class="ubt" - 오렌지색상

class="ubt greena" - 그린색상

class="ubt bluea" - 블루색상

Wing영역 아코디언메뉴 생성하는 방법

2016-04-26T01:48:28+09:00

레이아웃의 본문 좌,우측 Wing영역에 이미지파일 하나도 사용하지 않고 스타일리시하게

3차 Menu부터 아코디언처럼 펼쳐지는 메뉴설정 방법입니다.

1. 메뉴를 추가할 레이아웃의 layout.html안에 Wing영역의 메뉴부분에 아래의 코드를 추가합니다.

제가 사용중인 파일도 올립니다. wingmenu.html-x

올리고 보니 .html 확장자 뒤에 무조건 -x가 붙네요. 참고하세요.

<style>

.wmtop a { color:#ffffff; }

.wmtop a:hover { color:#ff6600; }

.wmsub a { color:#ffffff; }

.wmsub a:hover { color:#ff6600; }

</style>

<nav>

<ul>

{@ $menu_1st = $val }

<li class="wmtop"class="on"><a href="{$val['href']}" onclick="window.open(this.href);return false;" >{$val['link']}</a><span></span>

</li>

{@ $menu_1st = $val }

{@ $menu_2nd = $val }

<li class="wmsub"class="active"><a href="{$val['href']}" onclick="window.open(this.href);return false;"> {$val['link']}</a>

<ul>

{@ $menu_3th = $v }

<liclass="on"><a href="{$v['href']}" onclick="window.open(this.href);return false;">{$v['link']}</a></li>

{@ $menu_4th = $v4 }

<liclass="on"><a href="{$v4['href']}" onclick="window.open(this.href);return false;">{$v4['link']}</a></li>

</ul>

</li>

</ul>

</nav>

2. style.css 다운받은 css파일안의 코드를 해당 레이아웃css파일안에 추가합니다.

3. 색상변경

* 메뉴글 색상

<style>

.wmtop a { color:#ffffff; }

.wmtop a:hover { color:#ff6600; }

.wmsub a { color:#ffffff; }

.wmsub a:hover { color:#ff6600; }

</style>

* 메뉴바탕 색상 - css안에

- 전체메뉴배경 색상

nav ul li {

background: -webkit-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, #4B4E58 0%,#3F424A 100%); /* W3C */

box-shadow: rgba(255,255,255,0.1) 1px 1px 0 inset;

border-bottom: #292b30 1px solid;

}

- 3차 아코디언배경 색상

.wmsub ul li:hover { background: -webkit-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C */ box-shadow:#5173d5 1px 1px 0 inset; }

진한 부분들을 적절히 수정하면 됩니다.

rgba값들도 같이 수정을 해 주시면 좋습니다.

제가 귀찮아서~~~^.^

메뉴 클릭시 화면 중앙에 팝업으로 띄우기

2016-04-21T04:05:15+09:00

위의 이미지와 같이 해당 메뉴를 클릭시 화면 중앙에 팝업으로 띄우는 소스입니다.

"개인정보취급방침" 같은 메뉴를 띄울때 사용하면 좋겠죠...

1. privacy라는 임의의 페이지mid를 생성해서 문구를 작성합니다.

아래의 소스를 해당 레이아웃의 적당한 곳에 배치를 합니다.

<a href = "javascript:void(0)" onclick = "document.getElementById('light_01').style.display='block';document.getElementById('fade').style.display='block'" style="color:black">개인정보취급방침 l</a>

</div>

2. css파일에 아래의 소스를 붙여 넣습니다.

/* Privacy */

.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 1500px; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }

.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 510px; padding: 0 16px 16px 16px; border: 16px solid orange; background-color: #ffffff; z-index:1002; overflow: auto; style="margin-top:30px;"}

.white_content a { position: absolute; top: 2%; right: 5%; color:orange }

여러개의 메뉴가 존재한다면 light_01 이 부분을 메뉴별로 다르게 주면 됩니다.

물론 mid와 메뉴명도 달리 주어야 겠죠.

그리고 x표시는 fortawesome웹폰트를 적용했습니다. 그냥 Close라는 문구로 바꾸셔도 됩니다.

게시판형식도 가능합니다. 대문페이지 하단에 "가입인사" 메뉴를 눌러보세요.

댓글 유도글 남기기

2016-04-18T00:48:09+09:00

위의 이미지와 같이 댓글을 유도하는 문구를 각 게시판별로 남기는 방법입니다.

게시판모듈에서 수정할 스킨을 선택해서 (sketchbook5을 예로 듭니다)

1. skin.xml를 열어서 적당한 곳에 추가

<title xml:lang="en">Comment Induce Mid</title>

<description xml:lang="ko">댓글 유도 문구표시할 mid명</description>

<description xml:lang="en">Comment Induce Mid</description>

</var>

<title xml:lang="en">Comment Induce Text</title>

<description xml:lang="ko">댓글 유도 문구를 작성하세요.</description>

<description xml:lang="en">Comment Induce Text</description>

</var>

2. _read.html를 열어서

<include cond="$oDocument->allowComment() && !$mi->cmt_wrt_position" target="_comment_write.html" />

상단에 아래 소스 추가

<block cond="$mid==$mi->comment_induce_mid">

<ul style="margin-bottom:10px;"><i class="fa fa-quote-left" aria-hidden="true"></i> 댓글이 하나도 없네요ㅠㅠ <i class="fa fa-quote-right" aria-hidden="true"></i></ul>

<ul><i class="fa fa-quote-left" aria-hidden="true"></i> {$mi->comment_induce_text} <i class="fa fa-quote-right" aria-hidden="true"></i></ul>

</div>

</block>

지정한 mid게시판에서 댓글이 한개도 없어면 "댓글이 하나도 없네요ㅠㅠ"문구가 나오고,

작성자가 적은 문구가 아래 나타납니다.

3. board.css를 열어서 추가

.cmtInduce { background-color:#555555; font-size:1.0em; color:#ffffff; padding:10px; -webkit-border-radius:10px;-moz-border-radius:10px; border-radius:10px; margin-bottom:10px; }