웹마스터 팁
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)
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 제로보드 data 디렉토리에 링크방지 걸기..(울트라 허접팁) [5] | 무꾸 | 2003.06.27 |
| 제로보드 data 폴더 일괄적으로 소유권 변경 스크립트 [2] | 라지엘 | 2002.07.01 |
| 한꼬마의 제로보드 활용법 (게시물 추출하기) [4] | 한꼬마 | 2004.02.17 |
| 제로보드 인크루드시 $DOCUMENT_ROOT 참조 [7] | 이경훈 | 2004.01.14 |
| 제로보드회원의 포인트 랭킹 체크하기 sql 정리 [4] | 한꼬마 | 2003.11.26 |
| 한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
| 한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
제로보드회원의 포인트 랭킹 체크하기
[13]
 | 전원주 | 2003.11.15 |
|
제로보드 + MSN 메신저 (작성글에 리플이나 코멘트가 달리면 MSN으로 알려준다?)
[18]
| HungryMania | 2003.08.01 |
| 제로보드 스킨들이 어느 게시판에 쓰이는지 알아보는 소스 [12] | teslaMINT | 2003.02.11 |
| 제로보드식 에러페이지 만들기 [2] | .zeve | 2003.02.04 |
| 제로보드 코멘트 수정 기능 구현!! [13] | teslaMINT | 2003.01.28 |
| 제로보드로 유료 사이트 만들기 (결제 정보 저장) [1] | 한꼬마 | 2002.11.06 |
| 제로보드로 유료 사이트 만들기 (폼만들기) [3] | 한꼬마 | 2002.11.06 |
|
제로보드로 유료 사이트 만들기 (회원 db 수정) 수정 #1
[7]
| 한꼬마 | 2002.10.31 |
| 제로보드로 유료 사이트 만들기 (결제 테이블) [2] | 한꼬마 | 2002.10.30 |
| 제로보드로 유료 사이트 만들기 (서론) [6] | 한꼬마 | 2002.10.28 |
|
php 와 flash 의 연동을 이용한 제로보드 최근글 추출...(소스)
| 주현석 | 2002.06.05 |
|
제로보드 상황판때기(?) 만들기...
[9]
| _a_SPD_a_ | 2002.05.28 |
| 제로보드 분석 -2- [2] | 제키드+_+)/ | 2002.02.22 |
잘 쓰겠습니다.