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
팔공산
Apr 10 2008
Div라운드 적용된 MH카멜레온최근댓글(4월13일수정) file
[4월13일 수정] 색상을 기재하지 않을시 검정색으로 보기 싫은 것 같아서, 기본 색상을 적용했습니다. 기본색 적용 모습입니다. MH최신글멀티위젯 V1.5 에 추가된 라운드기능을 최근댓글출력위젯으로 빼내었습니다. 테두리칼라, 폰트칼라, 바탕색등을 직접 지정 할 수 있는 카멜레온형식으로 만들었기 때문에 한개의 스킨이지만 다양한 칼라로의 변신이 가능합니다. 예전의 MH최근댓글위젯에 포함 시킬까도 생각했지만 댓글위젯의 특성상 많은 스킨이 필요 없을 것 같아서 따로 분리 했습니다. 위의 이미지에 기재된 항목들의 칼라를 선택하실 수 있습니다. [설치방법] 내려받은 파일의 압축을 풀어서 widgets폴더안애 mh_c_comment폴더를 업로드합니다. 위젯설치에서 "Mh 카멜레온 최근 댓글 출력 ver 1.0"을 선택하시고 해당칼라와 속성들을 선택하시면 됩니다.
profile
팔공산
Apr 09 2008
DIV라운드 박스를 스킨에 적용하는 방법 file
먼저 적용해 보고자하는 위젯의 스킨을 편집기로 불러온다. 예제로 최근글출력위젯의 xe_official 불러오겠습니다. 1. /zbxe/widgets/newest_document/skins/xe_official/list.html <!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 --> <!--@if($colorset=="black")--> <!--%import("css/black.css")--> <!--@else--> <!--%import("css/white.css")--> <!--@end--> <b class="rtop_{$colorset}"><b class="r1_{$colorset}">1</b><b class="r2_{$colorset}">2</b><b class="r3_{$colorset}">3</b><b class="r4_{$colorset}">4</b></b> <div class="box_{$colorset}"> <div class="top"> <!--@if($widget_info->title)--> <h2>{$widget_info->title}</h2> <!--@end--> </div> <div class="board"> <ul> <!--@foreach($widget_info->document_list as $oDocument)--> <li> <span class="date">{$oDocument->getRegdate("Y-m-d")}</span> <span class="title"> <a href="./{$oDocument->getPermanentUrl()}#{$oDocument->getCommentCount()}">{$oDocument->getTitle($widget_info->subject_cut_size)}</a> <!--@if($oDocument->getCommentCount())--> <span class="comment">[<a href="./{$oDocument->getPermanentUrl()}#comment">{$oDocument->getCommentCount()}</a>]</span> <!--@end--> {$oDocument->printExtraImages($widget_info->duration_new)} <!--@if($widget_info->display_author == 'Y')--> <span class="author">{$oDocument->getNickName()}</span> <!--@end--> </span> </li> <!--@end--> </ul> <!--@if($widget_info->title && $widget_info->module_name)--> <a href="./{getUrl(",'mid',$widget_info->module_name)}" class="more">more</a> <!--@end--> </div> </div> <b class="rbottom_{$colorset}"><b class="r5_{$colorset}">5</b><b class="r6_{$colorset}">6</b><b class="r7_{$colorset}">7</b><b class="r8_{$colorset}">8</b></b> 빨간색 부분을 추가합니다. 간단히 설명 드리자면 a, 위에 있는 것이 상단 라운드이며 아래에 있는 것이 하단 라운드입니다. b, _{$colorset}것 추가한 이유는 이미지게시판의 경우 css에서 class이름이 동일한 경우 2개의 색이 다른 게시판을 생성시 상하단의 색이 한가지만 나타나는 것을 막기 위함입니다. c, 상단과 하단의 숫자(r1,r5)를 달리한 것은 혹시나 상단과 하단의 색이 다른 경우를 대비한 것입니다. 2. /zbxe/widgets/newest_document/skins/xe_official/css/white.css .rtop_white, .rbottom_white{display:block;} .rtop_white *, .rbottom_white *{display:block; height:1px; overflow:hidden;} .r1_white{margin:0 5px; background:#f60;} .r2_white{margin:0 3px; border-left:2px solid #f60; border-right:2px solid #f60; background:#f60;} .r3_white{margin:0 2px; border-left:1px solid #f60; border-right:1px solid #f60; background:#f60;} .r4_white{margin:0 1px; height:2px; border-left:1px solid #f60; border-right:1px solid #f60; background:#f60;} .r5_white{margin:0 1px; height:2px; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3; background:#fff;} .r6_white{margin:0 2px; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3; background:#fff;} .r7_white{margin:0 3px; border-left:2px solid #e3e3e3; border-right:2px solid #e3e3e3; background:#fff;} .r8_white{margin:0 5px; background:#e3e3e3;} .box_white { overflow:hidden; display:block; position:relative; } .box_white .top { width:100%; overflow:hidden; position:relative; } .box_white .top h2{ margin:0; padding:5px 10px; border-left:#f60 solid 1px; border-right:#f60 solid 1px; background:#f60; font-size:12px; color:#fff; } .box_white .board ul { margin:0; padding:10px 10px 5px 10px; border-left:#e3e3e3 solid 1px; border-right:#e3e3e3 solid 1px; background:#fff; } .box_white .board ul li { height:20px; background:url(../images/white/bulletD0.gif) no-repeat left 8px; padding-left:10px; overflow:hidden; list-style:none; white-space:nowrap;} .box_white .board ul li .title a { color:#555555; text-decoration:none; } .box_white .board ul li .title a:hover { text-decoration:underline; } .box_white .board ul li .title span.comment { color:#FE6700; font:.9em Tahoma; } .box_white .board ul li .title span.comment a { color:#FE6700; font:.9em Tahoma; } .box_white .board ul li .title span.author { color:#C0C0C0; font:.9em seevaa9; } .box_white .board ul li .date { color:#999999; font:.8em Tahoma; white-space:nowrap; margin-right:5px;} .box_white .board .more { position:absolute; top:8px; right:10px; color:#fff; font:.8em Tahoma;} .box_white .board a.more { text-decoration:none;} .box_white .board a.more:hover { text-decoration:underline;} css상단에 빨간색부분 소스를 추가합니다. white부분은 선택한 칼라에 맞추어 바꾸어 주면 됩니다. 이 부분도 간단히 설명드리면 a, margin 부분이 라운드의 핵심입니다. 양옆의 길이를 달리하여 차츰차츰 줄어들거나 늘어나게 만들어 라운드를 형성하게 하는 것입니다. b. solid 부분이 모서리의 색상 c, background부분이 라인의 색샹입니다. 자신이 원하는 색상을 기입하면 됩니다. 위와 같이 위아래의 라운드를 만들고 스킨 몸체의 테두리를 만들어 주면 라운드보드가 만들어 지는 것입니다. 제로보드의 모든 스킨에 쉽게 응용 하실 수 있을 것입니다. 이렇게 설명해도 어려우신 분은 제가 만든 MH최근글멀티스킨을 사용하시면 됩니다. https://moonhouse.co.kr/zbxe/153046 위의 소스로 만들어진 최근글위젯입니다.

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

게시판 제목 종료일 위치 글쓴이 날짜 조회수 지도
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

 

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