목차

~~Title: Arctic 템플릿 변경 ~~

arctic 변경

글자 크기 변경

폰트 한글 넣기

body {
  font: __font_size__ "Trebuchet MS", "Meiryo", "Mangun Gothic", Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif;
  color: __text__;
  margin: __body_margin__;
  line-height: __line_height__;
  background: __body_background__;
}

code 블럭에 대해서 폰트 크기 변경

/* code blocks by indention */
div.dokuwiki pre.code,
div.dokuwiki pre.file {
  width: auto !important;
  width: 98%;
  font-size: 90%; /* <-- 폰트 크기 추가, 살짝 작게 */
  font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Malgun Gothic", Mono; /* <- 폰트 변경 */
}

목차(TOC) 부분 글꼴 작게

div.dokuwiki ul.toc {
  font-family: "Trebuchet MS", "Dotum", Sans-Serif;
  padding-left: 0.1em;
  font-size:100%;
}

전체 인덱스의 글꼴을 작게

div.dokuwiki div.sidebar_box { /* ... */ }
 
/* or */
 
div.dokuwiki aside.sidebar_box { /* ... */ }

실제 목차 글꼴의 크기를 변경

/* special headlines */
div.dokuwiki h1 {font-size: 145%; font-weight: bold; font-family: "SeoulHangang", NanumMyeongjo, Batang, Serif;}
div.dokuwiki h2 {font-size: 140%; font-weight: bold; font-family: "SeoulHangang", NanumMyeongjo, Batang, Serif;}
div.dokuwiki h3 {font-size: 135%; font-weight: bold; font-family: "SeoulHangang", NanumMyeongjo, Batang, Serif;}
div.dokuwiki h4 {font-size: 130%; font-weight: bold; font-family: "SeoulHangang", NanumMyeongjo, Batang, Serif;}
div.dokuwiki h5 {font-size: 120%; font-weight: bold; font-family: "SeoulHangang", NanumMyeongjo, Batang, Serif;}

목차에서 왼쪽 여백을 제거

/* special headlines */
div.dokuwiki h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
div.dokuwiki h2 {font-size: 150%; margin-left: 0px; font-weight: bold; } /* 20px */
div.dokuwiki h3 {font-size: 140%; margin-left: 0px; font-weight: bold;} /* 40px; border-bottom: none; */
div.dokuwiki h4 {font-size: 120%; margin-left: 0px; font-weight: bold;} /* 60px; border-bottom: none; */
div.dokuwiki h5 {font-size: 100%; margin-left: 0px;  font-weight: bold;} /* 80px; border-bottom: none; */
 
/* indent different sections */
div.dokuwiki div.level1 { margin-left: 3px; }
div.dokuwiki div.level2 { margin-left: 3px; } /* prev 23px; */
div.dokuwiki div.level3 { margin-left: 3px; } /* prev 43px; */
div.dokuwiki div.level4 { margin-left: 3px; } /* prev 63px; */
div.dokuwiki div.level5 { margin-left: 3px; } /* prev 83px; */

상단 배경에 이미지 추가

div.dokuwiki .header {
  height: __header_height__;
  border: 0px solid __border__; /* 1px -> 0px */
  background-color: __header_background__;
  margin-bottom: 0.0em; /* 0.2 -> 0.0 */
/* added two lines */
  background-image: url(images/logo-background.png); 
  background-repeat: no-repeat;
}

헤더 높이를 추가된 배경이미지에 맞춤

[replacements]
...
; __header_height__  = "5em"
__header_height__  = "50px"
...

code coloring 변경하려면

폴더&파일(Geshi 컬러링 정보가 있는 곳) : (wiki 폴더)/lib/styles/screen.css

코드부분 :

.code : 이후의 키워드

또 다른 파일

div.dokuwiki pre.code,
div.dokuwiki pre.file

이 css 태그 부분에 배경색이나 폰트를 결정할 수 있다.

스킨수정 : 130804

arctic_design.css

div#wrapper {
- border comment

arctic_layout.css

