웹마스터 팁
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)
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
자체 서버에서 제로보드 인스톨하실때 계속 초기화면 가시는 분을 위한 팁!!!
 | ♡바다.. | 2008.10.16 |
| 제로보드(zbxe) 설치 후 로그인 안되는 문제. [3] | sophistlv.myid.net | 2008.10.15 |
| 제로보드XE가입 -> 트랙자동가입 기능 | 개돌 | 2008.10.14 |
| 제로보드XE에 온클럽(onclub) 달기 (UTF-8 문제) | 맛있는고기 | 2008.10.07 |
| VPN 환경에서 제로보드 [4] | superion | 2008.09.26 |
| 제로보드XE 중복설치방법 있나요? [4] | bsy.myid.net | 2008.09.24 |
| 제로보드 첨부파일 [4] | 아싸수리 | 2008.09.19 |
| 제로보드 문자열 정교하게 자르기 [11] | 젝망치 | 2008.08.03 |
| 제로보드XE 설치 완료버튼 누르니까 My sql 관련 내용 나오던데요 [3] | Naver™ | 2008.07.30 |
| 제로보드XE에서 표 쉽게 만드는 방법.. [23] | 청개구리00 | 2008.07.27 |
|
주소창에 보이는 아이콘 넣기..제로보드 XE에서
[2]
| 은바가지 | 2008.07.03 |
| 외부페이지 접근을 제로보드XE를 통해서만 접근을 허용 하고 싶다면 [9] | 임기택924 | 2008.06.03 |
|
제로보드4 스타일 이전글/다음글 구현하기 (라르게덴님 팁 재탕)
[12]
| 老姜君 | 2008.05.30 |
| 제로보드와 플래시 게시판 연동해서 사용하기 [5] | Park Ki-tae | 2008.05.30 |
|
제로보드 XE에서 파비콘(favicon) 만들기
[8]
| tindrum | 2008.05.26 |
| 제로보드에 BGM 달기 (대폭 수정;;) [5] | Dr.Mabin | 2008.04.27 |
| 제로보드XE에 배경음악 달기 [4] | Dr.Mabin | 2008.04.26 |
| 엑소버드 음악 제로보드XE에 구겨넣기... [8] | artlab | 2008.04.17 |
| 제로보드 설치 후 뭘 어떻해야 할지 깜깜할때 | dharma0999 | 2008.04.09 |
|
DIV라운드 박스를 제로보드 스킨에 적용하는 방법
[4]
| 팔공산 | 2008.04.09 |
잘 쓰겠습니다.