위젯 스킨 자료실
![[레벨:4]](./modules/point/icons/default/4.gif "포인트:2025point (90%), 레벨:4/30"){kind=icon}
Hammer| 라이센스 | GPL2 |
|---|---|
| 기타 라이센스 | |
| 적용 버전 | 정식버전(1.0이후) |
1. 소개
* 이 스킨을 위한 전용 레이아웃 및 모듈등은 아래의 링크를 참조하십시오.
http://www.thehammer.co.kr/blog/xesta-vivid-release/
* 하나의 압축 파일에 총 4개의 위젯이 준비되어 있습니다. (최근 게시물, 최근 댓글, 카테고리, 월별 보관함)
* 이 위젯들은 Xesta Vivid 전용으로서, Xesta Vivid 레이아웃과 모듈과 CSS를 공유하는 부분들이 있으므로 다른 레이아웃이나 모듈등에 사용하실때는 본래의 디자인대로 출력되지 않을수도 있습니다.
2. 사용시 유의사항
* 위젯의 경우에는 몇가지의 컬러셋을 추후 제작할 의향이 있으므로 컬러셋 코드는 그대로 두었습니다.
* 각 위젯의 타이틀은 영문으로 넣었을때를 기준으로 타이포 디자인을 했습니다. 한글로 타이틀을 넣으실때는 원하는 서체디자인으로 직접 수정해야 합니다.
3. 설정
*압축을 풀면 총 4개의 디렉토리가 나옵니다. 각각의 디렉토리를 아래의 경로에 맞게 복사하십시오. 아래의 zbxe란 제로보드 XE 폴더를 뜻합니다.
xesta_archive_list : zbxe/widgets/archive_list/skins
xesta_category : zbxe/widgets/category/skins
xesta_recent_post : zbxe/widgets/newest_document/skins
xesta_recent_comment : zbxe/widgets/newest_comment/skins
* 각각의 위젯을 위젯 코드 생성하는 화면에서 코드를 생성한 후, Xesta용 레이아웃 파일인 layout.html을 열어 기존의 코드를 없애고 붙여 넣으십시오.
* 위젯에서 코드를 생성하면 대강 아래와 같은 코드가 생깁니다. 아래의 코드중에서 style="clear:both;" 부분을 삭제하십시오. 가로로 배열되는 Xesta Vivid에서는 삽입되면 안되는 부분입니다. (4개의 위젯 전부 동일하게 수정)
<img width="100%" height="100" src="http://127.0.0.1/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="newest_comment" body="" skin="xesta_recent_comment" colorset="vivid" widget_cache="0" title="Recent Comments" list_count="4" mid_list="test2" widget_sequence="301" />
4. 마무리
* Xesta Vivid 제작현황과 업데이트 및 패치 관련 뉴스는 아래의 링크를 참조하시기 바랍니다.
http://www.thehammer.co.kr/blog/xesta-vivid-release/
* 매일 저녁 8시부터 10시까지는 온라인 작업상 IRC에 접속해 있습니다. Xesta Vivid 스킨에 관한 정보공유겸 대화하시기를 원하시는 분은 제로보드 IRC 서버에 접속하시면 되겠습니다. 접속 방법은 아래의 링크입니다.
http://www.zeroboard.com/forum_irc
* 기타 기존 제로보드 4 스킨 다운로드 링크
- 8tunes Aqua Forum Skin
http://www.zeroboard.com/?mid=zb4_skin_user&search_target=title&search_keyword=aqua&document_srl=1450565
- 8tunes Aqua Training Skin
http://www.zeroboard.com/?mid=zb4_skin_user&search_target=title&search_keyword=aqua&document_srl=1453515
- 8tunes Rediant Satin Forum Skin
http://www.zeroboard.com/?mid=zb4_skin_user&search_target=title&search_keyword=satin&document_srl=1455571
More info The Hammer (8tunes)
![[레벨:3]](./modules/point/icons/default/3.gif "포인트:1210point (84%), 레벨:3/30"){kind=icon}
다이제초코흐음... 맞는지 모르겠지만 일단 아래 최근 게시물과 최근 댓글 해결했습니다..
일단 레이아웃에 첨부된 layout.css 파일에 들어 갑니다..
#footer {
width: 936px;
margin: 0px auto;
padding: 5px 12px 12px 12px;
background: #202020;
color:#999999;
clear:both;
}
.footer_leftcol{
width:195px;
margin-right: 16px;
float:left;
}
.footer_leftcol2{
width:300px;
margin-right: 16px;
float:left;
}
.footer_rightcol {
width:400px;
margin-top: 10px;
float:right;
}
위 코드 중에서 노란색 부분을 삽입 합니다... 뭐 대충..이름 정하시구..(전 숫자2만 붙혔습니다)
가로폭을 300px 로 넣었습니다....대충-,-;;;
그런다음 저장 하시구 ftp를 이용해서 업로드 하세요.,,,
그런다음 레이아웃 편집에 들어 가서
아래부분에서
<div id="footer">
<div class="footer_leftcol">
<!-- 최근 게시물 위젯의 코드를 생성해서 여기에 붙임(Xesta 전용 스킨 추천) -->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="newest_document" body="" skin="xesta_recent_post" colorset="vivid" widget_cache="0" title="최신 글 목록" order_target="list_order" order_type="desc" list_count="" duration_new="200" mid_list="sung01" subject_cut_size="" design_top="" design_middle="" design_bottom="" design_img="" widget_sequence="5201" />
</div>
<div class="footer_leftcol2">
<!-- 최근 코멘트 위젯의 코드를 생성해서 여기에 붙임(Xesta 전용 스킨 추천) -->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="newest_comment" body="" skin="xesta_recent_comment" colorset="vivid" widget_cache="0" title="최신 댓글" list_count="" mid_list="sung02,sung03,sung01" design_top="" design_middle="" design_bottom="" design_img="" widget_sequence="5204" />
</div>
<!-- 화면 최하단 우측 About Us 디자인을 위한 샘플코드입니다(삭제해도 무방) -->
위코드에서 위젯을 생성해서 바꿔 넣으신후 노란색 부분을... 삽입 해주면....
올바르게..... 홈페이지에 보여집니다... 익스7에서만 테스트 했구..잘보이네요..다른건 모르겠네요...
위에 카테고리 등등 위젯도 ...이렇게 설정해서 맞춰야 할듯 하네요
이상입니다 꾸벅....
근데 정말 레이아웃 디자인 좋습니다 잘쓸게요..
![[레벨:2]](./modules/point/icons/default/2.gif "포인트:685point (84%), 레벨:2/30"){kind=icon}
은빛동화근대 카테고리랑 월별 리스트 등은 어떻게 수정해야 할까요??
다이제초코또 임시 수정 들어 갑니다..
카테고리위젯이랑 월별보관위젯 적용법입니다..
레이아웃 편집에서 카테고리랑 월별 리스트 위젯을 일단 삽입한후 (어디 삽입 하는줄 아시죠?)
전 이미 삽입 되어 있는걸 지우고 새로 생성해서 집어 넣었습니다.
<div class="sidebar-half separator">
<!--카테고리위젯-->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" widget="category" body="" skin="xesta_category" colorset="normal" widget_cache="0" mid_list="xesta_test" widget_sequence="205" />
</div>
<div class="sidebar-half">
<!--월별보관위젯-->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="archive_list" body="" skin="xesta_archive_list" colorset="vivid" widget_cache="0" title="월별 보관" mid_list="sung02,sung03,sung01" widget_sequence="5206" />
</div>
위젯 사이에 노란 부분을 집어 넣으시면 됩니다 익스7에서 테스트 했습니다 다른 건 테스트 안해 봤습니다..
맞는지 모르지만 임시수정편 마칩니다-,-;;; 꾸뻑..
![[레벨:1]](./modules/point/icons/default/1.gif "포인트:140point (38%), 레벨:1/30"){kind=icon}
openid.daum.net/conan0420를 만들기로 결심했었는데 이젠 막다른 골목에 다달았습니다. 웹 프로그램은 처음인지라 포샵으로 스샷찍어 컬러값 좌표값 찾아가며
주먹구구식으로 수정하다 급기야 졸도지경에 이르렀습니다. 우측 메뉴 죄다 한줄로 고치고 확장자가 .css / .html인 파일들 찾아가며 저의 스타일대로 꾸며보려고 발버둥을 쳤으나 업데이트 해주신 카테고리위젯/월별위젯/기타 하단 최근코멘트, 문서 ........를 업데이트 하고나니
더이상 제 스타일대로 꾸미고 싶은 생각이 확~~~~~~~~~~~~~~~~~달아 나버렸습니다. 그래서 xe_board에서 제공해주는 대부분의 위젯을
다 걍 지워버렸습니다. 올려주신거 쓸려구 -0-;..........오늘 새벽에는 guestbook 즉 방명록 손대다 올라온 글마다 링크가 걸리는 식으로 마우스포인트를 올리면 색이 변하드라구요 ㅋㅋㅋㅋㅋㅋ 어찌해야 할지 그리고 About Us부분 지우고 나니 그 밑에 css/xtml/sitemap...기타 이부분이 공중부양을 하고 ㅡ,ㅡ;; 게시판도 나름대로 제 스퇄로 고쳐보려고 했으나 역량부족으로 손들었습니다. 가능하면 게시판도 초기화를 해보고 싶은........ㅜㅜ;
이상 신세한탄이였습니다 혹시 구경해보고 싶은 분은 이쪽으로 http://flasher0420.cafe24.com/zbxe ㅡ.ㅡ; 즐거운 새벽되시길.....
Hammer
![[레벨:5]](./modules/point/icons/default/5.gif "포인트:2600point (80%), 레벨:5/30"){kind=icon}
smicohttp://www.multiwindow.com/Korea_Homepage/gold_member
로그인해서 보면 또 정상으로 보입니다.
로그인하면 정상으로 보이고 로그인안한 상태에서 보면 레이아웃이 망가져 버립니다.
Hammerhttp://www.thehammer.co.kr/blog/xesta-vivid-release/
다이제초코흐음... 파이어 폭스에서 박살이 나는게 아니라 ...배경색이...적용이 안되는 문제가 있더군요...
이 문제에 대해서 hammer 님 홈피에 댓글을 달았는데... 담날 보니 제글이 사라져 버렸더군요-,.-
올린걸 확인한것 같은데 ... 등록을 잘못했나-,-;;; 여튼... 이 이쁜 레이아웃이 파이어 폭스에서
구현이 안되길래.. hammer님 홈피에 가니.. 제로님이 이 레이아웃을 사용하시더군요 블로그 용으로
근데 제로님 블로그에는 파이어폭스에서도 구현이 되더군요....
아 고치면 되긴 되는구나 싶어서 ...나름 2시간 동안 코드를 뒤집어 봐서 제 나름 대로 임시 수정 올립니다...
일단은 hammer 님이 수정해서 새로 올리신 css파일을 수정합니다... (hammer님 홈피에서 받으면 됩니다.
압축파일이 xesta_20080410란 이름이더군요) 그리고 제가 위에서 댓글로 위젯 가로정렬 수정도
한상태의 layout.css 파일입니다...자자 서두는 이만하고 layout.css 파일을 열어서 아래코드를 찾아 봅시다..
/* Generic
---------------------------------------------------------------------------------*/
body {
background: #ffffff url(../images/vivid/main-bg.gif);
width: 960px;
margin: 0px auto;
padding: 0;
font-family: 돋움, Verdana, Arial, Helvetica, sans-serif;
font-size : 9pt;
text-align: justify;
color: #000000;
}
#body-container {
width: 960px;
margin: 0px auto;
padding: 0;
color: #666666;
text-align: justify;
float:right;
}
#header {
width: 960px;
margin: 20px 0px 10px 0px;
padding: 0;
float:center;
}
#nav {
width: 936px;
height: 90px;
margin: 0px auto;
padding: 0px 12px 0px 12px;
background:url(../images/vivid/top-bar.png) no-repeat;
float:left;
}
#nav-left {
width: 640px;
margin: 0px auto;
padding:0px;
clear:both;
float:left;
}
#nav-right {
width: 282px;
margin:64px 0px 0px;
padding:0px;
clear:both;
float:right;
}
#wraper {
width:948px;
margin: 0px auto;
padding: 10px 12px 0px 0px;
background: #579ecb url(../images/vivid/top-right.gif) no-repeat center top;
clear:both;
float:left;
}
#leftcol {
width: 620px;
padding: 20px 17px 40px 17px;
background: #ffffff;
float: left;
overflow: hidden;
}
#rightcol {
width: 282px;
float: right;
}
#footer {
width: 936px;
margin: 0px auto;
padding: 5px 12px 12px 12px;
background: #202020;
color:#999999;
clear:both;
float:left;
}
.footer_leftcol{
width:195px;
margin-right: 16px;
float:left;
}
.footer_leftcol2{
width:300px;
margin-right: 16px;
float:left;
}
.footer_rightcol {
width:400px;
margin-top: 10px;
float:right;
}
.footer_rightcol a, .footer_rightcol a:visited {
color:#4E9F9F;
}
.footer_nav {
float:right;
margin: 20px 0px 0px;
padding:0px;
font-size:90%;
}
위에서 노란색부분 삽입 하거나 수정 하시면...
파이어 폭스에서도 제대로 된 레이아웃 상태가 나타납니다.....
엇...그런데 이게시물은 ... 위젯 게시글인데....
뭐.... 레이아웃 설치 하시면 당연히 ... 이 게시글도 보러 오시겠죠..
파이어 폭스에 신경 쓰이신다면.. 수정 한번 해보세요 그럼
이만 꾸벅.
Hammer다이제님 매번 감사합니다 제가 접근성 부분 테스트를 지금 못하고 있어서 항상 걱정이었는데 이렇게 파폭 부분까지 체크해주시다니. 제 블로그에 다이제님 답글은 요 근래 2개는 보이는데 그 전에 올리셨다는것은 정말 온데간데 없네요-0- 저도 댓글 승인 할때보니까 없던것 같았습니다.
일단 이 부분 수정해서 먼저 새로 패칭 할 예정입니다. 정말 감사합니다~
p.s 1 : 제가 이 스킨을 온라인에서 직접 돌리고 있으면 바로바로 문제들을 많이 찾을텐데, 오프라인에서만 작업하니 확실히 결점이 많은것 같습니다.
p.s 2 : 제 블로그에도 이름 다르게 적은 부분도 고치겠습니다 ㅋ
Zerode다이제님~ 저두 위에 있는 코드대로 수정했더니
footer가 위로 붙어버리는데; 파폭에서는 잘보이네여;;
하지만 IE7에서는; footer가 붙어버리는;;;;
어떻게 해야되는지 ㅠ; 요리조리 해보는데 안되네영;
다이제초코그래서 소스를 공개 했는데 익스 6에서 .... footer부분이 상단으로 올라간다고 하더군요-,-;;;;
제 컴터가 익스7이고 노트북도 익스7이라서 6에서 테스트를 못하고 있는 실정입니다-,-;;;;(어이없게-,-)
ie6로 다운 그레이드 하면 컴이 이상해진다는 정보가 들려서 .... 귀찮키도 하고-,-;;
http://soo14.ivyro.net/zbxe/sung00 일단 제 주소입니다-,-;;; 전 안깨지는데 혹시 익스6쓰시는 분들도 확인해주세요..
제가 뭘 빠트려 먹은게 있나-,-;;혹시나 ㅋㅋ
잘 보이시면 제가 첨부 하는 파일을 ...css 폴더에 넣어주세요~~
다이제초코<div id="footer">
<div class="footer_leftcol">
<!-- 최근 게시물 위젯의 코드를 생성해서 여기에 붙임(Xesta 전용 스킨 추천) -->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="newest_document" body="" skin="xesta_recent_post" colorset="vivid" widget_cache="0" title="최신 글 목록" order_target="list_order" order_type="desc" list_count="3" duration_new="200" mid_list="sung01,sung02,sung03" subject_cut_size="" design_top="" design_middle="" design_bottom="" design_img="" widget_sequence="5201" />
</div>
<div class="footer_leftcol2">
<!-- 최근 코멘트 위젯의 코드를 생성해서 여기에 붙임(Xesta 전용 스킨 추천) -->
<img width="100%" height="100" src="http://soo14.ivyro.net/zbxe/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="newest_comment" body="" skin="xesta_recent_comment" colorset="vivid" widget_cache="0" title="최신 댓글" list_count="3" mid_list="sung02,sung03,sung01" design_top="" design_middle="" design_bottom="" design_img="" widget_sequence="5204" />
</div>
<!-- 화면 최하단 우측 About Us 디자인을 위한 샘플코드입니다(삭제해도 무방) -->
<div class="footer_rightcol">
<h5>About</h5>
<p>Welcome to the design blog and <a href="http://www.thehammer.co.kr/blog/category/portfolio/" title="View my portfolio">portfolio</a> of The Hammer Company beautiful and usable CSS websites. Find out more <a href="http://www.thehammer.co.kr/about-us/" title="About me">about us</a> here.</p>
<div class="footer_nav">
<a href="#" class="sitemap-mini" title="Sitemap">Sitemap</a>
<a href="http://jigsaw.w3.org/css-validator/" class="validcss-mini" title="This site is coded with validate CSS">CSS</a>
<a href="http://validator.w3.org/check?uri=referer" class="validhtml-mini" title="This site is W3C complaint">XHTML</a>
<a href="#" class="rss-mini" title="Subscribe my RSS">RSS</a>
</div>
<div class="copyright">© <a href="http://www.thehammer.co.kr/">The Hammer Company</a> 2008</div>
</div>
<div class="copyright">© <a href="http://www.digetchoco.net/">Digetchoco Try Again</a> 2008</div>
</div>
</div>
</div><!-- /footer -->
저도 다운로드가 안되네요 -,.- 그 문제에 푸더 부분의 html 소스입니다-,-;;
전 잘 보이는데 다른분은 위치가 어긋나나 보네요 아....안습 ㅡㅜ ... 김형진님 익스 몇버젼 쓰시죠?
다이제초코뭔가 그속에서 대처 방안이 있을듯... 제가 근떡지게 앉아서 컴터 할시간이 없어서 ..길게 해도 5분정도라=--;;
여튼 화이팅입니다. 전 이제 자로 +_+
Zerode흠;; 저도 김형진님처럼 float:left;를 지워봤었는데
익스7에서 footer가 아래로 내려오긴 하는데 위의 본문일아 푸터부분이 한 15픽셀?쯤 떨어져서 보이네요;
*카멜레온*저도 다이제님이 적어주신대로 수정하니 파이어폭스에서 제대로 나오지만, 익스 7.0 에서는 또 깨져 나옵니다. 형진님 글보고 수정하면 파이어폭스에서는 또 깨져 나옵니다. 헐~~ ㅠㅠ
펜던트저는 layout.html 에서 footer 부분을 body-container 안에 포함시켜서 해결했습니다.
일단 ie6, ie7, 파이어폭스에서는 정상작동 합니다.
다시 코드로 설명드리자면,
<div id="body-container">
어쩌구저쩌구...
<div id="wraper">
어쩌구저쩌구...
</div><!-- /wraper -->
</div><!-- /body-container -->
<div id="footer">
어쩌구저쩌구...
</div><!-- /footer -->
원래는 위에처럼 되어 있는데,,, 이걸 아래처럼 바꿔서 해결했습니다.
<div id="body-container">
어쩌구저쩌구...
<div id="wraper">
어쩌구저쩌구...
</div><!-- /wraper -->
<div id="footer">
어쩌구저쩌구...
</div><!-- /footer -->
</div><!-- /body-container -->
말그대로 꽁수;; 였습니다.
참고로 css 파일은 다이제초코님이 처음에 알려주셨던 방법대로 수정하였습니다.
김형진6731.0.0 업그레이드 이후 레이아웃이 모두 어긋나요.
>>1.0.0 에서 기본 CSS의 변경이 있었습니다.
0.2.9 이전에는 몇가지 속성들에 대해서 기본적으로 margin과 padding을 0으로 강제 적용하고 있었습니다.
이 강제 적용이 스킨을 만들거나 할때 편할 수도 있지만 기본 css의 속성이 변경되어서 글을 작성하거나 스킨을 만들때 의도하지 않은 결과가 나올 수 있어서 정식버전에서는 강제적용을 해제했습니다.
그래서 정식버전에서는 강제적용을 해제하였습니다.
정식 버전 이후 배포되는 스킨은 괜찮지만 그 이전의 스킨을 쓰시는 분은 아래와 같은 방법으로 일단 조치할 수 있습니다.
- 관리자 로그인하여 레이아웃 설정 기능 선택
- 헤더스크립트에 아래와 같이 입력하고 저장
- <style type="text/css">
- * { margin:0; padding:0; }
- </style>
<style type="text/css"> * { margin:0; padding:0; } </style>
위와 같이 하시면 일단은 응급조치는 되구요 정식버전 이후에 새로 나오는 스킨들을 사용하실때 제거하시면 됩니다.
혹시 직접 스킨을 수정하실 분은 다음 부분을 css에서 조절하시면 됩니다.
h1~h6 : margin:0; padding:0;
ul/ol/blockquote/p : margin:0; padding:0
위 태그에 대한 조절만 되면 문제 없을 것입니다
==============================================
이게 자주있는 질문/답변 게시판에 있는것인데 위 2줄 소스가 무슨뜻인지 모르겠어요.
아시는분은 번거러우시겠지만 간단하게라도 설명좀 부탁드립니다.
Wantek혹시 저같은 일이 안 벌어졌으면 해서 댓글 달아봅니다.
설정에 보시면
xesta_archive_list : zbxe/widgets/archive_list/skins
xesta_category : zbxe/widgets/category/skins
xesta_recent_post : zbxe/widgets/newest_document/skins
xesta_recent_comment : zbxe/widgets/newest_comment/skins
이렇게 적여있죠??
하지만 압축을 풀어보시면
xesta_archive_list -> xesta_category -> xesta_recent_post -> xesta_recent_comment
순서가 아니라
xesta_archive_list -> xesta_category -> xesta_recent_comment -> xesta_recent_post
순서로 되어있으니.. 설정만 보고 순서대로 업로드 하지마세요 ㅎㅎ
저는 xesta_recent_comment를 zbxe/widgets/newest_document/skins에 넣었다는...
정말 멋지네요 ..
잘쓰겠습니다.
방금 위젯을 적용 해봤는데 ... 세로로 배열 되는군요....
style="clear:both;" 이부분은 삭제를 했구요... 그래도 배열이 ㄷㄷㄷㄷ