div.dokuwiki .pagename {
- font-size : 180 -> 150

div.dokuwiki .bar {
- border-left, border-right 
  add
	
style.ini

__body_background__ : 
	"#f8f8f8" > "#ffffff"

스킨수정 : 140523

상단 TopBar 배경색 변경

<깨진 그림 고치기> ← 이게 뭐징…

fixme

arctic_layout.css

top__bar
  "div.dokuwiki .bar" 에서 배경색상 변경
  background : #f9efe4; ->
    background : #FFDEBA;

Code 배경색과 특정 키워드 색을 더 진하게

style.ini

code tag 영역 배경 색 변경
  __background_other__ 값 변경 (EBFFE7)

H3 제목에도 밑줄 넣기

design.css 파일에서 3번째 제목부터 밑줄을 긋지 않게 되어 있는데, 여기 수정.

이 파일을 arctic_design.css 파일보다 더 늦게 읽어오는 모냥.

/* special headlines */
div.dokuwiki h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
div.dokuwiki h2 {font-size: 150%; margin-left: 20px;}
div.dokuwiki h3 {font-size: 140%; margin-left: 40px; border-bottom: none; font-weight: bold;}
div.dokuwiki h4 {font-size: 120%; margin-left: 60px; border-bottom: none; font-weight: bold;}
div.dokuwiki h5 {font-size: 100%; margin-left: 80px; border-bottom: none; font-weight: bold;}

Tag Cloud

태그의 글꼴 크기를 변경 하려면,

.dokuwiki div.cloud a.cloud1_tag2 { font-size: 8px; color: #F0CED7; }
.dokuwiki div.cloud a.cloud2_tag2 { font-size: 9px; color: #E5AEBC; }
.dokuwiki div.cloud a.cloud3_tag2 { font-size: 10px; color: #DB889D; }
.dokuwiki div.cloud a.cloud4_tag2 { font-size: 11px; color: #C24A68; }
.dokuwiki div.cloud a.cloud5_tag2 { font-size: 12px; color: #9E0028; }

레거시 - 이제는 필요 없음

ACE EDITOR 글자 크기 변경

플러그인의 style.css 파일 변경

/* 원본은 1.2em, 더 작은 글꼴이 필요해서 수정함 */
/* 최신 버젼에서는 폰트 사이즈를 상속 받는 것으로 변경, >> 폰트 크기를 결정하고 폰트도 변경함 */
.ace-doku .ace_editor {
  /*font-size: inherit;*/
  font-size: 0.98em;
  font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Malgun Gothic", Mono;
}

EDITSECTION2 버튼 위치 변경

body div.dokuwiki div.secedit input.button,
body div.dokuwiki div.editbutton_section input.button {
  margin-top: 0.9em; /* 이 부분을 변경해서, 버튼 위치를 변경한다. (-)면 위로 (+)면 아래로.
}

dokumobile 추가

최신버젼의 dokuwiki는 모바일 스킨을 지원하므로, 이 기능은 더 필요 없다.

모바일에서 위키가 제대로 보여지도록 추가한다. 기본 template가 이미 있으므로 이걸로 바꿀 수는 없기 때문에, 약간 코드를 추가 해야 한다.

dokuwiki에서 모바일인 경우를 알아 낼 수 있도록 외부 라이브러리를 추가해야 한다.

  1. 여기에서 http://code.google.com/p/php-mobile-detect/ 추가 모듈 다운로드.
  2. 여기에서 다운 받아서, “{wiki-folder}\conf” 폴더에 복사.
  3. local.protected.php 파일에, (파일을 만들거나) 아래 내용을 넣는다.
    local.php는 설정 화면에서 내용을 바꿔버리므로, local.protected.php에 저장한다.
local.protected.php
include("Mobile_Detect.php");
$mdetect = new Mobile_Detect();
if ($mdetect->isMobile()) {$conf['template']='dokumobile';}

jQuery 플러그인을 켜라고 되어 있는데, arctic-mbo의 인덱스 메뉴와 충돌된다.