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 - 웹진스킨 - LightBox
Xpressengine of Moonhouse　>

만들기 쉬운 플래시앨범 file
플래시로 잘 만든 무료앨범 프로그램입니다. 업로드시 여러파일 한번에 업로드가능하고요, 옵션에 자동 리사이즈기능도 들어 있습니다. 다운 및 설명보러가기
Board 나의 RM Category Tip 2008.05.25 팔공산 R 18386 C 12
최근게시물에 내용과 댓글을 동시에 출력하기 file
이 팁도 블루게이트님이 알려주신 소스입니다. 블루게이트님 http://www.bluegate.kr/에게 감사의 말씀을 드립니다. 제가 블루게이트님에게 문의하여서 답변을 받아서 허락하에 이렇게 팁으로 올립니다. 원본내용보기 zbxe/widgets / newest_document / skins / xe_official / list.html 파일을 편집기로 열어서 24줄과 25줄사이에 {$oDocument->printExtraImages($widget_info->duration_new)} </span> </li> {@ $comment_list = $oDocument->getComments()} <!--@ foreach($comment_list as $val)--> <li class="com"><a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}">▸ {$val->getSummary($widget_info->subject_cut_size)}</a></li> <!--@ end--> <!--@end--> 빨간색부분의 내용을 추가해 주세요. white.css파일을 편집기로 열어서 아래부분을 추가해 주세요. .latest_white .com { padding-left:30px; } .latest_white .com a { text-decoration:none; color:#808080; font:.9em Tahoma; } .latest_white .com a:hover { text-decoration:none; color:#00C462; font:.9em Tahoma; } 위의 이미지가 내용글밑에 댓글이 구현되는 화면입니다. 적용된 페이지보기 p.s 댓글의 목록수를 조절 할 수 있어면 좋겠는데 저의 실력으로 이래저래 해 봐도 안되네요.
Board 나의 RM Category Tip 2008.05.22 팔공산 R 4633
위젯 뼈대 만들기 list.html안을 들여다 봅니다.
위젯만들기 3탄이라고 해야하나. 이번에는 위젯의 뼈대가 되는 list.html과 css 대하여 내가 알고 있는 내용을 이야기 해 볼까 합니다. 처음부터 이야기했지만 저는 함수나 소스의 생성에 대해서는 잘 모릅니다. 그저 이 위젯, 저 위젯 만지다 보니 조립하는 정도의 실력이라고 밝히며 이 글을 시작하므로 큰 기대나 어려운 질문은 삼가해 주세요. 그럼 list.html과 white.css를 한 단락씩 끊어서 보겠습니다. newest_document의 xe_official스킨을 일단 예로 설명을 해 봅니다. 1. 칼라선택부분 <!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 --> <!--@if($colorset=="black")--> <!--%import("css/black.css")--> <!--@else--> <!--%import("css/white.css")--> <!--@end--> // white칼라를 선택해서 white.css를 불러오던지, black칼라를 선택해서 black.css를 불러옵니다. 한개의 칼라만 만들어져 있다면(카멜레온스킨처럼) 아래와 같이 작성하면 됩니다. <!--@if($colorset=="normal"||!$colorset)--> <!--%import("css/normal.css")--> <!--@end--> 2. 위젯의 타이틀부분 <div class="latest_{$colorset}"> // 가 <!--@if($widget_info->title)--> <h2>{$widget_info->title}</h2> // 나 <!--@end--> .latest_white { width:100%; padding-bottom:15px; overflow:hidden; position:relative;} // A .latest_white h2 { margin:0; 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;} // B // 가. latest_{$colorset} - 위젯의 큰테두리를 설정합니다. 여러 위젯들이 한페이지에 구현될때 이곳의 이름이 같으면 서로 충돌이 일으나므로 각 위젯별로 이름을 다르게 하는 것이 포인트입니다. 예를 들면 moon_{$colorset}이렇게 표현해 주면 됩니다. 여기서 {$colorset}은 1번 칼라선택부분에서 선택한 칼라가 입력되는 부분입니다. // A부분이 가부분의 css부분입니다. .latest_white과 latest큰테두리의 white칼라의 속성을 나타냅니다. [속성설명] padding-bottom:15px - 위젯의 아래에 15px의 공간을 둔다.(위젯과 위젯을 띄우는 역활을 합니다.) overflow:hidden - 정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다. position - 박스가 화면에서 어떻게 나타나고 그 위치를 지정하는 방법을 정하는 속성 relative(고정) absolute(좌표 따라 화면 이동) 글을 작성해 나가다 보니 어느정도의 지식을 가지고 있는 부류에 맞추어서 작성해야 할지 애매해 지는군요. 초급에 맞출려니 글이 너무 길어지는 것 같고, 중급정도에 맞출려니 글 적는 의미가 별로 없어지는 것 같고... 일단은 초급정도에 맞추어서 작성해 나가고 있는데 글 작성하기가 조금 힘드네요. 휴~~~ 조금씩 조금씩 작성해 나갈 생각이니 성질 급하신 분들은 양해 바랍니다. to be continue.....
Board 나의 RM Category Tip 2008.05.22 팔공산 R 12843 C 3

