웹마스터 팁
DIV라운드 박스를 제로보드 스킨에 적용하는 방법
2008.04.09 04:01
아래에 있는 느까끼님의 팁을 제로보드에 적용하는 방법입니다. http://www.zeroboard.com/16694989
먼저 적용해 보고자하는 위젯의 스킨을 편집기로 불러온다.
예제로 최근글출력위젯의 xe_official 불러오겠습니다.
1. /zbxe/widgets/newest_document/skins/xe_official/list.html
간단히 설명 드리자면
a, 위에 있는 것이 상단 라운드이며 아래에 있는 것이 하단 라운드입니다.
b, _{$colorset}것 추가한 이유는 이미지게시판의 경우 css에서 class이름이 동일한 경우 2개의 색이 다른 게시판을 생성시 상하단의 색이 한가지만 나타나는 것을 막기 위함입니다.
c, 상단과 하단의 숫자(r1,r5)를 달리한 것은 혹시나 상단과 하단의 색이 다른 경우를 대비한 것입니다.
2. /zbxe/widgets/newest_document/skins/xe_official/css/white.css
이 부분도 간단히 설명드리면
a, margin 부분이 라운드의 핵심입니다. 양옆의 길이를 달리하여 차츰차츰 줄어들거나 늘어나게 만들어 라운드를 형성하게 하는 것입니다.
b. solid 부분이 모서리의 색상
c, background부분이 라인의 색샹입니다. 자신이 원하는 색상을 기입하면 됩니다.
위와 같이 위아래의 라운드를 만들고 스킨 몸체의 테두리를 만들어 주면 라운드보드가 만들어 지는 것입니다.
제로보드의 모든 스킨에 쉽게 응용 하실 수 있을 것입니다.
이렇게 설명해도 어려우신 분은 제가 만든 MH최근글멀티스킨을 사용하시면 됩니다.
http://jcas.co.kr/zbxe/153046
위의 소스로 만들어진 최근글위젯입니다.
먼저 적용해 보고자하는 위젯의 스킨을 편집기로 불러온다.
예제로 최근글출력위젯의 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>
빨간색 부분을 추가합니다.<!--@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부분은 선택한 칼라에 맞추어 바꾸어 주면 됩니다..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://jcas.co.kr/zbxe/153046
위의 소스로 만들어진 최근글위젯입니다.
댓글 4
-
gnee
2008.04.12 00:38
로그인 위젯부분에 적용하고싶은데 어떻게 해야되나요?;ㅠ
-
로그인 위젯 xe_official 을 변형한 것입니다.
참조하세요.
-
떠오르는별
2008.04.12 03:05
팔공산님 감사합니다 ㅎㅎ
.gif)
잘 쓰겠습니다.