wgsample.jpg

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()">

만일 다른 색상의 디지털 시계를 사용하고자 한다면 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 컬러셋용 에디터 스킨 | 자세한 내용보기


Attention

등록 한 레이아웃은 2단 구성 레이아웃입니다. 스크린샷의 3단 레이아웃에서 우측 사이드바가 없는 형태입니다. 3단의 경우는 블로그 게시판에 좀 더 어울리기 때문에 추후 따로 배포하겠습니다. 이 레이아웃이 적용 사이트를 보시려면 여기를 클릭해 주세요.


Update Information

    * 2008년 10월 15일 오전 9시 45분 최초 등록 됨
이 게시물을..