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;
}
===== 위키 페이지 꾸미기 =====
{{:contentcss예시.png?400|}}
==== 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'를 생성해서 폰트를 설정하라고 안내하고 있다.
예를 들어 이런 블로그가 있으며, 대부분의 한글 문서들은 이 블로그를 따라하고 있다.
[[https://noexpect.tistory.com/197|dokuwiki에서 폰트를 바꿀 수 있다.]]
그런데 이렇게하면 굳이 템플릿을 만든 이유가 사라져 버린다. 즉, 템플릿의 정합성이 무의미해지는 것이다.
따라서 이런 방법을 난 좋아하지 않는다. 템플릿 내에서 고치는게 타당할 것이다.
===== 로고 이미지와 로고문자 모양 수정 하기 =====
==== 1. css 위치 ====
design.less에 있다. 따라서
(root)/libe/tpl/(내템플릿)/css/design.less
이다.
==== 2. css 수정하기 ====
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;
}
}
==== 3. logo를 출력하는 파일 ====
tplheader.php파일이다. 이는 사용하는 템플릿의 루트 파일에 있다.
특별히 건드릴 것은 없으나, 코드를 보면 헤딩1, 즉 h1 태그를 사용한다.
그런데 이렇게 하면 문장 내에서의 h1태그와 로고 모양을 달리하고 싶을 때 상당히 짜증이 난다.
따라서 다음과 같이 수정해 주자.
'.$conf['title'].'',
'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
);
?>
==== 4. 로고 그림 파일 올리기 ====
$logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
이 코드를 보면 알겠지만, 미디어 관리자에서 루트폴더나, 위키폴더, 혹은 images폴더에 "logo.png"라는 이름으로 그림 파일을 올리면 도쿠위키는 이것을 로고 이미지 파일로 읽는다. 미디어 관리자는 검색 입력창 바로 밑에 있다.
{{:dokuwiki:미디어관리자로고화면고치기.png?600|미디어관리자 로고화면 올리기}}
===== 템플릿 파일 =====
내가 만든 도쿠위키 템플릿 파일이다. 참고하도록 여기에 올린다.
{{ :dokuwiki:lawwiki.zip |법학위키 템플릿 파일}}
압축을 풀어서 템플릿 파일 폴더에 넣으면 된다.
===== 참고 하기 =====
[[dokuwiki:dokuwiki_에서_페이지_제목을_본문에_삽입하기|페이지 제목을 본문에 삽입하기]]도 읽어보면 대충 도쿠위키의 구조를 알 수 있을 것이다.
~~DISCUSSION~~