시작
편집기 창에서 필요 없는 문장 제거
사이드바 배경 이미지 빼기
검색 후보 보여주는 팝업 위치 조정
테이블 안쪽 글자 크기 조정
리스트 위아래 여백을 조정
구글폰트 사용
제목에 다른 폰트 설정
제목에 밑줄 긋기
위키 제목에 그림자 넣기
검색창 변경
배경 변경
sitetool 위치 변경
TOC를 검색창 아래에 두기
목차를 글 위에 배치하기

<title classes #id> dokuwiki_ki 템플릿 수정 </title>

다른 위키 템플릿 수정 목록

다른 위키 템플릿 수정 목록
dokuwiki_ki 템플릿 수정
ARCTIC-MBO 템플릿 수정
mindthedark 템플릿 수정 이력
ARCTIC 템플릿 수정

시작

기본 템플릿^dokuwiki을 복사해서 수정한 이력.

dokuwiki → dokuwiki_ki 이렇게 복사해서 수정 시작함.

편집기 창에서 필요 없는 문장 제거

문서를 편집하고 저장을 누르세요. 위키 구문은 포맷팅 문법를 참조하세요. 문서를 더 좋게 만들 자신이 있을 때에만 편집하세요. 연습을 하고 싶다면 먼저 연습장에 가서 연습하세요.

(↑)이걸 삭제하고 편집기를 좀 더 크게 하려고.

수정할 파일: ./inc/lang/ko/edit.txt

저 파일에서 스트링을 전부 삭제함

사이드바 배경 이미지 빼기

파일 ./css/structure.less, 90 쯤

/* 아래 코드 주석화 */
/* background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0)); */

검색 후보 보여주는 팝업 위치 조정

파일 ./css/contest.less, 202 줄 쯤

.dokuwiki form.search div.ajax_qsearch {
    top: -.35em; /* top: -.35em; */
    font-size: 1em;
    text-overflow: ellipsis;
}

파일 ./css/_search.less, 202 줄 쯤

