MH Justice Latout Manual
X 24 시간 닫기 X

MH Multi Widget

  1. Shopping
  2. 주문상태
  3. 주문QA
  4. Demo
  5. 메뉴얼
  6. 제작의뢰
  7. XE작품
  8. 가입인사
1.0x

My Xe - FirstThumb 스킨
Xe of Moonhouse　>

profile
팔공산
Feb 06 2008
홈페이지 소스공개 1탄 - 좌측 메뉴 만들기(정식버전수정) file
사이트 좌측에 있는 2차메뉴를 이미지로 예쁘게 꾸미는 방법입니다. 1. 먼저 사용하는 스킨의 zbxe/layouts/사용스킨/layout.html 을 편집기로 열어서 아래의 부분을 찾아서 바꿉니다. 변경전 파일은 xe_official의 default.css를 예로 들었습니다. [변경전] <!-- 왼쪽 2차 메뉴 --> <img src="./images/blank.gif" alt="" class="mask" /> <!--@if($menu_1st)--> <ol id="lnb"> {@ $idx = 1 } <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])--> <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="./{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a> <!-- main_menu 3차 시작 --> <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )--> <ul> <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])--> <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="./{$v["href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li> <!--@end--><!--@end--> </ul> <!--@end--> </li> {@$idx++} <!--@end--><!--@end--> </ol> <!--@end--> [변경후] - 수정됨 <!-- 왼쪽 2차 메뉴 --> <div id="lnb_t">    {$menu_1st['text']} </div> <!--@if($menu_1st)--> <ol id="lnb"> {@ $idx = 1 } <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])--> <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="./{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><img src="./images/default/bullet14.gif" align="absmiddle"> {$val['text']}</a> <!-- main_menu 3차 시작 --> <!--@if($val['list'])--> <ul> <!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])--> <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="./{$v["href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><img src="./images/default/bulletD0.gif" align="absmiddle"> {$v['text']}</a></li> <!--@end--><!--@end--> </ul> <!--@end--> </li> {@$idx++} <!--@end--><!--@end--> </ol> <div id="lnb_b"> </div> 2. 사용하는 스킨의 zbxe/layouts/사용스킨/css/해당칼라.css 을 편집기로 열어서 아래의 부분을 찾아서 바꿉니다. [변경전] #lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;} #lnb li { padding-bottom:4px; list-style:none; } #lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; background:url(../images/default/bgLnbOff.gif) repeat-x; color:#3e3e3e; position:relative; z-index:99; text-decoration:none;} #lnb li a:hover, #lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #de4332;} #lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;} #lnb li.on a:hover, #lnb li.on a:focus { font-weight:bold;} #lnb li ul { display:block; position:relative; width:184px; padding:0 3px; position:relative; border-top:1px solid #ffffff; overflow:hidden;} #lnb li.on ul { display:block;} #lnb li ul li { padding:0; border-top:1px solid #f2f2f2; position:relative; top:-1px;} #lnb li ul li a { padding:6px 5px 6px 10px; width:169px; color:#818181 !important; border:none; background:none !important; border:none !important;} #lnb li ul li a:hover, #lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;} #lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; background:url(../images/default/bulletLnb.gif) no-repeat 175px center !important;} [변경후] /* 하위2차메뉴 버턴이미지 */ #lnb_t { border-top:5px solid #fff; padding:25px 5px 0px 5px; width:190px; height:57px; background:url(../images/default/zt.gif) no-repeat; font-size:18px; font-weight:bold; text-decoration:none; color:#fff; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; } #lnb { border-top:0px solid #dddddd; padding:0px 0px; width:200px; background:url(../images/default/zm.gif) repeat-y;} #lnb li { padding-bottom:0px; list-style:none; } #lnb li a { padding:10px px 5px 25px; width:175px; display:block; border:0px solid #000; color:#de4332; position:relative; z-index:99; text-decoration:none;} #lnb li a:hover, #lnb li a:focus { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; border:0px solid #e8e8e8; background:url(../images/default/bgLnbOn.gif) no-repeat center; color:#f60; position:relative; z-index:99; text-decoration:none; } #lnb li a { padding:10px 0px 0px 23px; width:177px; height:16px; display:block; border:0px solid #e8e8e8; background:url(../images/default/bgLnbOn.gif) no-repeat center; color:#090; position:relative; z-index:99; text-decoration:none; } #lnb li.on a { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; border:0px solid #e8e8e8; color:#f60; font-weight:bold; background:url(../images/default/bgLnbOn.gif) no-repeat center; position:relative; z-index:99; text-decoration:none; } #lnb li ul { display:none; position:relative; width:200px; padding:0 0px; position:relative; border-top:0px solid #ffffff; overflow:hidden;} #lnb li.on ul { display:block;} #lnb li ul li { padding:0; border-top:0px solid #f2f2f2; position:relative; top:-1px;} #lnb li ul li a { padding:10px 0px 0px 0px; width:200px; color:#C0C0C0 !important; border:none; background:none !important; border:none !important;} #lnb li ul li a:hover, #lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;} #lnb li.on ul li.on a { color:#808080 !important; font-weight:bold !important; !important;} #lnb_b { border-top:0px solid #dddddd; padding:0px 5px 0px 5px; width:190px; height:34px; background:url(../images/default/zb.gif) no-repeat;} 3. 위의 내용에서 빨간색으로 표시된 부분들이 이미지들입니다. 샘플을 올리니 그대로 사용하셔도 되고 변형하셔도 됩니다. bullet14.gif -- 2차메뉴앞 bulletD0.gif -- 3차메뉴앞 bgLnbOn.gif -- 메뉴아래 언더라인 (이것을 잘 변형하면 메뉴버턴형식으로 사용가능) zt.gif -- 상단이미지 zm.gif -- 중간이미지 zb.gif -- 하단이미지 * 수정버전에서 변경된부분 (알고나니 너무나 간단하네요*.*) [변경전 -- 후] <!-- 왼쪽 2차 메뉴 --> <ol id="lnb_t"> -- <div id="lnb_t">    {$menu_1st['text']} </ol> -- </div> 중간부분 <ol id="lnb_b"> -- <div id="lnb_b"> </ol> -- </div>
❤️1
profile
팔공산
Jan 21 2008
웹폰트로 홈피를 꾸미는 방법 2 file
위의 이미지에서 인기게시물은 '엔터+영원체' 이고, 최근댓글은 '티티체' 입니다. 적용방법은 아래목록에 있는 것과 같이 1번은 같습니다. 먼저 /zbxe/common/css/폴더안에 있는 default.css를 열어서 @charset "utf-8"; @font-face {font-family:nontoxic; src:url(../css/nontoxic_barun_2.eot)undefined} @font-face {font-family:seevaa9; src:url(../css/seevaa9.eot)undefined} @font-face {font-family:soyabarun9; src:url(../css/soyabarun9.eot)undefined} 가지고 있는 웹폰트를 위와 같이 등록합니다.(이전에 ftp로 웹폰트파일들을 올려야 겠죠) 2.웹폰트로 변형하고싶은 위젯을 선택합니다. 여기서는 예로 최근문서위젯의 xe_official 스킨의 흰배경을 택하여 하는 방법입니다. /zbxe/widgets/newest_document/skins/xe_official/css/폴더안에 있는 white.css를 열어서 .latest_white { width:100%; padding-bottom:15px; overflow:hidden; position:relative;} .latest_white h2 { display:block; height:21px; padding:9px 0 0 9px; margin-bottom:12px; color:#000000; background:url(../images/white/lineNotice.gif) no-repeat left bottom; font-size:1em;} .latest_white ul { } .latest_white ul li { height:20px; background:url(../images/white/bulletD0.gif) no-repeat left 5px; padding-left:10px; overflow:hidden; list-style:none; white-space:nowrap;} .latest_white ul li .title a { color:#555555; text-decoration:none; font:1em TTche; } .latest_white ul li .title a:hover { text-decoration:underline;} .latest_white ul li .title span.comment { color:#FE6700; font:.8em Tahoma; } .latest_white ul li .title span.comment a { color:#FE6700; font:.8em Tahoma; } .latest_white ul li .date { color:#999999; font:.8em Tahoma; white-space:nowrap; margin-right:5px;} .latest_white .more { position:absolute; top:12px; right:11px; color:#54564b; font:.8em Tahoma;} .latest_white a.more { text-decoration:none;} .latest_white a.more:hover { text-decoration:underline;} 빨간색 부분을 추가해 주시면 됩니다.

지도 바로가기 - 스케치북 리스트스킨

게시판 제목 종료일 위치 글쓴이 날짜 조회수 지도
Map 충청 충주 중앙탑 file 충주 중앙탑 팔공산 2024.03.20 113
Map 서울 서울 이순신장군 동상 file 서울 이순신장군 동상 팔공산 2024.03.20 102
Map 전라 쏠비치 진도 file 쏠비치 진도 팔공산 2024.03.20 123
Map 강원 정동진 모래시계공원 file 정동진 모래시계공원 팔공산 2024.03.20 95
Map 대구 종료 앞산공원 전망대 file 2025-04-30 앞산공원 전망대 팔공산 2023.03.29 129

댓글 많은순

No 게시판 제목 글쓴이 날짜 조회수
2,561 QNA 2 문하우스 레이아웃 ver 3.3 질문드리겠습니다. file
　┖ 포인트 팡팡!에 당첨되셨습니다. 하루79님은 100포인트를 보너스로 받으셨습니다. 하루79
　┖ 문하우스 홈피에는 문하우스 레이아웃V3을 사용하지 않고 있는데요.^.^ 적용되어진 다... 팔공산
하루79 2010.11.15 9,849
2,560 QNA 2 XE 자료실에 이미지가 나오지 않습니다.
　┖ XE자료실의 게시물들은 http://www.xpressengine.com/ 에서 퍼온 자료가 대부분입니다.... 팔공산
　┖ 네 알겠습니다... 조수하나 두시면 좋을건데. ㅎㅎ 이하늘
이하늘 2010.10.24 8,613
2,559 QNA 2 오랫만에 인사드립니다^^
　┖ 오랜만이네요. 잘 지내셨죠 저도 잘 지내고 있습니다. 오토셋은 저도 지금껏 구버전(4.... 팔공산
　┖ 감사합니다! 건강하시고 언제 또 한 번 만나서 술 한잔 나눌 수 있기를.... 바람소
바람소 2010.10.21 8,018
2,558 QNA 2 MH통합게시판 위젯에 관하여 file
　┖ 모르지오님 반갑습니다. 님이 말씀하시는 형태가 어떤 형태인지 감이 잘 안오는군요. ... 팔공산
　┖ 관리자님 답변 감사합니다. 사실 지금으로도 만족합니다. 제가 직접 수정해서 써 볼까 ... 모르지오
모르지오 2010.08.30 7,382
2,557 RM 팁 2 게시글 확장변수 순으로 정렬하기 file
　┖ 원소스에 있는 아래의 부분이 php4이하 버전 호스팅에서 문제를 일으키는 것 같습니다.... 팔공산
　┖ 감사합니다. 적용해보고 말씀드리겠습니다. ^^ 조한나
팔공산 2010.08.28 10,812

 

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.

 

mhmulti-001.jpg

 

 

[업그레이드 내용]

•문서내의 모든 이미지를 썸네일로 출력 기능 추가(선택가능)

Screenshot 2020-10-05 at 13.00.27.jpg

 

 1. Mh_multi Widget 에 총 5가지 Skin이 포함되어 있으며 Skin 마다 각각 고유의 형테로 구성    

    • 완벽히 위젯별로 작동합니다.

       - 동일 Skin 으로 한페이지에 다수의 위젯을 생성할시 위젯설정에 "위젯 NO"를 다르게 적용

       mhmulti016.jpg 

 

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

    • 함께 배포되는 mhstyle 위젯스타일 적용시

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

     mhmulti-008.jpg

 

  3. 간단한 설정 으로 색상변경 가능

    • 총 9가지 색상 선택

     mhmulti-009.jpg

    • 위젯 타이틀, 게시물 제목, Hover 테두리, more색상등 변경

     line.jpg

    • 설정 옵션들에서 자신만의 컬러로 변경 가능 

 

  4. 거의 완벽한 설정으로 각 위젯이 카멜레온처럼 변형이 가능 

    • 페이지기능으로 Total게시판 기능으로 활용

       - ajax 기능으로 화면 리플레쉬 없이 작동합니다.

    • 모든 항목을 추가, 제외 가능 - 썸네일, 테두리, 위젯타이틀, 제목, 내용, 글쓴이, 날짜등

    • 모든 항목의 색상 지정 가능 - 테두리, 제목, 내용, 바탕색, Hover색상등

 

  5. 썸네일 클릭시 3가지 형태로 츨력가능 

    • 기본적으로 게시판으로 연결

    • Right Box 형식으로 출력

     mhmulti-010.jpg

    • Zoom 형식으로 출력

     mhmulti-011.jpg 

 

  6. 다양한 설정

    • 대상 모듈의 대상 분류 srl값으로도 출력 가능

    • 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화

    • 댓글 출력가능

     mhmulti-012.jpg

    • 그룹별, 포인트별, 레벨별로 출력 가능

     2021-09-23 123907.jpg

    • 모듈명, 분류명 출력 가능

     mhmulti-014.jpg

    • 확장값 출력 가능

     mhmulti-015.jpg

 

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

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

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

 

Shoping Demo Manual Q&A

 

Mh_Multi Widget 메뉴얼

 

1. 총 5가지 Skins

 

 1. Sketchbook5 Webzin 형태

     mhmulti-002.jpg

 

 2. Sketchbook5 List 형태

     mhmulti-003.jpg

     

    •SketchBook5 게시판스킨 - 문하우스 수정버전 Pro 와 연동하여 날짜지정 종료/진행중/종료임박/오늘종료 버턴을 출력할 수 있습니다.

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

     mhmulti-004.jpg

 

 3. chameleon 형태

     mhmulti-005.jpg

 

 4. Smart 형태

     mhmulti-006.jpg

 

 5. Scroll - 공지사항형태

     mhmulti-007.jpg

Mh Product Sales

This area displays Product Sales made by Moonhouse.

Mh Justice Layout

Mh Justice Layout is a one page html5 bootstrap template.
This template comes with smooth animations, pop-up video and many more…

1. As soon as onePage is operated and the bootstrap and animations are applied, the animation is output in each section.

2. Almost perfect response (mobile)

3. Built-in various self-programming programs
• accordion menu
• iPhone background login pop-up
• Background slide
• Notice pop-up window

Read more

Mh Multi Sale

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. Works perfectly per widget. - Old versions create multiple widgets on one page with the same skin, causing problems with page function or multiple places

2. Add shortcut to on the title bar the top of the two.

3. can print out the source, without using a using the image output rightbox.

Read more