매뉴얼 - Manual 매뉴얼 위키가 제작되기 이전에 만들어진 스킨에 대한 기존 매뉴얼 게시판입니다.
- Classic Style
- Zine Style
- Gallery Style
- Community Style
- Studio Style
- Blog Style
WTA
Introduction
WTA White Glossary는 WTA 무료 스킨 시리즈 중 하나로서 2008년부터 웹 트랜드로 자리잡은 Glossary Style의 제로보드XE용 레이아웃 스킨입니다. Nintendo 사이트에서 많은 영감을 얻어 제작했으며 푸른색 Glow 메뉴와 심플한 Boxing이 본 레이아웃의 특징입니다.
* 손쉬운 업그레이드와 Style Sheet의 커스터마이징
* 제로보드 XE 공식 스킨을 바탕으로 더욱 다듬어진 깨끗한 코드와 안정성
* Modern한 디자인과 개성
* 레이아웃 구성에 맞춘 여러가지의 모듈과 위젯 스킨의 통합 배포
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를 수정하는 경우에는 추후 업데이트되는 내용이나 새로 배포되는 스킨들과 호환이 되지 않는 문제가 발생하므로 될 수 있으면 그대로 유지하는 것이 좋습니다.
Relation Skins
본 스킨과 관련 있는 기타 스킨은 다음과 같습니다.
* WTA Official Board 게시판 스킨 | 자세한 내용보기
* WTA Official Skin의 Cocoa 컬러셋용 에디터 스킨 | 자세한 내용보기
Update Information
* 2008년 10월 16일 오후 4시 40분 1차 수정 | 자세한 내용보기
* 2008년 10월 15일 오전 9시 45분 최초 등록 됨
License
WTA White Glossary는 Creative Commons 저작자표시-비영리 2.0 대한민국 License입니다.
이 스킨을 사용하고 있는데요 레이아웃 왼쪽 상단에 있는 노란 라벨은 제거하면 안되는건가요?
제거해도 됩니다^^;
시계가 안 움직여요...
설명 읽고 시계 경로 제대로 입력해줬는데도 그러네요. 다른것도 손 봐야하나요?
설명 읽고 시계 경로 제대로 입력해줬는데도 그러네요. 다른것도 손 봐야하나요?
혀니
이 스킨과 WTA_newest_comment 스킨을 같이 사용하면 internal server error가 나네요..
혹시 왜 그런지 알고 계신지요?
혹시 왜 그런지 알고 계신지요?
Glossary 스킨과 WTA의 위젯들은 모두 테스트에 제대로 통과된 스킨들입니다
nrimbo
위 레이아웃을 무료로 쓸 수 있다니 참 감사합니다.
근데 교회에서 레이아웃을 사용하려고 하는데...
아래 부분의 저작권 관련 이미지를 삭제 하고 싶습니다.
만약 비용을 드려야 한다면.. 얼마에 사용할 수 있을까요.
근데 교회에서 레이아웃을 사용하려고 하는데...
아래 부분의 저작권 관련 이미지를 삭제 하고 싶습니다.
만약 비용을 드려야 한다면.. 얼마에 사용할 수 있을까요.
이제 막 제로보드 XE로 갈아탄 초보라서 막막했는데 레이아웃 공개에 감사드립니다. 그런데 샘플 그림처럼 로그인정보가 왼쪽으로 나오게 하려면 프로필 그림이 있는 곳을 수정해야 하는지요?
알려주시면 감사하겠습니다.
알려주시면 감사하겠습니다.
ㅎㅎ 관리자 모드로 가서 레이아웃 수정했습니다.
여기 저기 뒤적 거리니깐 답이 나오긴 나오네요.
레이아웃 잘 사용하도록 하겠습니다.
여기 저기 뒤적 거리니깐 답이 나오긴 나오네요.
레이아웃 잘 사용하도록 하겠습니다.
©2008-2010 Premiumxe, LLC. All Rights Reserved. For a better tomorrow.
- Country Distribution :
- English
- 日本語