My Xe - FirstThumb 스킨
Xe of Moonhouse　>

profile
팔공산
Jan 27 2013
Sub위젯영역에 마우스Over시 둥근테두리 나타내기(익스8이하 에선 안 됨) file
위의 이미지에서 트리메뉴아래 위젯란에 마우스를 오버시키면 푸른색둥근 테두리가 보입니다. 스케치북레이아웃에 적용된 기능인데 익스8이하에서는 보이질 않고 크롬이나 파이어폭스에서는 보입니다. 적용방법은 일단 적용할 레이아웃의 Sub부분에 추가할 위젯영역을 만들어야겠죠. <div style="dispaly : inline-block;*dispaly:inline;*zoom:1;" id="aside"> <div class="section widget">{$layout_info->widget}</div> <div class="section banner">{$layout_info->banner}</div> </div> 위와 같이 위젯영역과 베너영역 2개를 만들었습니다. 그럼 css처리로 푸른색둥근 테두리처리를 해야합니다. #aside .section{ position:relative; float:left; width:190px; margin-bottom:5px; padding:5px;border-radius:10px;transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s} #aside .section:hover{ z-index:10; background:transparent; -webkit-box-shadow:0 0 10px #39F;box-shadow:0 0 20px #6fa1d9} #aside widget { padding:2px; } #aside banner { padding:2px; } 위와 같이 css를 적용하면 됩니다. 참고로 굵은색 부분이 바탕색 그림자색 조절입니다.
profile
팔공산
Jul 15 2011
메뉴바에 토글메뉴 추가하기 file
오랜만에 제 홈피에 글을 남겨봅니다. 제티스님의 요청으로 ( https://moonhouse.co.kr/297897 ) 기본 메뉴바 옆에 따로 토글메뉴를 추가해서 사이트맵이나 지정 위젯을 나타나게 하는 팁입니다. 1. 사용중인 레이아웃의 info.xml에 아래의 코드를 추가해 줍니다. <var name="toggle" type="select"> <title xml:lang="ko">★토글 사용 여부</title> <title xml:lang="en">★토글 사용 여부</title> <description xml:lang="ko">토글기능의 표시를 결정하세요.</description> <description xml:lang="en">토글기능의 표시를 결정하세요.</description> <options value="Y"> <title xml:lang="ko">표시</title> <title xml:lang="en">표시</title> </options> <options value="N"> <title xml:lang="ko">표시안함</title> <title xml:lang="en">표시안함</title> </options> </var> <var name="sitemap" type="select"> <title xml:lang="ko"> ┖ 토글기능 내용</title> <title xml:lang="en"> ┖ 토글기능 내용</title> <description xml:lang="ko">토글안에 내용 결정하세요.</description> <description xml:lang="en">토글안에 내용 결정하세요.</description> <options value="Y"> <title xml:lang="ko">사이트맵</title> <title xml:lang="en">사이트맵</title> </options> <options value="N"> <title xml:lang="ko">위젯</title> <title xml:lang="en">위젯</title> </options> </var> <var name="toggle_widget" type="textarea"> <title xml:lang="ko"> ┖ 토글안 위젯코드</title> <title xml:lang="en"> ┖ 토글안 위젯코드</title> <description xml:lang="ko">토글안에 들어갈 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요) </description> <description xml:lang="en">토글안에 들어갈 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요) </description> </var> 2. layout.html 파일안에 아래의 코드를 추가해 줍니다. <!--토글메뉴--> <!--@if($layout_info->toggle == 'Y')--> <!--%import("js/toggle.js")--> <div id="toggle" style="left:{$layout_info->bodyWrap_width-120}px;"> <!--@if($layout_info->sitemap == 'Y')--> <div id="sitemap_icon" class="iePngFix"></div> <div id="sitemap"> <div class="extension"> <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> <div class="section"> <h2><a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->> {$val['text']} </a></h2> <!--@if($val['list'])--> <ul> <!--@foreach($val['list'] as $k => $v)--> <!--@if($v['link'])--> <li><a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li> <!--@end--> <!--@end--> </ul> <!--@end--> </div> <!--@end--> <!--@end--> </div> </div> <!--@else--> <div id="widget_icon" class="iePngFix"></div> <div id="toggle_widget"> <div class="extension"> {$layout_info->toggle_widget} </div> </div> <!--@end--> </div> <!--@end--> 3. 해당 css파일안에 아래의 코드를 추가해 줍니다. /* Toggle_Sitemap */ #toggle { position:absolute; top:132px; z-index:90;} #sitemap_icon { position:relative; width:106px; height:16px; padding:0; background:url(../images/common/sitemap_icon.png) no-repeat; background-position:left 0px; cursor:pointer; } #sitemap { position:absolute; width:670px; height:auto; background:url(../images/common/sitemap_bg_top.png) no-repeat; top:20px; right:-10px; display:none; padding:29px 0px 0px 0px; border:0px solid #ffffff; z-index:9; } #sitemap a { text-decoration:none; } #sitemap a:hover, #sitemap a:active, #sitemap a:focus{ color:#ff6600; } #sitemap .extension { *zoom:1; padding:5px 0; background-color:#999; margin-bottom:0px; border:2px solid #000; z-index:9; } #sitemap .extension:after { content:""; display:block; clear:both; } #sitemap .extension .section { float:left; width:150px; margin-bottom:20px; padding:0 0 0 10px; background:url(../images/common/lineKneeVr.gif) repeat-y 0 0; } #sitemap .extension .section h2 { font-size:12px; margin:0 0 10px 0; } #sitemap .extension .section h2 a { padding:5px 10px 0 0px; color:#555; } #sitemap .extension .section h2 a:hover, #sitemap .extension .section h2 a:active, #sitemap .extension .section h2 a:focus{ padding:5px 10px 0 10px;background-color:#fff; color:#555;} #sitemap .extension .section a { color:#ddd; } #sitemap .extension .section a:hover, #sitemap .extension .section a:active, #sitemap .extension .section a:focus{ color:#fff; } #sitemap .extension .section ul { margin:0; padding:0; list-style:none; } #sitemap .extension .section li { margin-bottom:6px; } /* Toggle_Widget */ #widget_icon { position:relative; width:106px; height:16px; padding:0; background:url(../images/common/more_icon.png) no-repeat; background-position:left 0px; cursor:pointer; } #toggle_widget { position:absolute; width:500px; height:auto; background:url(../images/common/togglewidget_bg_top.png) no-repeat; top:20px; right:-10px; display:none; padding:29px 0px 0px 0px; border:0px solid #ffffff; z-index:99; } #toggle_widget a { text-decoration:none; } #toggle_widget a:hover, #toggle_widget a:active, #toggle_widget a:focus{ color:#ff6600; } #toggle_widget .extension { *zoom:1; padding:0; background-color:#F6F6F6; margin-bottom:0px; border:2px solid #000; } #toggle_widget .extension:after { content:""; display:block; clear:both; } #toggle_widget .extension .section { float:left; width:150px; margin:0; padding:0 0 0 10px; border-left:1px dotted #a98a60; } #toggle_widget .extension .section h2 { font-size:12px; margin:0 0 10px 0; } #toggle_widget .extension .section h2 a { padding:5px 10px 0 10px; background-color:#000; color:#fff; } #toggle_widget .extension .section h2 a:hover, #toggle_widget .extension .section h2 a:active, #toggle_widget .extension .section h2 a:focus{ background-color:#fff; color:#a98a60;} #toggle_widget .extension .section a { color:#7B7B7B; } #toggle_widget .extension .section a:hover, #toggle_widget .extension .section a:active, #toggle_widget .extension .section a:focus{ color:#ff6600; } #toggle_widget .extension .section ul { margin:0; padding:0; list-style:none; } #toggle_widget .extension .section li { margin-bottom:6px; } 위의 부분에서 top:132px 의 수치를 알맞게 조절하시면 되고 해당 이미지들은 자신의 사이트에 맞게끔 제작하시면 됩니다. 마지막으로 toggle.js 파일을 내려 받아서 js폴더에 넣어시면 됩니다. 챀고로 레이아웃설정에서 "토글기능내용" 중에서 "사이트맵"을 선택하시면 자동으로 자신의 메뉴들이 보여집니다. 그리고 "위젯"을 선택하셨다면 아래 "토글안 위젯코드"에 자신이 넣고 싶은 위젯코드를 추출해서 넣어 주시면 됩니다.

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

게시판 제목 종료일 위치 글쓴이 날짜 조회수 지도
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 RM 팁 3 squarenet.kr에서 제공하는 cPanel 무료 웹서브 세팅 따라하기 file
　┖ 수고많았습니다 이글을 읽고 그대로 실행하여 닷홈에 있던 복구 파일을 올리고 복구를 ... 로진
　┖ 접속해 보니 여기까지 이렇게 설치페이지는 나오는데 css부분이 없는 것 같네요. 아마 ... 팔공산
　┖ 감사합니다 원래 의도한 닷홈 계정 복구는 포기하고 xe 1.9..3 설치를 마쳤습니다 수고... 로진
팔공산 2018.01.15 980
2,560 QNA 3 졸졸이와 배경슬라이더 분리 방법 문의드립니다. file
　┖ 먼저 섹시버턴은 일반게시판의 버턴을 바꾸는 것이 아니라 개발자나 소스코드를 변경할... 팔공산
　┖ 역시!! 그랬군요. 제가 하기에는 무리가 있었네요. ㅎㅎ 초보의 길이란.. 그럼 졸졸이... 독도사랑
　┖ 한개의 레이아웃스킨이라도 여러가지 설정으로 다수의 레이아웃을 만들수 있습니다. 팔공산
독도사랑 2017.04.03 1,212
2,559 QNA 3 몇가지 문의 드립니다. file
　┖ 서브메뉴의 넓이 조절은 성공했습니다. ^^ 개발하는 분들 정말 대단하십니다. 독도사랑
　┖ 크롬이나 엣지에서는 아이콘이 보인다는 것은 폰트어썸이 정상적으로 작동을 하고 있다... 팔공산
　┖ 네~ 기본 레이아웃을 어느 정도 완료하면 가르침 받겠습니다. 익스플로러의 문제인지 ... 독도사랑
독도사랑 2017.03.31 952
2,558 RM 팁 3 "중고장터 모듈 마켓플레이스" 약간 수정 file
　┖ 안녕하세요. 찾아 헤메다 여기까지 와서 문의 드려봅니다. 혹시 본문 수정이 안되는데 ... 매냐
　┖ https://moonhouse.co.kr/qa/444227 댓글이 제가 답해 드릴 수 있는 최선입니다. 팔공산
　┖ 여기저기 헤메다 보니 원래 이미지는 변경이 안되는 거 같더라구요. 답변 감사합니다. ... 매냐
팔공산 2015.02.10 2,590
2,557 Free 3 안녕하세요
　┖ 페이지마다 스킨을 다르게 설정해놓으신건가요? 아니면 자동으로 바뀌게 해놓으신건가... 꿀요쿠르
　┖ 반갑습니다. 오랜만에 답글을 적어보는 것 같군요^.^ 스킨은 큰 메뉴따라서 제가 만든 ... 팔공산
　┖ 답변 감사합니다. 즐거운 주말 되세요! 꿀요쿠르
꿀요쿠르 2014.10.23 6,592

 

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