매뉴얼 - Manual 매뉴얼 위키가 제작되기 이전에 만들어진 스킨에 대한 기존 매뉴얼 게시판입니다.
- Classic Style
- Zine Style
- Gallery Style
- Community Style
- Studio Style
- Blog Style
WTA
Introduction
WTA Grunge Paper는 WTA 무료 스킨 시리즈 중 하나로서 2008년 후반부터 CSS 웹 트랜드로 해외에서 많이 사용되는 Grunge 풍의 제로보드XE용 통합 스킨입니다. Slavovia.tv를 Reform 한 스킨으로서 빈티지나 그런지 스타일을 선호하는 분들에게 알맞은 스킨으로서, 블로거에게 가장 추천하고 싶은 WTA 시리즈 스킨입니다. Base는 제로보드XE용 공식 스킨을 바탕으로 CSS Style Sheet만 변경하는 방식의 컬러셋(테마)을 이용했기 때문에 제로보드XE의 패치와도 유연성 있게 업그레이드 할 수 있습니다. 아래는 WTA Grunge Paper 스킨의 장점입니다.
스크린샷은 WTA Grunge Paper 레이아웃과 WTA Official Board의 Grunge Paper 컬러셋으로 설정 했을때의 화면입니다. 스크린샷은 영문이지만 설치하면 한국어로 설치 됩니다.
* 손쉬운 업그레이드와 Style Sheet의 커스터마이징
* 제로보드 XE 공식 스킨을 바탕으로 더욱 다듬어진 깨끗한 코드와 안정성
* 국내 디자인 정서로는 구현하기 힘든 Grunge풍의 독특한 디자인
* 레이아웃 구성에 맞춘 여러가지의 모듈과 위젯 스킨의 통합 배포
Customizing
WTA 시리즈는 레이아웃을 제외한 구성요소들 모두 1개의 단일 코드를 사용하면서 컬러셋 조정을 통해서만 테마를 바꾸게끔 되어 있습니다. 따라서 레이아웃의 CSS 파일을 수정하고 싶은 경우에는 CSS 폴더안의 default.css를 수정하고, 게시판 모듈이나 기타 위젯등의 CSS를 수정하고 싶으신 경우에는 CSS 폴더안의 glossary.css를 수정하면 됩니다. common.css는 될 수 있으면 수정하지 않은 것을 권장합니다. common.css 파일은 앞으로 계속 나올 WTA 시리즈 스킨들과 함께 공통으로 공유하는 부분들이 정의되어 있습니다.
Heure 디지털 시계 Customizing
JavaScript 디지털 시계인 Heure는 현재의 년도/월/일/시간을 출력해 줍니다. WTA의 스킨에 맞는 시계 스킨들을 골라 사용 할 수 있습니다. WTA White Glossary 스킨에는 그에맞는 시계 코드가 이미 삽입되어 있습니다. 디지털 시계를 사용하기 위해서는 제로보드XE 기본 파일에 한줄의 코드만 삽입해 주면 됩니다. 아래의 코드를 지정 된 경로에 삽입하여 수정해 주십시오.
/common/tpl/common_layout.htmlbody 태그에 디지털 시계를 호출하는 onload 추가
<body onload="HeureCheck()">
두번째로, Hure 디지털 시계는 WG_Layout 폴더 안에 js 폴더 속에 JS 파일을 가지고 있습니다. date.js인데, 여기서 변수로 사용되는 이미지들에 대한 경로를 설정해 주어야 합니다.
/zbxe/layouts/WG_Layout/js/date.js
imgSrc = new Array; var imgpath = "/layouts/WG_Layout/images/default/WTA_Clock/black/"; imgSrc[0] = imgpath+'0.gif'; imgSrc[1] = imgpath+'1.gif'; imgSrc[2] = imgpath+'2.gif'; imgSrc[3] = imgpath+'3.gif';
위의 코드에서 2번째 줄에 있는 경로가 현재 루트에서 곧바로 레이아웃 폴더로 찾아 들어가게 되어 있습니다. 제로보드XE를 zbxe나 bbs라는 폴더 안에 설치하고 계신 분들은 이 부분을 변경해 주셔야 합니다. 따라서 만일 자신의 계정에 제로보드XE가 zbxe라는 폴더안에 설치되어 있다면,
var imgpath = "/zbxe/layouts/WG_Layout/images/default/WTA_Clock/black/";
위와같이 되겠습니다.
만일 다른 색상의 디지털 시계를 사용하고자 한다면 layout.html파일을 수정합니다. 아래의 코드를 참조하시기 바랍니다. 디지털 시계의 이미지 파일은 /ZBXE/layouts/WG_Layout/images/default/WTA_Clock/에 각각 색상별로 폴더가 구성되어 있습니다. 변경하고자 하는 컬러셋의 경로로 아래의 코드에서 이미지 경로를 수정하면 됩니다. 또한 시계를 아예 사용하지 않기를 원한다면 아래의 코드를 layout.html 파일에서 지우면 됩니다.
/zbxe/layouts/WG_Layout/layout.html디지털 시계의 이미지 파일명을 바꿔줍니다
<div id="WTA_Clock"> <img alt="timeline" src="./images/default/WTA_Clock/black/timeline.gif" /><br /> <img alt="" src="./images/default/WTA_Clock/black/2.gif" name="annee1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="annee2" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="annee3" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="annee4" /><img alt="" src="./images/default/WTA_Clock/black/blank.gif" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="mois1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="mois2" /><img alt="" src="./images/default/WTA_Clock/black/blank.gif" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="jour1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="jour2" /><img alt="" src="./images/default/WTA_Clock/black/blank.gif" /> <img alt="" src="./images/default/WTA_Clock/black/0.gif" name="heure1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="heure2" /><img alt="" src="./images/default/WTA_Clock/black/dot.gif" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="min1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="min2" /><img alt="" src="./images/default/WTA_Clock/black/dot.gif" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="sec1" /><img alt="" src="./images/default/WTA_Clock/black/0.gif" name="sec2" /> </div><!--WTA_Clock out -->
CSS Style Sheet Customizing
레이아웃을 제외한 모든 WTA 모듈 및 위젯은 컬러셋을 사용하여 스킨을 구분하고 있습니다. CSS 파일은 기본적으로 큰 틀을 이루고 있는 common.css와 특정 컬러셋을 위한 컬러셋 css 파일이 있습니다. White Glossary의 경우에는 glossary.css가 그것입니다.
/ZBXE/modules/board/skins/WTA_board/css/common.csscommon.css는 WTA의 모든 스킨과 공유하는 파일입니다
/* board Information */
.boardInformation { width:100%; clear:both; margin:10px 0 2px 0; overflow:hidden; }
.articleNum { float:left; }
.articleNum span { }/ZBXE/modules/board/skins/WTA_board/css/glossary.cssglossary.css와 같이 스킨명이 붙은 CSS 파일은 스킨 고유의 코드가 정의되어 있습니다
/* board Information */
.boardInformation { color:#666666; border-bottom:2px solid #cacaca; }
.articleNum { font:bold 11px Arial, Helvetica, sans-serif; color: #cacaca; }
.articleNum span { font-size: 13px; font-family: "Trebuchet MS"; font-weight: bold; color: #808080; }위에서 보시는 바와 같이 common.css와 glossary.css는 서로 같은 클래스를 정의하고 있지만 속성값은 서로 나뉘어져 있습니다. common.css에서는 maring이나 padding, 높이와 너비, 정렬위치등과 같이 레이아웃의 틀을 잡는 속성들이 위치하고 있으며 WTA의 스킨들은 이 설정 하에서 제작 됩니다. 반대로 glossary.css에는 컬러, 외곽선, 폰트설정 등 유저의 입맛에 맞게 가장 흔히 바뀌는 부분들을 정의해 놓았기 때문에 이용자들은 이 파일을 수정하여 완전히 다른 스타일의 스킨으로 재탄생 시킬 수 있습니다.
주의 할 점은, common.css를 수정하는 경우에는 추후 업데이트되는 내용이나 새로 배포되는 스킨들과 호환이 되지 않는 문제가 발생하므로 될 수 있으면 그대로 유지하는 것이 좋습니다.
Update Information
* 2008년 10월 16일 오후 5시 20분에 최초 등록License
WTA Grunge Paper는 Creative Commons 저작자표시-비영리 2.0 대한민국 License입니다.
sarichy
IE6를 사용하시나 보군요. 옅은 하늘색으로 보이는 이미지 태그에 class="iePngFix"를 넣으면 PNG 핵이 되면서 문제가 사라집니다. 그리고 무료 배포판은 제작자 로고만 있으면 됩니다
blossom
안녕하세요^^
나눠주신 스킨 잘 쓰구 있는데요. 한 가지 여쭤보려구요.
혹시 메뉴 부분을 경계로, 프레임셋으로 나누는 것은 가능할까요?
상단부터 메뉴까지는 고정해 놓고, 본문이하만 불러오는 식으로요.
메뉴이동시 마다 디지털시계가 매번 새롭게 로딩되지 않아도 되니 좋을 것 같구요.
혹시 곤란한 질문이면 죄송해요. 여러 번 고민한 부분이라 염치 무릎쓰고 여쭤봅니다.
나눠주신 스킨 잘 쓰구 있는데요. 한 가지 여쭤보려구요.
혹시 메뉴 부분을 경계로, 프레임셋으로 나누는 것은 가능할까요?
상단부터 메뉴까지는 고정해 놓고, 본문이하만 불러오는 식으로요.
메뉴이동시 마다 디지털시계가 매번 새롭게 로딩되지 않아도 되니 좋을 것 같구요.
혹시 곤란한 질문이면 죄송해요. 여러 번 고민한 부분이라 염치 무릎쓰고 여쭤봅니다.
어차피 스킨의 응용부분에 대해서는 전적으로 이용하시는 분이 직접 하셔야 합니다^^;
bliss
현화님, 너무 수고로운 작업이 아니라면...
직접 좀 해주실 수는 없을까요? '죽어도 안된다'가 아니라면요.
나름대로 프레임셋으로 나눠보니 화면이 다 깨어지고 난리에요ㅠㅠ
지인의 홈피를 만들어주려고 시작했는데 빼도박도 못하겠어요ㅠㅠ...병 날 것같은@@
저것만 해결되면 만사 OK인데... 염치없는 부탁 다시 한번 부탁볼게요....
직접 좀 해주실 수는 없을까요? '죽어도 안된다'가 아니라면요.
나름대로 프레임셋으로 나눠보니 화면이 다 깨어지고 난리에요ㅠㅠ
지인의 홈피를 만들어주려고 시작했는데 빼도박도 못하겠어요ㅠㅠ...병 날 것같은@@
저것만 해결되면 만사 OK인데... 염치없는 부탁 다시 한번 부탁볼게요....
조모군
안녕하세요 XE로 업그레이드 하다 알게 되어서 이스킨으로 홈페잊를 구성중입니다.
최근글, 최근코멘트(이 두가지는 항상 페이지 하단에 표시되는 내용),겔러리최근글,공지사항 등으로
메인페이지를 구성하고 싶은데요 방법을 못찾아 문의 드립니다.
이 레이아웃은 메인페이지 설정이 불가능한가요? 설정방법이 있다면 설명부탁드립니다.
최근글, 최근코멘트(이 두가지는 항상 페이지 하단에 표시되는 내용),겔러리최근글,공지사항 등으로
메인페이지를 구성하고 싶은데요 방법을 못찾아 문의 드립니다.
이 레이아웃은 메인페이지 설정이 불가능한가요? 설정방법이 있다면 설명부탁드립니다.
©2008-2010 Premiumxe, LLC. All Rights Reserved. For a better tomorrow.
- Country Distribution :
- English
- 日本語
근데 일단 오른쪽 카테고리 밑에 제작자 로고만 그대로 두면 나머진 수정해서 써두 상관없나요 ? 아님 이것두 구매를 해야 하나요 ?
그리고 이상하게 http://www.webtrendawards.com/Board_grunge 여기도 그렇구 제 임시 설치 페이지두 그렇구 옅은 하늘색이 보이거든요... 어떻게 해야 하나요 ??