(root)/lib/tpl/[현재템플릿]/css/basic.less      

예) 만약 현재템플릿이 dokuwiki 개인 템플릿이면,

(root)/lib/tpl/dokuwiki/css/basic.less   

가 된다.

기본 바탕체는 16px 크기에 줄 간격을 200%로 하였다.

body {
    color: @ini_text;
    background: @ini_background_site url(images/page-gradient.png) top left repeat-x;
    margin: 0;
    padding: 0;
}
body {
    font: normal 16px Arial, sans-serif;
    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
    -webkit-text-size-adjust: 100%;
    line-height: 200%;
}

위키 문서 본문의 헤딩은 다음과 같이 하여 박스형에다가 그림자를 주는 방식으로 꾸몄다.

h2 {
    font-size: 1.6em;
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
h3 {
    font-size: 1.4em;
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 12px 8px 12px !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
h4 {
    font-size: 1.2em;
    background: #5B9600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-weight: bold;
    height: 20px;
    line-height: 19px;
    margin: 12px 16px 8px 18px !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

(root)/lib/tpl/[현재템플릿]/css/content.less  

아래처럼 헤딩부분만 바꿔 보았다.

.dokuwiki .page 부분이 위키 페이지에 대한 설정이다.

.dokuwiki .page  h1 {margin-left: 0;     font-size: 2em;
    color: darkgreen;
    margin: 0 0 0.666em; 
    border-color: darkgreen;
    border-bottom: 1rem solid;}
.dokuwiki .page  h2 {margin-left: .666em;}
.dokuwiki .page  h3 {margin-left: 1.776em;}

각 템플릿별로 템플릿의 루트폴더에 올리면 가장 좋다.

(root)/lib/tpl/[현재템플릿]

각 템플릿의 css폴더에서 basic.less 파일을 수정한다.

(root)/lib/tpl/[현재템플릿]/css/basic.less 

다음과 같이 폰트 페이스를 설정했다.

@font-face {
    font-family: 'RIDIBatang'; 
    src: url('RIDIBatang.otf') format('opentype'); 
    font-weight: normal; font-style: normal;
}
 
@font-face {
    font-family: 'Jalpool'; 
    src: url('잘풀리는오늘 MEDIUM.TTF') format('truetype'); 
    font-weight: normal; font-style: normal;
}
 
@font-face {
    font-family: 'JalNan'; 
    src: url('JALNAN.TTF') format('truetype'); 
    font-weight: normal; font-style: normal;
}

각 수정할 요소마다 폰트패밀리를 설정하면 된다. 이를테면 헤딩에 다음과 같이 설정하면 된다.

h2 {
    font-family: 'JalNan';
    font-size: 1.6em;
    < 후략.... >
}

기존의 블로그들을 보면, conf 폴더에 'userstyle.css'를 생성해서 폰트를 설정하라고 안내하고 있다.

예를 들어 이런 블로그가 있으며, 대부분의 한글 문서들은 이 블로그를 따라하고 있다. dokuwiki에서 폰트를 바꿀 수 있다.

그런데 이렇게하면 굳이 템플릿을 만든 이유가 사라져 버린다. 즉, 템플릿의 정합성이 무의미해지는 것이다.

따라서 이런 방법을 난 좋아하지 않는다. 템플릿 내에서 고치는게 타당할 것이다.

design.less에 있다. 따라서

(root)/libe/tpl/(내템플릿)/css/design.less

이다.

header라고 적혀 있는 주석문 아래에 logo 클래스가 있다. 이를 수정하면 된다.

다음과 같이 수정하였다. 각자 알아서 수정해 보자

    .logo {
        margin: 18px 0 !important;
        font-size: 2.2em;
        font-weight: normal;
        line-height: 2;
        height:30px;
        font-family: 'GoryeongStrawberryWeb';
        img {
            float: left;
            margin-right: .5em;
        }
 
        span {
            display: block;
            padding-bottom: 10px;
        }
 
        a {
            text-decoration: none;
            color: #00855b;
            text-shadow: 2px 2px 3px #1f95ad;
            background-color: inherit;
        }
    }

tplheader.php파일이다. 이는 사용하는 템플릿의 루트 파일에 있다.

특별히 건드릴 것은 없으나, 코드를 보면 헤딩1, 즉 h1 태그를 사용한다.

그런데 이렇게 하면 문장 내에서의 h1태그와 로고 모양을 달리하고 싶을 때 상당히 짜증이 난다.

따라서 다음과 같이 수정해 주자.

        <div class="logo"><?php
            // get logo either out of the template images folder or data/media folder
            $logoSize = array();
            $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
 
            // display logo and wiki title in a link to the home page
            tpl_link(
                wl(),
                '<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
                'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
            );
        ?></div>

$logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);

이 코드를 보면 알겠지만, 미디어 관리자에서 루트폴더나, 위키폴더, 혹은 images폴더에 “logo.png”라는 이름으로 그림 파일을 올리면 도쿠위키는 이것을 로고 이미지 파일로 읽는다. 미디어 관리자는 검색 입력창 바로 밑에 있다.

내가 만든 도쿠위키 템플릿 파일이다. 참고하도록 여기에 올린다.

법학위키 템플릿 파일

압축을 풀어서 템플릿 파일 폴더에 넣으면 된다.

페이지 제목을 본문에 삽입하기도 읽어보면 대충 도쿠위키의 구조를 알 수 있을 것이다.