자료실
MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
![[레벨:30]](http://moonhouse.co.kr/xe/modules/point/icons/default/30.gif "포인트:266056point, 레벨:30/30"){kind=icon}
| 자료적용 | Yes |
|---|
예제로 최근글출력위젯의 xe_official 불러오겠습니다.
1. /zbxe/widgets/newest_document/skins/xe_official/list.html
<!--@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; 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;}
이 부분도 간단히 설명드리면
a, margin 부분이 라운드의 핵심입니다. 양옆의 길이를 달리하여 차츰차츰 줄어들거나 늘어나게 만들어 라운드를 형성하게 하는 것입니다.
b. solid 부분이 모서리의 색상
c, background부분이 라인의 색샹입니다. 자신이 원하는 색상을 기입하면 됩니다.
위와 같이 위아래의 라운드를 만들고 스킨 몸체의 테두리를 만들어 주면 라운드보드가 만들어 지는 것입니다.
제로보드의 모든 스킨에 쉽게 응용 하실 수 있을 것입니다.
이렇게 설명해도 어려우신 분은 제가 만든 MH최근글멀티스킨을 사용하시면 됩니다.
http://moonhouse.co.kr/zbxe/153046
위의 소스로 만들어진 최근글위젯입니다.
| 번호 | 제목 | 날짜 | 조회 수 |
|---|---|---|---|
49.
위젯
Div라운드 적용된 MH카멜레온최근댓글(4월13일수정) |
|||
»
Tip
DIV라운드 박스를 스킨에 적용하는 방법 |
|||
|
|||
|
|||
45.
위젯
MH최신글멀티위젯 V1.3(4월5일수정) |
|||
|
|||
43.
Tip
전광판위젯 변형해 보기 |
|||
6