.dokuwiki form.search {
    div.no {
        position: relative;
    }
 
    /* .JSpopup */
    div.ajax_qsearch {
        position: absolute;
        top: 0;
        /* left: -13.5em; */ /* -( width of #qsearch__in + padding of .ajax_qsearch + a bit more ) */
        width: 12em;
        padding: 0.5em;
        font-size: .9em;
        z-index: 20;
        text-align: left;
        display: none;
 
/* .... */

테이블 안쪽 글자 크기 조정

파일 css/content.less

.dokuwiki table.inline 항목 수정

.dokuwiki table.inline {
    min-width: 50%;
    font-size: inherit; /*새로 추가*/
}

리스트 위아래 여백을 조정

파일 css/content.less 파일 수정

줄 68쯤 부분에

/*____________ lists ____________*/
 
.dokuwiki .page{
    ul li {
      color: @ini_text_alt;
      /* 리스트 위,아래에 살짝 공간을 둔다 */
      margin-top: .4em;
      margin-bottom: .4em;
      /*margin: .4em 1em .4em 0;*/
    }
 
    ol li {
        color: @ini_text_neu;
    }
 
    li .li {
        color: @ini_text;
    }
}

구글폰트 사용

Noto Sans KR 폰트를 추가
구글 웹 한글 폰트

main.php

<head> 영역에 추가할 구글 폰트 추가

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Nanum+Gothic|Do+Hyeon" rel="stylesheet">

basic.less

body에 'Noto Sans KR' 폰트를 추가
body → font 항목에 새 폰트 추가

body {
  /* font: normal 87.5%/1.4 "Malgun Gothic", Arial, sans-serif; original */
  font: normal 87.5%/1.4 'Noto Sans KR', Arial, sans-serif;
  /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
  -webkit-text-size-adjust: 100%;
}

제목에 다른 폰트 설정

파일: css/basic.less
h1 ~ h6 까지 다른 폰트 설정

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 항목 추가 */
  font-family: 'Do Hyeon', Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif;
/* 이하는 그대로 쓰기 */

제목에 밑줄 긋기

파일: design.less
화면 상단, 위키 타이틀의 밑줄 삭제.
위 항목을 설정하면 위키 타이틀에도 밑줄이 나오는데 그걸 삭제한다.

#dokuwiki__header {
  /* 중간 패스 */
  h1 {
    /* 중간 패스 */
    border-bottom: None; /* 밑줄 안보이게 한다 */
/* 이하는 그대로 쓰기 */

위키 제목에 그림자 넣기

design.less

#dokuwiki__header {
    padding: 2em 0 1.5em;
 
    .headings,
    .tools {
        /*margin-bottom: 1.5em;*/ /* 수정:주석化 */
 
/* 나머지 그대로 */
 
	h1 {
        margin: 0;
        font-size: 2.2em;  /* 수정: 크기변경 */
        font-weight: normal;
		border-bottom: None;
		text-shadow: 0 0 5px rgba(0,0,0,0.5);  /* 수정: 그림자추가 */
 
		img {
            float: left;
            /*margin-right: -0.5em;*/ /* 수정:주석化 */
        }
/* 나머지 생략 */

검색창 변경

aside 영역 상단에 서치바 추가

main.php

아래 부분을 찾아서,

<!-- ********** ASIDE ********** -->
<div id="dokuwiki__aside"><div class="pad aside include group">

사이드바 출력하는 윗 부분에 검색창 추가

// sidebar 출력하는 코드는 이거 비슷할 것임
<h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>

추가할 검색창 코드

<!-- SITE TOOLS -->
<div id="dokuwiki_aside_sitetools">
    php tpl_searchform(); ?>
</div>

원래 검색창을 감춘다.

tpl_header.php

tpl_searchform() 함수 실행하는 부분을 찾아서 주석으로.

<!-- SITE TOOLS -->
<div id="dokuwiki__sitetools">
    <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
    <?php /*tpl_searchform();*/ ?> <!-- <- 이 함수 쓰이는 곳을 주석으로 -->

배경 변경

css/basic.less

body {
    color: @ini_text;
    /*background: @ini_background_site url(images/page-gradient.png) top left repeat-x;*/
    background: @ini_background_site url(images/page_bg_white.jpg);

css/structure.less

dokuwiki__aside를 찾는다.

#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: left;
    position: relative;
    display: block;
    /* 아래부분이 추가된것. 흰색을 투명도 그라데이션을 넣는다. */
    background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0));

sitetool 위치 변경

css/design.less

#dokuwiki__sitetools {
    text-align: right;
    /* 아래 2줄 추가 */
    position: relative;
    top: 1em;
/* 이하 생략 */

css/usertools.less

#dokuwiki__usertools를 찾아 수정한다.

#dokuwiki__usertools {
    position: absolute;
    top: 0.5em; 
    /*top: 1.8em;*/ /* 이 숫자를 늘려 아래로 내린다 */
    right: 40px; // pagetool width
    text-align: right;
    width: 100%;
/* 이하 생략 */

TOC를 검색창 아래에 두기

css/content.less

/* sidebar css 속성을 arctic-mbo 에서 가져오기 */
div.dokuwiki div.sidebar_box {
  border: 1px solid #ccc;
  margin-bottom: 0.8em;
  padding: .3em;
  overflow: hidden;
}
 
#dw__toc {
  margin: -0.1em 0em -0.1em 0em;
  /*margin: -1.556em -2em .5em 1.4em;*/
  width: @ini_sidebar_width;
  /*border-left: 1px solid @ini_border;*/
  background: @ini_background;
  color: inherit;
}

main.php

<!-- 아래 부분 코드를 참조해서 넣을 위치를 찾는다 -->
 
<!-- ********** ASIDE ********** -->
<div id="dokuwiki__aside"><div class="pad aside include group">
  <!-- SITE TOOLS -->
  <div id="dokuwiki_aside_sitetools">
    <?php tpl_searchform(); ?>
  </div>
 
  <!-- 아래 줄을 추가한다 -->
  <div class="toc_sidebar sidebar_box"><?php tpl_toc(); ?></div>
 
<!-- 이하 생략 -->

목차를 글 위에 배치하기

./css/content.less 311 줄쯤.
dw__toc로 검색하기 하면 이런 글이 ./css/content.less:311:#dw__toc {

 #dw__toc {
    margin: -0.1em 0em -0.1em 0em;
    /*margin: -1.556em -2em .5em 1.4em;*/
    width: @ini_sidebar_width; => 30%
    /*border-left: 1px solid @ini_border;*/
    /* background: @ini_background; */ /* <- 주석화 */
    background-color: #3333; /* <- 추가한 것 */
    color: inherit;
}

./css/_toc.css 10줄쯤
검색 결과가 ./css/_toc.css:10:#dw__toc {

/* toc container */
#dw__toc {
    /* float: right; */ /* <- 주석화 */
    margin: 0 0 1.4em 1.4em;
    width: 12em;
    background-color: @ini_background_alt;
    color: inherit;
    /* 아래부분을 추가해서 글 위로 배치 */
    position: absolute;
    right: 10px;
    top: 10px;
}

목차 너비 변경하려면, 아래 항목을 찾아서 수정
./style.ini 84줄 쯤, __sidebar_width__

./style.ini:84:__sidebar_width__   = "16em"            ; @ini_sidebar_width