사용자 도구

사이트 도구


도쿠위키_css_설정하기
도쿠위키 css 설정하기

문서의 이전 판입니다!


도쿠위키의 css를 튜닝하여 보기 좋은 나만의 위키를 만들어 보자

위키 문서 본문 설정하기

1. 위치

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

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

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

가 된다.

2. 꾸미기

가. 바디

기본 바탕체는 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;
}

위키 페이지 꾸미기

1. 위치

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

2. 꾸미기

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

.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;}

폰트 변경하기

1. 폰트 업로드 위치

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

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

2. 수정할 파일 위치

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

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

3. 폰트 페이스 설정하기

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

 
@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;
}

4. 각 요소마다 폰트 설정하기

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

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

5. 기존 설명에 대한 의문점

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

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

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

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

로그인하면 댓글을 남길 수 있습니다.

도쿠위키_css_설정하기.1680160857.txt.gz · 마지막으로 수정됨: 2023/03/30 16:20 (바깥 편집)