PointData Of MoonHouse

Mh Multi Sale Version ver. 1.1

경고!!! 다운 받지 마세요. Mh_Multi Sale 위젯은 유료판매 제품입니다. Point만 날라갑니다. Shoping Demo Manual Q&A Mh_Multi Widget 특징 It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form. 1. Mh_multi Widget 에 총 5가지 Skin이 포함되어 있으며 Skin 마다 각각 고유의 형테로 구성 • 완벽히 위젯별로 작동합니다. - 동일 Skin 으로 한페이지에 다수의 위젯을 생성할시 위젯설정에 "위젯 NO"를 다르게 적용 2. 거의 완벽한 반응형(모바일형)으로 츨력이 가...

More →

Mh Multi Sale Version...

Mh Justice Sale Version ver. 1.0

경고!!! 다운 받지 마세요. Mh_Justice 레이아웃은 유료판매 제품입니다. Point만 날라갑니다. Shoping Demo Manual Q&A Mh_justice Layout 특징 Mh Justice Layout is a free one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 작동되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section에서 에니메이션이 출력 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 다양한 자체 프로그램을 내장 • 아코디언 메뉴 • 아이폰배경 로그인 팝업 • 배경 슬라...

More →

Mh Justice Sale Versi...

Mh Slide Pro ver. 1.0

- 특징 1. Slide Pro 슬라이드 추가 를 위젯으로 만들었습니다. 2. Auto Slide를 지원합니다. 3. 슬라이드 아래에 타이틀 / 썸네일 / 네비를 지원합니다. 4. 배경이미지와 각 Box별 색상을 지정할 수 있습니다. 5. Box안의 타이틀 / 내용 / 썸네일의 각종 옵션을 지정 가능합니다.

More →

Mh Slide Pro ver. 1.0

Slide Pro 슬라이드 추가 ver. sp

이 프로그램은 개별적으로는 작동을 하지 않습니다. 자기가 원하는 레이아웃에 수정을 통하여 적용하는 방식입니다. [ Slide pro(SP)를 본인이 원하는 레이아웃(LY)에 적용하는 방법 ] 1. SlidePro.zip 압축파일을 풀면 아래와 같은 구성으로 이루어져 있습니다. 2. 파일들을 해당 레이아웃에 올려주세요. 3. 레이아웃의 "layout.html "파일을 편집기로 불러옵니다. - 본문 상단에 SP를 위치시키고 싶다면 {$content} 부분을 찾아서 바로 위에 아래의 코드를 추가합니다.(위치시키는 곳은 본인의 의지입니다.) <div style="margin:0 auto">...

More →

Slide Pro 슬라이드 추...

Mh Tilted Content ver. 1.0

- 특징 1. 슬라이드 Box형 위젯 2. Box내의 썸네일이 에니메이션 효과로 움직입니다. 3. 대상분류 srl값으로도 게시글 출력 4. 각 Box 바탕색상을 다르게 출력 가능

More →

Mh Tilted Content ver...

Mh White Pro ver. 1.0

- Pro 특징 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 mwea.css / tcs.html 와 tcs.css 를 레고 조립하듯이 끼워 맞추면 다른 레이아웃에도 쉽게 적용이 가능합니다. 2. 상단 / 본문의 폭과 이미지박스의 폭을 달리 설정 가능합니다. [Accordions 이미지박스] [TiltedContent 이미지박스] 이전버전 은 로그인 회원은 다운가능합니다.

More →

Mh White Pro ver. 1.0

Mh Folding Pro ver. 1.0

- Pro 특징 1. Rightbox 출력 및 Zoom기능 선택시 원본이미지 가져오기를 게시판 확장변수 설정에서 가져 오던 것을 위젯에서 간단하게 가져오는 방식으로 처리했습니다. 2. 게시판지원 스킨과 이미지및 제목, 내용 직접 작성 스킨 2가지를 지원합니다. [이미지및 제목, 내용 직접 작성 Direct Skin] 이전버전 은 로그인 회원은 다운가능합니다

More →

Mh Folding Pro ver. 1.0

문하우스 게시판 스킨 Pro ver. 1.0

문하우스 게시판 스킨은 폰트어썸 기능이 빠져 있습니다. Web Fonts Addon 을 설치해서 폰트어썸과 Sexy Button을 활성화 시켜야 아이콘들이 정상적으로 출력됩니다. - V1.0 특징 SketchBook5 게시판스킨이 기능과 디자인면으로 너무 뛰어나서, 문하우스 게시판 스킨을 별로 사용하지를 않아서 별로 손 보지를 않았지만, 리스트 아래 댓글 기능은 아직 다른 게시판스킨에서는 구현되지가 않는 것 같아서 필요 없는 기능 지우고 코드 약간 정리해서 올립니다. 1. 게시판형식을 리스트로 선택 했을시 제목글 아래 댓글의 출력을 선택할 수 있...

More →

문하우스 게시판 스킨 ...

Mh Brickfolio ver. 1.1

- V1.1 특징 1. 제목에 마우스 Hover시 썸네일 출력을 선택 - 페이지 AJAX기능 사용시 2페이지 부터 정상 작동하지 않습니다 https://moonhouse.co.kr/xetip/508348 2. Rightbox 출력 및 Zoom기능 선택시 원본이미지 가져오기를 게시판 확장변수 설정에서 가져 오던 것을 위젯에서 간단하게 가져오는 방식으로 처리했습니다. - V1.0 특징 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓...

