이 자료실은 공식 자료실에 포함될 예정이며 신규 등록되지 않습니다.
자료를 올려주셨던 분들은 공식 자료실에 다시 올려주시면 매우 감사하겠습니다.
![[레벨:5]](http://www.xpressengine.com/modules/point/icons/default/5.gif "포인트:2810point (56%), 레벨:5/30"){kind=icon}
Hammer| 라이센스 : | 기타 |
|---|---|
| 기타 라이센스 : | Common Creative Korea (게시물 하단 추가 기재) |
| 적용 버전 : | 정식버전(1.0이후) |
| 프로젝트 URL : |
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 컬러셋으로 설정 했을때의 화면입니다. 스크린샷은 영문이지만 설치하면 한국어로 설치 됩니다. 본 레이아웃을 온라인에서 확인해 보시려면 WTA 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 기본 파일에 한줄의 코드만 삽입해 주면 됩니다. 아래의 코드를 지정 된 경로에 삽입하여 수정해 주십시오.
<body onload="HeureCheck()">
두번째로, Hure 디지털 시계는 WG_Layout 폴더 안에 js 폴더 속에 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 파일에서 지우면 됩니다.
<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가 그것입니다.
/* board Information */
.boardInformation { width:100%; clear:both; margin:10px 0 2px 0; overflow:hidden; }
.articleNum { float:left; }
.articleNum span { } /* 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입니다.
![[레벨:3]](http://www.xpressengine.com/modules/point/icons/default/3.gif "포인트:920point (17%), 레벨:3/30"){kind=icon}
맛건빵![[레벨:2]](http://www.xpressengine.com/modules/point/icons/default/2.gif "포인트:360point (0%), 레벨:2/30"){kind=icon}
DreamCube![[레벨:1]](http://www.xpressengine.com/modules/point/icons/default/1.gif "포인트:250point (59%), 레벨:1/30"){kind=icon}
장호영319도대체..
<body onload="HeureCheck()">
이코드를 어디다 입력해야 하죠???
/common/tpl/common_layout.html
요거 드림위버로 불러온담에
<body onload="HeureCheck()"> 이걸 그냥 아무때나 넣어보니 x박이 떠버리내요 ㅜㅜ body 태그안에 넣으라고 했는데 도저히 어디다 넣어야 되는지 모르겠어요 좀알려주세요 -----------------------------------------------------------------------------------------이건 common_layout.html 소스 입니다... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="{Context::getLangType()}" xml:lang="{Context::getLangType()}" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="XpressEngine {__ZBXE_VERSION__}" />
<!--@if($module_info->module)-->
<meta name="module" content="{$module_info->module}" />
<!--@end-->
<!--@if($module_info->skin)-->
<meta name="module_skin" content="{$module_info->skin}" />
<!--@end-->
<!--@if($layout_info->title)-->
<meta name="layout" content="{$layout_info->title} ({$layout_info->layout})" />
<!--@end-->
<!--@if($layout_info->author)-->
<!--@foreach($layout_info->author as $author)-->
<meta name="layout_maker" content="{$author->name} ({$author->homepage})" />
<!--@endforeach-->
<!--@end-->
<meta http-equiv="imagetoolbar" content="no" />
<title>{Context::getBrowserTitle()}</title>
{@ $js_files = Context::getJsFile() }
<!--@foreach($js_files as $key => $js_file)-->
<!--@if($js_file['targetie'])-->
<!--[if {$js_file['targetie']}]>
<!--@end-->
<script type="text/javascript" src="{$js_file['file']}"></script>
<!--@if($js_file['targetie'])-->
<![endif]-->
<!--@end-->
<!--@end-->{@ $css_files = Context::getCssFile() }
<!--@foreach($css_files as $key => $css_file)-->
<!--@if($css_file['targetie'])-->
<!--[if {$css_file['targetie']}]>
<!--@end-->
<link rel="stylesheet" href="{$css_file['file']}" type="text/css" charset="UTF-8" media="{$css_file['media']}" />
<!--@if($css_file['targetie'])-->
<![endif]-->
<!--@end-->
<!--@end-->
<!--@if($rss_url)-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$rss_url}" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="{$atom_url}" />
<!--@end-->
<!--@if($general_rss_url)-->
<link rel="alternate" type="application/rss+xml" title="Site RSS" href="{$general_rss_url}" />
<link rel="alternate" type="application/atom+xml" title="Site Atom" href="{$general_atom_url}" />
<!--@end-->{@ $ssl_actions = Context::getSSLActions() }
<script type="text/javascript">//<![CDATA[
var current_url = "{$current_url}";
var request_uri = "{$request_uri}";
<!--@if($vid)-->var xeVid = "{$vid}";<!--@end-->
var current_mid = "{$mid}";
var waiting_message = "{$lang->msg_call_server}";
var ssl_actions = new Array(<!--@if(count($ssl_actions))-->"{implode('","',$ssl_actions)}"<!--@end-->);
<var'>!--@if(Context::get("_http_port"))-->var http_port = {Context::get("_http_port")};<!--@end-->
<var'>!--@if(Context::get("_https_port"))-->var https_port = {Context::get("_https_port")};<!--@end-->
<!--@if(Context::get("_use_ssl") && Context::get("_use_ssl") == "always")-->var enforce_ssl = true;<!--@end-->
//]]></script> {Context::getHtmlHeader()}</head>
<body{Context::getBodyClass()}>
{Context::getBodyHeader()} {$content} {Context::getHtmlFooter()} <div id="waitingforserverresponse"></div></body>
</html>
