GINS WIKI 긴스 위키

사용자 도구

사이트 도구

현재 위치: 긴스위키 GINS wiki » 위키 내부 » dokuwiki_ki 템플릿 수정
추적: • dokuwiki_ki 템플릿 수정
wiki:template_dokuwiki_수정

목차

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

구글폰트 사용

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
wiki/template_dokuwiki_수정.txt · 마지막으로 수정됨: 2024/05/25 23:35 저자 kieuns