More →

Mh Brickfolio ver. 1.1

Mh Brickfolio ver. 1.0

- 특징 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때) 5. Box를 총8가지의 에니메이션 효과로 출력 6. Box의 색상 / 테두리 / 그림자등을 지정 7. 썸네일 / 제목 / 내용 / 기타등등의 출력유무, 크기, 색상을 지정

More →

Mh Brickfolio ver. 1.0

Mh Hover Effect Sliding Pro ver. 1.0

- Pro 특징 1. 코드를 정리하였습니다. 2. 대상 분류 srl값(분류)으로도 게시물을 출력합니다. - https://moonhouse.co.kr/xetip/498956 3. Rightbox 출력 이미지를 확장변수를 이용하여 원본으로도 출력가능 - https://moonhouse.co.kr/xetip/500312 4. 페이지기능을 추가하였습니다. 이전 버전 은 로그인 회원은 다운가능합니다.

More →

Mh Hover Effect Slidi...

Mh Multi Pro ver. 1.0

- Pro 특징 1. 이전 버전들과 대동소이하나 코드를 정리하였습니다. 2. 대상 분류 srl값(분류)으로도 게시물을 출력합니다. - https://moonhouse.co.kr/xetip/498956 3. 파일아이콘 표시 출력 선택가능 - https://moonhouse.co.kr/xetip/502571 4. Rightbox 출력 이미지를 확장변수를 이용하여 원본으로도 출력가능 - https://moonhouse.co.kr/xetip/500312 5. SketchBook5 게시판스킨 - 문하우스 수정버전 Pro 와 연동하여 날짜지정 종료/진행중/종료임박/오늘종료 버턴을 출력할 수 있습니다. - https://moonhouse.co.kr/xetip/506303 이...

More →

Mh Multi Pro ver. 1.0

SketchBook5 게시판스킨 - 문하우스 수정버전 Pro ver. 1.7.2

문하우스 수정버전의 스케치북 스킨은 폰트어썸 기능이 빠져 있습니다. Web Fonts Addon 을 설치해서 폰트어썸과 Sexy Button을 활성화 시켜야 아이콘들이 정상적으로 출력됩니다. - 수정버전 Pro 특징 필요할때 마다 조금씩 수정 보안 한거라 일일이 열거 하기가 쉽지 않네요. 큰 부분만 적겠습니다. 1. 거래장형 리스트 추가 - https://moonhouse.co.kr/xetip/484252 2. 게시판 목록 아이콘들 출력 - 개별 아이콘마다 출력 선택 가능 - https://moonhouse.co.kr/xetip/502571 3. 게시판목록 조회수별 아이콘출력 - https://moonhouse.co....

More →

SketchBook5 게시판스...

Widgets Of MoonHouse

PointData Of MoonHouse

1 2 3 4 5

