워드프레스 KBoard 스킨만들기_2

지난 포스트 워드프레스 KBoard 스킨만들기_1 에서는 KBoard게시판에 사용자 항목을 추가하는 방법에 대해서 주로 다루었고,

이번 포스트는 스킨디자인 퍼블리싱에 대해서 다루고자 합니다.

KBoard제작사인 코스코스팜에서 권장하는 방법은 아래와 같습니다.

http://www.cosmosfarm.com/threads/document/12740

(기존 default스킨폴더를 복사한 후 CSS ID와 클래스명을 사용자용으로 변경후(스킨폴더내의 모든파일들-보통7개) 작업하라는 내용 입니다.

저는 위 방법을 따르지 않고, default스킨폴더를 복사후 기존 스타일(CSS의 ID와 클래스명)을 그대로 두고, 사용자가 추가하는 내용만 확장하는 방식으로 작업을 하였습니다. 작업속도와 퀄리티를 위해서 부트스트랩css를 사용하는데 용이한 방법이었습니다.

아래 포스트는 방법론만 있고, 실제 소스는 납품용이기 때문에 제공하지 않습니다.

몇가지 규칙을 세웠습니다.

1. 스킨폴더의 수정한 파일선정: 예를 들면 관리자만 작성하고, 일반사용자는 보기만하는 게시판일경우 리스트,보기,입력/수정화면(list.php, editor.php, document.php)만 수정하면 됩니다.

2. 위 파일 상단에 부트스트랩CSS 및 해당스킨의 전용CSS 로딩 코드삽입 (new1이 새로운 스킨이라고 했을때-아래)

bootstrap2.zip => MIT라이센스 부트스트랩2 기반 메트로UI 버전2 CSS파일 참조 http://metroui.org.ua/ 버전3도 나왔네요^^

추가(아래)
<link href="/bootstrap2/css/metro-bootstrap.css" rel="stylesheet">
<!-- Bootstrap2 Style -->
<link href="<?php echo '/wp-content/plugins/kboard/skin/'.$board->skin.'/'.$board->skin.'.css';?>" rel="stylesheet">
<style>
/* 스타일 내용은 해당스킨폴더(<?php echo $board->skin;?>)의 new1.css 생성함. */
</style>

<div id="kboard-default-list" class="metro"> <!-- 위 수정할 파일3개의 제일 상단 div에 부트스트랩구분용 클래스명 추가 class="metro" -->

3. 해당 스킨폴더에 스킨폴더명과 같은 폴더명.css 에 부트스트랩용 사용자CSS 추가(new1이 새로운 스킨이라고 했을때-아래)

/* 추가된 Bootstrap2 Style 공통-버튼,링크,타이틀 CSS */
.metro a, .metro .link { background-color:#f29a77 !important; }
.metro a.kboard-default-button-small,.metro input.kboard-default-button-small,.metro button.kboard-default-button-small
{ border-radius:10px;background:#f29a77 !important; }
.metro .kboard-search button, .metro .kboard-control button { border-radius:10px;padding:0px 12px; }
.metro .kboard-list-header { text-align:center; margin-bottom:20px; }
.metro .kboard-list-header h2 { color:#d63e2d; }
.metro .kboard-list-header .title_bar
{ background:#d63e2d;display:block;height:4px;padding:0px;width:20px;margin:0 auto; }
.metro .kboard-attr-title input { width:100% !important; }

/* 추가된 Bootstrap2 Style new1전용-리스트,상세보기 CSS */
.metro .table tr:nth-child(odd), .metro .table .pricing-table>li:nth-child(odd), .metro .table .pricing-extra { background:#fff; }
.metro .table.bordered td, .metro .table.bordered th{ border-left:0px; border-bottom:0px }
.metro tr th:first-child, .metro tr td:first-child { border-left-style:none; }
.metro tr th:last-child, .metro tr td:last-child { border-right-style:none; }
.metro tr:first-child th, .metro tr:first-child td { border-top-style:none; }
.metro .roundtable { margin:0 auto; border:2px solid #e1e1e1; border-radius:30px; padding:20px; width:90%;
}
.metro .grid { margin: 0 auto; padding-left:0%;margin-top:20px;width:90%;}
.metro .grid-item { width:100%; border:1px solid #e1e1e1; border-radius:20px; padding:10px;margin-bottom:3%; }
.metro ul, .metro ol {
  padding: 0px 15px;
  list-style: none;
  margin-left:0;
}
.metro ul li {
  margin-left:0;
}
.metro .kboard-list a, .metro .kboard-list .link { color:#000 !important; text-decoration:none; }
.metro .kboard-list a:hover *{ color:#000; }
.metro .kboard-list a:hover div{ font-weight:bold; }
.metro .div-border1{
 text-align:center;
 height:80px;
 width:90%;
 display:table;
 margin:0 auto;
 margin-bottom:20px;
 line-height:20px;
}
.metro .div-border1 div { margin-bottom:10px;border-bottom:1px solid #e1e1e1;display:table-cell;vertical-align:middle;font-size:16px;}
.metro .fg-this { color:#f29a77; }
.metro .subtext { color:#999; margin-left:20px; font-size:14px;}
/* 태블릿 new1전용-리스트,상세보기 반응형CSS */
@media all and (min-width: 768px) {
 .metro .grid{
  width: 90%;
  width:768px;
  max-width:768px;
 }
 .metro .grid-item{
  float:left;
  width:30%;
  margin-left:3%;
 }
}
/* PC용 new1전용-리스트,상세보기 반응형CSS */
@media all and (min-width: 1132px) {
 .metro .grid{
  width: 90%;
  width:1132px;
  max-width:1132px;
 }
 .metro .grid-item{
  float:left;
  width:30%;
  margin-left:3%;
 }
}

bootstrap2.zip

0.77MB