MH Justice Latout Manual
X 24 시간 닫기 X

MH Multi Widget

  1. Shopping
  2. 주문상태
  3. 주문QA
  4. Demo
  5. 메뉴얼
  6. 제작의뢰
  7. XE작품
  8. 가입인사
1.0x
사이트 좌측에 있는 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번은 같습니다. 먼저 /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;} 빨간색 부분을 추가해 주시면 됩니다.
profile
팔공산
Oct 01 2010
XE 프로젝트에 결재시스템이 연동된 쇼핑몰프로젝트인 ShopXe가 있습니다. 제가 필요에 의해서 이리저리 둘러보다가 아직은 미완성이지만 그래도 XE에서 돌아가는 쇼핑몰프로젝트이고 아지터님이 깔끔한 스킨도 만들어 배포하셨기에 저도 그기에 덧 붙여서 약간 수정된 스킨을 만들어 보았습니다. 덧 붙여서 주문관리스킨도 약간 수정했습니다. 저는 결재시스템까지는 연동을 시켜 보지 않았고 그 부분에 대한 지식도 부족하므로, 질문사항이 있으시면 스킨에 관한 질문만 남겨주세요. shopxe_total.zip (ShopXe 에 필요한 수정된 모든 파일이 들어 있습니다. 이 파일로 shopxe를 처음 설치하시면 아래의 modules.zip파일과 메뉴얼의 코드수정을 하실 필요가 없습니다. 아울러 이 파일안에는 주소검색을 팝업으로 띄우는 모듈및 스킨이 함께 첨부되어 있습니다.) 덧이희야님의 설치메뉴얼 아지터님 product스킨 shopXE 에서 배송지 주소 입력 팝업으로 띄우기 메뉴얼 일단 위의 3군데 링크를 보시고 다운 받고 설치를 하신 다음 "아지터님의 스킨"은 설치를 하지 않으시더라도 스킨설명까지는 열심히 읽으주셔야 합니다. 제가 프로그램을 배포를 하고나서 올라오는 질문내용들을 보면 설명을 대충 읽고 어떤 부분이 안된다고 하시는데 프로그램을 만드시고 메뉴얼까지 작성해서 올리는 개발자들도 있는데 성의를 생각해서라도 열심히 꼼꼼하게 메뉴얼을 읽고 따라해 보세요. 개발자분들도 여러분과 다름 없는 XE를 배우는 입장에서 만들어보고 테스트해보는 XE유저라고 생각하시면 됩니다. 각설하고, 위의 링크를 열심히 읽고 제대로 설치를 하셨다면 저의 스킨들을 다운 받아서 설치를 해보세요. 먼저 다운 받은 modules.zip 파일의 압축을 풀면 product / shopxe 이렇게 두개의 폴더가 보이실 것입니다. 이 두개의 폴더를 호스팅의 ./modules 방안에 붙여 넣기 하시면 설치는 완료됩니다. 관리자페이지 - 상품관리 - 설정 - 레이아웃 및 디자인 설정 - 스킨에서 "상품관리 스킨(덧니희야 v1.0)-스킨수정:아지터-재수정:팔공산"를 선택하시고 다른 옵션들을 선택합니다. [완성된 게시판화면] 위의 이미지에서 빨간색테두리 부분이 아지트님의 스킨에서 수정된 부분들입니다. 1. 카데고리 부분을 별도로 분리했으며, 2. 게시판상단에 장바구니 / 관심상품 / 주문목록 버턴과 관리자버턴들을 추가했습니다. 3. 게시판제목 아래에 상세설명부분을 추가했습니다. (아래 이미지1번 부분) [스킨관리이미지] 2번 세부정보 부분 ㄱ. 댓글박스를 접고 펴는설정 ㄴ. 알림체크부분을 자동으로 선택부분 ㄷ. 태그입역부분의 출력유무 ㄹ. 상품구매영역부분의 색상지정 3번 안내정보 부분의 수정사항은 제품상세정보란 / 배송정보란 / 교환반품정보란의 출력유무를 선택하는 것입니다. 4번 확장변수 출력 부분 아지터님의 스킨설명을 열심히 읽으신분은 확장변수를 이용해서 배송, HOT상품, mid추천, 사은품, 품절여부 를 이미지로 나타나게 하는 것을 아실 것입니다. 이 부분을 관리자가 직접 선택할 수 있게 설정에 넣어 놓은 것 입니다. 기본으로 두시면 아지터님의 스킨설명처럼 출력됩니다. 5번 지정한 확장변수 상품구매영역 Hidden부분 4번에서 직접 지정한 확장변수중 구매자화면에는 출력을 숨기는 옵션입니다. 역시 기본으로 두시면 아지터님의 스킨설명을 따라갑니다. 지금 까지는 product스킨의 설명이었습니다. ShopXe스킨의 설명은 별로 드릴께 없고 불편했던 부분들 약간씩 수정하고 보충한 정도입니다. 그리고 스킨관리설정에 보시면 "계속쇼핑하기mid" 부분이 있는데 기존 스킨에서는 "계속쇼핑하기"버턴에서 문제를 야기하더군요 그래서 편법으로 쇼핑mid를 직접 지정하는 방법으로 바꾸었습니다. 문제점은 2개의 쇼핑mid를 만드신 경우는 문제가 됩니다.
❤️1

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

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

댓글 많은순

No 게시판 제목 글쓴이 날짜 조회수
2,553 3 플래닛 구경오세요. file 팔공산 2008.11.21 5,131
2,552 3 시스템 등록정보 사용자 정보 바꾸기 file 팔공산 2008.11.19 8,534
2,551 3 mootools를 이용한 2차슬라이딩메뉴 적용방법 file 팔공산 2008.11.10 13,465
2,550 3 MH 특정문서 위젯 V 0.3 (2026.01.06 UP) file 팔공산 2015.05.18 47,121
2,549 3 운영자, 특정레벨이하 사진(이미지) 우클릭 금지 팔공산 2008.11.01 9,188

 

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