Layouts Of MoonHouse

    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout
    • 가장 기본적인 것만 적용한 심플한 흰색 레이아웃입니다. 바탕색은 흰색만 적용하였으며 상단 로...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.1
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 1탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 버전 [v5 업데이트...
    • 2016.12.07
    • 문하우스 레고 레이아웃 Ver 1.8
    • XE마켓에 올려서 한분의 구매자만 나타났던 레이아웃을 XE최신버전(1.8)에 맞추어서 새롭게 단장...
    • 2016.03.28

XE Of MoonHouse

경고!!! 다운 받지 마세요. Mh_Multi Sale 위젯은 유료판매 제품입니다. Point만 날라갑니다. Shoping Demo Manual Q&A Mh_Multi Widget 특징 It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form. 1. Mh_multi Widget 에 총 5가지 Skin이 포함되어 있으며 Skin 마다 각각 고유의 형테로 구성 • 완벽히 위젯별로 작동합니다. - 동일 Skin 으로 한페이지에 다수의 위젯을 생성할시 위젯설정에 "위젯 NO"를 다르게 적용 2. 거의 완벽한 반응형(모바일형)으로 츨력이 가능 • 함께 배포되는 mhstyle 위젯스타일 적용시 - https://moonhouse.co.kr/xetip/469297 3. 간단한 설정 으로 색상변경 가능 • 총 9가지 색상 선택 • 위젯 타이틀, 게시물 제목, more색상등 변경 • 설정 옵션들에서 자신만의 컬러로 변경 가능 4. 거의 완벽한 설정으로 각 위젯이 카멜레온처럼 변형이 가능 • 페이지기능으로 Total게시판 기능으로 활용 - ajax 기능으로 화면 리플레쉬 없이 작동합니다. • 모든 항목을 추가, 제외 가능 - 썸네일, 테두리, 위젯타이틀, 제목, 내용, 글쓴이, 날짜등 • 모든 항목의 색상 지정 가능 - 테두리, 제목, 내용, 바탕색, Hover색상등 5. 썸네일 클릭시 3가지 형태로 츨력가능 • 기본적으로 게시판으로 연결 • Right Box 형식으로 출력 • Zoom 형식으로 출력 6. 다양한 설정 • 대상 모듈의 대상 분류 srl값으로도 출력 가능 • 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화 • 댓글 출력가능 • 그룹별, 포인트별, 레벨별로 출력 가능 • 모듈명, 분류명 출력 가능 • 확장값 출력 가능 7. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다. Web Fonts Addon / 말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다. 페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다. .button-3d { display:inline-block; color:#fff; text-decoration:none; border-radius:5px; border:solid 1px #000; text-align:center; padding:5px 10px; margin: 12px; -webkit-transition: all 0.1s;-moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 4px 4px 0px #1c1c1c; -moz-box-shadow: 4px 4px 0px #1c1c1c; box-shadow: 4px 4px 0px #1c1c1c;} .button-3d:hover { color:#fff; -webkit-box-shadow: 2px 2px 0px #eee; -moz-box-shadow: 2px 2px 0px #1c1c1c; box-shadow: 2px 2px 0px #1c1c1c; position:relative; top:4px;} .shop { background:#ff6600; } .demo { background:#7ED321; } .me { background:#ff6600; } .qa { background:#7ED321; } Shoping Demo Manual Q&A Mh_Multi Widget 메뉴얼 1. 총 5가지 Skins 1. Sketchbook5 Webzin 형태 2. Sketchbook5 List 형태 •SketchBook5 게시판스킨 - 문하우스 수정버전 Pro 와 연동하여 날짜지정 종료/진행중/종료임박/오늘종료 버턴을 출력할 수 있습니다. - https://moonhouse.co.kr/xetip/506303 3. chameleon 형태 4. Smart 형태 5. Scroll - 공지사항형태
경고!!! 다운 받지 마세요. Mh_Justice 레이아웃은 유료판매 제품입니다. Point만 날라갑니다. Shoping Demo Manual Q&A Mh_justice Layout 특징 Mh Justice Layout is a free one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 작동되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section에서 에니메이션이 출력 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 다양한 자체 프로그램을 내장 • 아코디언 메뉴 • 아이폰배경 로그인 팝업 • 배경 슬라이드 • 공지사항 팝업창 • 동영상 팝업 플레이어 • 사이트정보 메뉴 팝업창 출력 • 페밀리 메뉴 • 메뉴위치 View 4. 다양한 위젯, 애드온을 같이 동봉 • 포인트 상태 위젯 • Mh Slide Pro위젯 • K-Onepage Contact 위젯 아포리스 문의 스킨 • Web Fonts 애드온 • 말풍선(툴팁) 애드온 5. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다. Web Fonts Addon / 말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다. 페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다. Mh_justice Layout 메뉴얼 1. Section 공통 1. 각 Section별 색상을 각각 지정 가능 2. 스크롤시 상단 메뉴영역 배경색, 메뉴색 변경 3. 자체적으로 PopUp창 출력 지원 •Image, Text, Html 사용가능 •1일 닫기 지원 •PopUp창의 위치, 크기, 색상등을 지원 •Image 하이퍼링크 지원 •반응형(모바일) 지원 2. Section1 Area 1. 배경영역 - 슬라이드, 이미지, 색상중 선택가능 2. 상단영역 - Logo, Menu, 회원정보 a. Logo : 이미지와 Text중 선택 b. Menu : One페이지 메뉴, Main메뉴, 출력안함 •원페이지 메뉴형태 - Section별 메뉴를 지정하여 한페이지 내에서 해당 섹션으로 이동 - 해당 섹션으로 이동시 색상 변함 - 적용 페이지 : https://moonhouse.co.kr/justice •메인 메뉴형태 - XE 나 라이믹스에서 지정한 메뉴를 출력하여 해당 mid로 이동(3차 메뉴까지 지원) - 본 페이지 형태 •반응형(모바일용) 햄버거 메뉴바 지원 - 원페이지메뉴와 메인메뉴 각각 다르게 출력 3. 회원정보영역 - 로그인, 로그아웃, 레벨, 포인트, 회원정보메뉴, 레이아웃편집, Admin메뉴 a. 로그인 - 레이아웃 자체 로그인을 내장 •기본 iphone 이미지제공, 자체 제작 이미지 사용가능 •SNS로그인 사용 가능 : "SocialXE 모듈" 설치필수 b. 사용자 팝업메뉴에서 포인트 표시 : "포인트 상태 위젯" (설치프로그램에 포함됨) 4. 비디오(Youtube, vimeo등) 팝업 플레이어 자체 내장 •바탕 ► 아이콘 클릭시 재생(선택 가능) 5. 아코디언 메뉴 자체 내장 •바탕이미지와 총 4개의 이미지를 등록 •각각 제목, 내용, 바로가기를 등록 •책갈피에 마우스 hover시 전체이미지와 제목, 내용, 바로가기가 펼쳐짐 •메뉴 닫기 버턴 지원 3. Section2 Area 1. 좌측영역 a. "Mh Slide Pro위젯"을 선택(설치프로그램에 포함됨) •모듈No, 카테고리No, 게시글수 만 입력하면 됨 b. 직접입력 선택 •위젯, Html, Text등 코드 입력 b. 출력안함 선택 •게시판, 페이지 형태로 출력시 필요 2. 우측영역 •제목, 내용, 바로가기 직접 등록 4. Section3 Area 1. 좌측 3개, 우측 3개의 메뉴 출력 •Images, 제목, 내용, 바로가기 작성 •Images는 가로폭 100px로 고정배치 •투명 png파일이 적당 5. Section4 Area 1. 2개의 상하 영역 •Images, 제목, 내용, 바로가기 작성 •Images는 가로폭 550px로 고정배치 6. Section5 Area 1. 좌측영역 - 주소, 전화번호, E-Mail, Homepage, 지도 정보 작성 •지도 정보는 Google Map을 이용하여 출력 https://www.google.co.kr/maps/ 에서 좌측 삼선 클릭 - 지도 공유 또는 퍼가기 - 지도 퍼가기 - HTML 복사 - 붙여넣기 2. 우측영역 - 관리자에게 메세지 보내기(지정한 게시판에 저장됨) •K-Onepage Contact 위젯설치 필수 - 아포리스 문의 위젯 스킨 선택(설치프로그램에 포함됨) •메세지가 저장되는 게시판 지정 필수 - 관리자만 볼 수 있게 권리 설정 •로그인회원은 Name과 E-mail이 자동으로 기재 7. Footer_Widgets Area 1. Sections 아래에 Widget, Images, Html, Texte등을 코드로 작성 •가로 1열, 2열, 3열중 선택 •제목작성 가능 Html 작성 예 - 1열 상단 부분 <p><img src="/files/attach/images/512577/f24f571bb82edce9c467c8494dd4484c.jpg" style="width: 150px; height: 150px; border: 1px solid #eee; float: left; padding:2px; margin:0 10px 10px 0"/>The Basílica de la Sagrada Família was the inspiration of a bookseller, Josep Maria Bocabella, founder of Asociación Espiritual de Devotos de San José (Spiritual Association of Devotees of St. Joseph).</p> 8. Footer Area 1. 사이트 Info 영역 •Copy Rights 내용 •Designed, Edited 출력선택 가능 •기타 문구 작성 가능 2. SNS 아이콘 출력 •Twitter, Facebook, Youtube 채널, Naver Blog, Kakao Story 3. 페밀리메뉴 출력 4. 경고메뉴 출력 - 대체문구를 사용 할 수 있고 mid명도 바꿀 수 있음 a. 개인정보취급방침 출력 •기본 mid명 privacy 사용함 b. 사이트이용약관 출력 •기본 mid명 policy 사용함 c. 이메일주소무단수집거부 출력 •기본 mid명 privacyEmail 사용함 d. 굳이 위 3개의 용도로만 사용할 필요는 없습니다. •본 화면 하단 우측에 "주문요청" 클릭시 주문서 팝업 e. 해당 메뉴 클릭시 본 화면에 팝업창으로 출력 •mid 생성시 레이아웃을 사용하지 않고 생성해야 출력이 깔끔함 9. Content Area 1. 5개의 Section중에 1곳을 선택해서 지정 a. OnePage 형태 사용 •mid생성시 메뉴타입을 위젯페이지로 생성 •지정 Section하단에 페이지수정으로 사용 •상단 이미지의 경우 https://moonhouse.co.kr/justice의 Section2 영역을 지정한 모습 - "Mh Brickfolio 위젯"을 사용 b. 게시판, 페이지 형태 사용 •Section1을 제외한 색션에 사용 - Section1적용시 약간의 문제가 생김 •mid생성시 메뉴타입을 게시판이나 문서페이지로 생성 - 게시판형태 : https://moonhouse.co.kr/xemy - 페이지형태 : 지금 보고 있는 페이지 2. Contion영역 설정 a. Contion의 가로폭, 바탕색상, 모서리 형태, 그림자지정을 선택 b. 상단에 메뉴위치 View 기능 사용 가능 •총 5개의 형태중 선택 - White2종, Black 2종, Gray 1종 c. 상/하단에 광고영역(Adsense) 출력 •적용 페이지 : https://moonhouse.co.kr/xemy .button-3d { display:inline-block; color:#fff; text-decoration:none; border-radius:5px; border:solid 1px #000; text-align:center; padding:5px 10px; margin: 12px; -webkit-transition: all 0.1s;-moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 4px 4px 0px #1c1c1c; -moz-box-shadow: 4px 4px 0px #1c1c1c; box-shadow: 4px 4px 0px #1c1c1c;} .button-3d:hover { color:#fff; -webkit-box-shadow: 2px 2px 0px #eee; -moz-box-shadow: 2px 2px 0px #1c1c1c; box-shadow: 2px 2px 0px #1c1c1c; position:relative; top:4px;} .shop { background:#ff6600; } .demo { background:#7ED321; } .me { background:#ff6600; } .qa { background:#7ED321; }
1 2 3 Next
위젯 폼 위젯 file 2020.03.16 19
위젯 설명 - 게시판을 활용하여 폼(form) 형태 페이지를 출력하는 위젯입니다. 위젯을 통해 작성한 콘텐츠는 지정된 게시판으로 전송됩니다. - 문의 글 전송, 견적 문의 등을 수행할 수 있습니다. - '제목+이름+이메일+연락처+내용' 입력을 기본으로 합니다. - 게시판 분류 및 사용자정의(확장변수)를 활용할 수 있습니다. - 비밀글 지정, 댓글 허용 등 다양한 옵션을 지원합니다. - 이런 문의도 있고 해서 과거의 contactfree라는 위젯에 기능을 조금 개선해보자는 취지에서 작업하다가 거의 새로운 위젯을 만들어버렸습니다. 즉, contactfree 위젯의 초확장 버전이라 보시면 되겠습니다;; 1.1.1 업데이트 - 2020-03-16 - 라이믹스 회원 전화번호 체계에 맞춤 - 폼 전송 후 현재 페이지 처리시 화면 스크롤을 페이지 최상단이 아니라 위젯 상단으로 이동 - 폼 전송 후 원하는 url로 이동 가능 (페이지 처리방식 옵션 추가) 1.1.0 업데이트 - 2020-03-14 - 기본 스킨(default)의 파일 구조 개선 및 코드 정리 - 본문에 전화번호 기재 (버그 수정) - 우편번호 유효성 체크 (버그 수정 : postcodify API 사용시) - 이메일 주소 입력에 필수/옵션 적용 - 내용글(message 필드) 입력에 필수/선택 옵션 적용 1.0.1 업데이트 - 2020-03-12 - 분류를 사용하지 않는 경우 유효성 검사에 걸리는 문제를 수정 - 폼 전송 후 현재 페이지에서 결과값 처리시 이미지가 뜨지 않던 문제 수정 '설정' 설명 1. 게시판 연동 - 게시판을 지정하면 폼 위젯에서 작성한 콘텐츠가 해당 게시판에 저장됩니다. - 게시판 모듈을 지정하지 않으면 위젯 작동이 중지되고 에러페이지를 출력합니다. 2. 콘텐츠 제목 - 이용자가 직접 제목을 입력할 수도 있고, 위젯 스킨에서 설정된 제목을 뿌려줄 수도 있습니다. 3. 분류(카테고리) 활용 - 분류를 출력 방식을 선택할 수 있으며, 분류번호(category_srl)을 이용해 특정 분류만 모아서 출력하는 것도 가능합니다. - 분류 번호를 1개만 지정하면 위젯 스킨에서는 분류 폼을 따로 출력하지 않고 콘텐츠는 해당 분류로 자동 귀속됩니다. 4. 문서 비밀번호 - 비로그인 사용자에 한해 콘텐츠의 비밀번호를 랜덤 또는 직접 선택 방식으로 제공합니다. 5. 사용자 정의(확장변수) 활용 - 게시판의 확장변수를 가져와서 폼 문서로 출력이 가능합니다. 분류와 마찬가지로 아예 출력을 하지 않거나 일부만 활용하거나 모두 활용할 수 있습니다. 6. 댓글 허용, 공개/비밀 선택 - 일반적인 게시물과 마찬가지로 사용자가 댓글 허용 여부 및 비밀글 사용 여부를 결정할 수 있습니다. - 또한 관리자가 댓글을 일괄 허용하거나 일괄 불허할 수 있으며, 콘텐츠를 강제로 공개 또는 비밀로 귀속시킬 수 있습니다 7. 개인정보 안내 및 동의 - 개인 정보를 수집하는 만큼 관련 사항을 선택적으로 출력할 수 있습니다. - 안내문 제목과 설명란에 개행 문자(\n)를 삽입하면 복수의 안내가 가능합니다. (예. 개인정보 수집 및 이용 동의, 개인정보 제3자 제공 동의 등) 8. 폼 전송 후 페이지 처리 - 폼 전송 후 페이지 처리 방식을 선택할 수 있습니다. - 1) 현재 페이지에서 입력 사항을 간단히 보여주거나, 2) 콘텐츠 본문으로 바로 이동하거나, 3) 콘텐츠가 저장된 게시판 목록화면으로 이동할 수 있습니다. 몇 가지 팁 분류번호(category_srl)나 확장변수 eid를 몰라도 걱정마세요 - (관리자 페이지 등에서 위젯 코드만 추출하는 방식이 아니라) 위젯 페이지에서 페이지 수정을 통해 위젯 설정을 시도하면... - 분류나 확장변수를 '모두 활용'으로 선택하고 설정을 저장한 뒤, 다시 설정을 수정하면 대상 게시판에 연계된 분류와 확장변수 목록이 자동으로 입력되어 있는 것을 볼 수 있을 겁니다. - 여기서 변수값을 선택적으로 추리고 '일부만 활용'으로 바꾸면 위젯 설정에 수고로운 시간을 줄일 수 있습니다. 폼-메일(form mail)로도 사용할 수 있어요 - 게시판 설정에서 '관리자 메일'을 설정해놓으면, 신규 문의가 등록될 경우 메일로 알림을 받을 수 있습니다. - 우리메일 등을 이용하면 보다 완벽한 형태의 이메일을 받아볼 수도 있습니다. (강추) - 이래저래 본 위젯이 폼 메일 기능으로도 활용될 수 있을 겁니다. 기능 확장을 고려할 수 있습니다 - 스킨 개발을 통해 위젯 변수를 잘 활용하면 다양한 방식으로 기능을 확장해볼 수 있을 겁니다. - 예를 들어 자바스크립트 또는 제이쿼리를 활용하여 스킨을 잘 개발하면, 구글식의 다단계 설문조사 같은 것도 구현할 수 있을 겁니다. 또한 게시판 스킨을 재가공해서 저장된 확장변수값을 아우르는 다양한 통계페이지도 생각해볼 수 있습니다. 기타 정보 - 라이믹스 + 크롬에서 개발되었습니다. 기타 환경에 문제가 있을 경우 댓글로 알려주세요~ - 그 외의 프로세스에 대해서는 직접 사용해보시기를 권장합니다. (이제 슬슬 힘들어서요...) - 다음 페이지들에서 실제 작동하는 과정을 체험할 수 있습니다. - 간단 버전 : https://bit.ly/33edLkJ - 거의 풀 버전 : https://bit.ly/3aRMOGr
1 2 3 Next
요즘은 레이아웃을 만들때 반응형으로 제작하는 것이 추세입니다. 반응형으로 레이아웃을 제작하다보면 메뉴처리 부분이 항상 고민입니다. sweetMobile 레이아웃같이 상단에 스와프 기능으로 메뉴를 줄 수도 있지만, 메뉴의 종류가 많거나 2차, 3차메뉴가 존재 한다면 아무래도 힘들죠. 그래서 PC모드에서는 상단에 가로로 나열 처리하고 마우스 오버시 2차, 3차 메뉴가 드롭방식으로 출력되게 하고, 모바일이나 좁은 화면에서는 상단 좌/우측에 일명 햄버거(삼선)형태를 만들어서 터치시 화면을 차지하면서 메뉴들을 출력되게 하는 방식을 많이 사용합니다. PC모드의 메뉴 방식은 다영한 소스가 공개되어 있고 적용하기도 그다지 어렵지 않습니다. 그런데 햄버거 형태안의 메뉴출력 방식은 그다지 많이 공개 되어져 있지 않습니다. 그리고 보통은 1차메뉴 부분을 2차메뉴 출력을 나타내는 기능으로 많이 사용하여 XE나 라이믹스 메뉴 체계와는 잘 맞지를 않습니다. 아니면 모든 1,2,3차 메뉴를 한번에 다 출력하는 식이죠. 이런 불편함을 극복하고자 여러 소스들을 받아서 테스트하고 실험하면서 적용도 해 보았지만 만족스러운 결과를 얻지는 못했습니다. 그래도 가장 좋았던 결과가 1차메뉴 아래/옆에 + 영역을 만들어서 적용한 방법이 제일 만족스러운 결과였던 것 같습니다. 그러다 서핑중에 디자인이 예쁜 형태의 소스를 얻게 되어서 적용해 보았습니다. https://www.blueb.co.kr/?c=1/4&p=3&uid=3914 처음 접했을때 메뉴명을 터치하면 1차메뉴로 연결되고 우측의 숫자부분을 터치하면 2차메뉴들이 드롭되게 하면 되겠다 싶었죠. 그래서 최근에 만든 유료 레이아웃인 Mh_Justice 에 적용해 보았습니다. 원소스를 간단히 요약하면 아래와 같이 됩니다. <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul class="mainmenu"> <li><img src="images/envelope.png" alt="Envelope icon" class="icon"><span>Messages</span><div class="messages">23</div></li> <ul class="submenu"> <div class="expand-triangle"><img src="images/expand.png"></div> <li><span>New</span></li> </ul> </ul> <script src="js/script.js"></script> <script src="js/retina.min.js"></script> jquery.min.js는 XE에서 기본 제공하므로 삭제 retina.min.js는 이미지들에 옵션을 주는 스크립트 파일인 것 같은데 이미지들을 최소하 하므로 삭제 style.css 와 script.js 파일을 해당 폴더에 업로드합니다. 기존에 사용하던 반응형메뉴 소스를 열어서 위의 원본 소스와 결합합니다. 상단의 멤버/로그인 부분과 햄버거 소스 부분은 생략하고 설명합니다.(각자가 사용하는 코드가 다를 수 있으므로) <load target="css/style.css" /> <style type="text/css"> #sidebar-wrapper { background:<!--@if($li->smenu_color == 'blue')-->#2980B9<!--@elseif($li->smenu_color == 'black')-->#444<!--@elseif($li->smenu_color == 'red')-->#e4644b<!--@else-->#aaa<!--@end--> } </style> <div id="wrapper"> <div class="overlay"></div> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav {$li->smenu_color}"> <ul class="mainmenu" loop="$Smart->list=>$key1,$val1" class="active"|cond="$val1['selected']"> <li cond="$val1['href']"> <i class="fas fa-align-left icon"></i> <span><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></span> <span cond="$val1['list']" class='submenu-indicator'>+</span> </li> <ul cond="$val1['list']" class="submenu"> <div class="expand-triangle"><img src="img/underline.png"></div> <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"> <span><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></span> <ul cond="$val2['list']" class="submenu2"> <li loop="$val2['list'] => $key3, $val3"> <span><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'"><i class="fa fa-reply-all fa-rotate-180" style="margin-right:5px"></i>{$val3['link']}</a></span> </li> </ul> </li> </ul> </ul> </ul> </nav> </div> <load target="js/script.js" /> <style> ~ </style>부분은 색상선택시 바탕색상을 지정 붉은색 코드들이 원본에 XE코드 적용한 형태 파란색부분이 1차메뉴, 2차메뉴가 Hidden이거나 존재 하지 않을때 숨기는 조건문 그리고 이미지 부분들을 폰터어썸이나 css로 커버했으며 1차메뉴 아래의 bar만 이미지 사용 style.css를 수정 .sidebar-nav li { display:inline-block; line-height:20px; position:relative; width:100%;} .sidebar-nav li a { color:#fff !important; } .sidebar-nav .plus { text-align:right; color:#fff; padding:5px; margin-right:10px; font-size:12px; } .sidebar-nav .plus span { color:#fff; } .mainmenu { font-size:16px; position:relative; margin:0px auto; padding:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);} .mainmenu > li { box-sizing:border-box; height:48px; color:#fff; } .mainmenu > li span { line-height:48px; display:block;} .mainmenu > li span a { color:#fff !important; } .mainmenu > li .icon { display:block; float:left; padding:16px 20px 0 20px;} .mainmenu .submenu-indicator { font-size:18px; background:#444; color:#fff; line-height:19px; display:block; float:right; width:20px; height:20px; margin-top:-33px; margin-right:19px; padding:0; text-align:center; border-radius:10px; -o-transition:transform .3s linear; -moz-transition:transform .3s linear; -webkit-transition:transform .3s linear; -ms-transition:transform .3s linear; } .mainmenu .submenu-indicator:hover { -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg)} .expand-triangle { width:220px; height:10px; content:" ";} .expand-triangle img { width:inherit; height:inherit; vertical-align:top;} .submenu { font-size:13px; box-sizing:border-box; content:" "; } .submenu li { line-height:30px; margin-left:-40px; padding-top:11px; transition:border-left 220ms ease-in; } .submenu li span a { color:#eee !important; } .submenu .chosen,.submenu .chosen:hover { border-left:solid 6px #fff;} .submenu li:hover { border-left:solid 6px #fff;} .submenu li span { margin-left:30px;} .submenu2 { font-size:13px; box-sizing:border-box; content:" "; } .submenu2 li { margin-left:-40px; padding-top:0px; transition:border-left 220ms ease-in; } .blue, .blue .sidebar-nav li a:hover, .blue .mainmenu , .blue .mainmenu > li, .blue .submenu li, .blue .submenu2 li { background:#2980B9; } .red, .red .sidebar-nav li a:hover, .red .mainmenu , .red .mainmenu > li, .red .submenu li, .red .submenu2 li { background:#e4644b; } .black, .black .sidebar-nav li a:hover, .black .mainmenu, .black .mainmenu > li, .black .submenu li, .black .submenu2 li { background:#444; } .black .mainmenu .submenu-indicator { background:#000; color:#fff; } .gray, .gray .sidebar-nav li a:hover, .gray .mainmenu, .gray .mainmenu > li, .gray .submenu li, .gray .submenu2 li { background:#aaa; } 붉은색 코드는 마우스 오버시 + 부분이 회전되게한 코드(별거 아님~) 파란색 코드는 메뉴영역의 색상을 지정한 부분입니다.
홈페이지 작업을 하다보면 DB를 건더려야 할때가 종종 있습니다. 그런 경우 작업전 백업은 필수 입니다.(중요! 또 중요!) 쿼리문 작성하지 않고 DB작업으로 손쉽게 할 수 있는 일들 1탄 - XE나 라이믹스 기준입니다 [ 세밀한 페이지 복사 ] 관리자페이지에서 페이지 복사를 하면 디자인이나 세부 옵션은 복사가 되지만 내용(Contant)부분은 복사가 되지를 않죠, 그런데 내용부분을 복사해야 하는 경우도 있습니다. 예를 들면 기존의 페이지는 건들이지 않고 내용부분(위젯이나 기타)은 그대로 두고 디자인을 바꾸어 보는 테스트를 해 보고 싶거나, 페이지나 로딩에 문제가 생겨서 위젯들을 지워보고 싶을때 복사한 mid에서 작업해 보는 방법입니다. 먼저, 관리자 페이지에서 해당 페이지를 복사합니다. (예로 원본 mid명은 home, 복사한 mid명은 test) 가장 많이 사용하는 DB프로그램인 phpMyAdmin를 가지고 설명하겠습니다. DB에 접속후 "xe_modules" 을 찿아서 "보기"를 클릭 잡깐! DB복사는 하셨나요~ xe_modules만 "내보내기" 하시면 됩니다.(중요!!!) 위의 이미지에서 home을 찾아서 "content"부분을 더블클릭합니다. 내용을 전부 복사합니다. test mid를 찾아서 "content"에 가서 붙여 넣기를 합니다. 관리자 페이지에서 "캐시 비우기"를 하고 test 페이지에 접속해보면 똑 같이 복사된 페이지를 보실 수 있습니다. 여기서 디자인도 바꾸어 보고 위젯도 지우거나 수정해 보고 테스트해서 안전하면 기존의 home페이지에 적용하면 됩니다. 참고로 모바일페이지는 "mcontent" 입니다.
날짜 출력할 곳보다 위쪽에 {@ $x_date = strtotime($document->getRegdate(YmdHi)); $time_calc = time() - $x_date; } <!--@if($time_calc < 60)-->{@ $_atc_date = '방금'} <!--@elseif($time_calc >=60 && $time_calc < 3600)-->{@ $_atc_date = floor($time_calc/60).'분 전'} <!--@elseif($time_calc>=3600 && $time_calc < 86400)-->{@ $_atc_date = floor($time_calc/3600).'시간 전'} <!--@elseif($time_calc>=86400)-->{@ $_atc_date = floor($time_calc/86400).'일 전'} <!--@end--> 시간경과에 따른 출력 형태를 선언해 놓구요. 실제 작성일자 출력 부분에 {$_atc_date} 로 하시면 될 것 같네요. 제 스킨에 적힌 코드를 참조했습니다. [문하우스 Tip] 위의 팁을 댓글 위젯에 적용해 보았습니다. 적용 위젯은 최근댓글출력위젯에 new아이콘과 시간별로 칼라로 분류 에 적용했습니다. mh_c_comment 스킨의 list.html 파일 수정 <ul class="board"> <!--@foreach($wi->comment_list as $val)--> {@ $x_date = strtotime($val->getRegdate(YmdHi)); $time_calc = time() - $x_date; } <li class="c_area"> <!--@if($val->getRegdate("YmdHi")>date('YmdHi',strtotime("-1hours")))--> <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_a_color}">{floor($time_calc/60).'분 전 :'} <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_a_color}">{$val->getSummary($wi->subject_cut_size)}<img src="images/new.gif" border="0"></a></span> <!--@elseif($val->getRegdate("YmdHi")>date('YmdHi',strtotime("-24hours")))--> <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_a_color}">{floor($time_calc/3660).'시간 전 :'} <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_a_color}">{$val->getSummary($wi->subject_cut_size)}<img src="images/new.gif" border="0"></a></span> <!--@elseif($val->getRegdate("YmdHi")>date('YmdHi', strtotime("-72hours")))--> <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_b_color}">{floor($time_calc/86400).'일 전 :'} <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_b_color}">{$val->getSummary($wi->subject_cut_size)}</a></span> <!--@else--> <span cond="$wi->display_regdate == 'Y'" class="date" style="color:{$wi->day_c_color}">{zdate($val->regdate, "m-d")} <a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}" style="color:{$wi->day_c_color}">{$val->getSummary($wi->subject_cut_size)}</a></span> <!--@end--> </li> <li> <span cond="$wi->display_author == 'Y'" class="name"> <i class="fa fa-user"></i> {cut_str($val->getNickName(), 6, "")} </span> </li> <!--@end--> </ul> 빨간색 부분이 팁을 적용한 부분입니다. 1시간 이전은 '분 전' 1시간 이후 24시간 이전은 '시간 전' 24시간(1일) 이후 72시간(3일) 이전은 '일 전'으로 출력되게 하였습니다.
프로필 이미지가 없는 유저의 경우 프로필 이미지 출력 부분이 물음표로 출력이 되는것을 아래와 닉네임의 첫 글자 + 배경색으로 표시합니다. 아래와 같은 차이가 있습니다. #기존 #변경후 적용 예 보기 : https://xeplus.io/testboard_tp/57498 1.배경 닉네임 데이터 업로드 다운로드 : nick_bg_color.zip 해당 파일을 XE 설치 경로에 업로드합니다. 2.게시판 스킨 수정 (스케치북 게시판 스킨 기준) 수정할 파일 : modules/board/skins/sketchbook5/_comment.html 1)파일 제일 상단에 아래의 코드를 추가합니다. {@ $nickBgPath = _XE_PATH_.'nick_bg_color.php'; include_once($nickBgPath); $oNickBgUtil = new nickBgUtil(); } 2)프로필 이미지가 없는 작성자의 프로필 출력 부분 수정 21라인 (라인수는 스킨 커스터마이징 혹은 버전에 따라 다를수 있습니다) 변경전 <span cond="!$comment->getProfileImage()" class="profile img no_img">?</span> 변경후 {@ $fisrt_nick_str = mb_substr($comment->getNickName(),0,1)} <span cond="!$comment->getProfileImage()" class="profile img no_img " style="background-color:{$oNickBgUtil->getNickBgColor($comment->getNickName())};color:white">{$fisrt_nick_str}</span> 다른 게시판 스킨은 위 코드를 참고하셔서 적용하시면 되겠습니다. 소스코드를 더 멋지게 개선하셨다면 다시 공유해주세요^^ [문하우스의 Tip] 색상대신 랜덤으로 이미지 아이콘이 출력되게 수정했습니다. # 수정한 파일 - nick_bg_color.phps # 이미지 아이콘 30개 - icon_30.zip - /modules/board/skins/sketchbook5/img 폴더안에 풀어주시면 됩니다. # _comment.html 파일 수정 {@ $second_nick_str = mb_substr($comment->getNickName(),0,2)} <span cond="!$comment->getProfileImage()" class="profile img no_img " style="background:url('{$tpl_path}/img/{$oNickBgUtil->getNickBgColor($comment->getNickName())}') 2px 2px no-repeat; width:50px; height:50px; font-size:12px; color:#fff">{$second_nick_str}</span> P.S 주의 사항 "1.배경 닉네임 데이터 업로드" 를 설치하지 않고 이 팁을 적용하면 게시판내용에 들어가 지질 않습니다, 이점 유의 하세요.
1 2 3 Next