wiki:template_수정
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
wiki:template_수정 [2019/01/17 23:17] – 만듦 kieuns | wiki:template_수정 [2024/04/23 22:43] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 1: | 줄 1: | ||
+ | ~~Title: Arctic 템플릿 변경 ~~ | ||
+ | |||
+ | |||
+ | {{section> | ||
+ | |||
+ | |||
+ | ====== arctic 변경 ====== | ||
+ | |||
+ | ===== 글자 크기 변경 ===== | ||
+ | |||
+ | * style.ini : [replacements] -> < | ||
+ | |||
+ | ===== 폰트 한글 넣기 ===== | ||
+ | |||
+ | * arctic_design.css : body { 부분에서 font 설정 부분에 한글 폰트 추가 | ||
+ | |||
+ | <code css> | ||
+ | body { | ||
+ | font: __font_size__ " | ||
+ | color: __text__; | ||
+ | margin: __body_margin__; | ||
+ | line-height: | ||
+ | background: __body_background__; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== code 블럭에 대해서 폰트 크기 변경 ===== | ||
+ | |||
+ | * arctic_design.css 파일 내용 변경 | ||
+ | * arctic_design.css 파일에서 **div.dokuwiki pre.code** 부분을 찾아서 변경 | ||
+ | |||
+ | <code css> | ||
+ | /* code blocks by indention */ | ||
+ | div.dokuwiki pre.code, | ||
+ | div.dokuwiki pre.file { | ||
+ | width: auto !important; | ||
+ | width: 98%; | ||
+ | font-size: 90%; /* <-- 폰트 크기 추가, 살짝 작게 */ | ||
+ | font-family: | ||
+ | } | ||
+ | </ | ||
+ | ===== 목차(TOC) 부분 글꼴 작게 ===== | ||
+ | |||
+ | * arctic_design.css 파일에서 **div.dokuwiki ul.toc {** 부분을 찾아서 | ||
+ | * font-size: | ||
+ | * 80%는 너무 작고, 85%는 조금 큰 느낌. | ||
+ | |||
+ | <code css> | ||
+ | div.dokuwiki ul.toc { | ||
+ | font-family: | ||
+ | padding-left: | ||
+ | font-size: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== 전체 인덱스의 글꼴을 작게 ===== | ||
+ | * 파일 : arctic_design.css | ||
+ | <code css> | ||
+ | div.dokuwiki div.sidebar_box { /* ... */ } | ||
+ | | ||
+ | /* or */ | ||
+ | |||
+ | div.dokuwiki aside.sidebar_box { /* ... */ } | ||
+ | </ | ||
+ | |||
+ | * font-size : 80% 와 같은 적당한 크기로 조절한다. 난 작은걸 원했다. | ||
+ | * 없으면 추가 | ||
+ | |||
+ | =====실제 목차 글꼴의 크기를 변경===== | ||
+ | |||
+ | * arctic_design.css | ||
+ | * 아래에 해당되는 부분을 수정해서 정리한다. (line 194 정도) | ||
+ | * 폰트 변경을 하려는 경우에도 수정 가능 | ||
+ | |||
+ | <code css> | ||
+ | /* special headlines */ | ||
+ | div.dokuwiki h1 {font-size: 145%; font-weight: | ||
+ | div.dokuwiki h2 {font-size: 140%; font-weight: | ||
+ | div.dokuwiki h3 {font-size: 135%; font-weight: | ||
+ | div.dokuwiki h4 {font-size: 130%; font-weight: | ||
+ | div.dokuwiki h5 {font-size: 120%; font-weight: | ||
+ | </ | ||
+ | |||
+ | =====목차에서 왼쪽 여백을 제거===== | ||
+ | |||
+ | * design.css 파일에서 h{1-5} 찾아서 수정 | ||
+ | |||
+ | <code css> | ||
+ | /* special headlines */ | ||
+ | div.dokuwiki h1 {font-size: 160%; margin-left: | ||
+ | div.dokuwiki h2 {font-size: 150%; margin-left: | ||
+ | div.dokuwiki h3 {font-size: 140%; margin-left: | ||
+ | div.dokuwiki h4 {font-size: 120%; margin-left: | ||
+ | div.dokuwiki h5 {font-size: 100%; margin-left: | ||
+ | |||
+ | /* indent different sections */ | ||
+ | div.dokuwiki div.level1 { margin-left: | ||
+ | div.dokuwiki div.level2 { margin-left: | ||
+ | div.dokuwiki div.level3 { margin-left: | ||
+ | div.dokuwiki div.level4 { margin-left: | ||
+ | div.dokuwiki div.level5 { margin-left: | ||
+ | </ | ||
+ | ===== 상단 배경에 이미지 추가 ===== | ||
+ | |||
+ | * arctic_layout.css | ||
+ | |||
+ | <code css> | ||
+ | div.dokuwiki .header { | ||
+ | height: __header_height__; | ||
+ | border: 0px solid __border__; /* 1px -> 0px */ | ||
+ | background-color: | ||
+ | margin-bottom: | ||
+ | /* added two lines */ | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== 헤더 높이를 추가된 배경이미지에 맞춤 ===== | ||
+ | * style.ini | ||
+ | <code css> | ||
+ | [replacements] | ||
+ | ... | ||
+ | ; __header_height__ | ||
+ | __header_height__ | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | ===== code coloring 변경하려면 ===== | ||
+ | |||
+ | 폴더& | ||
+ | |||
+ | 코드부분 : < | ||
+ | |||
+ | 또 다른 파일 | ||
+ | |||
+ | * arctic_design.css | ||
+ | |||
+ | < | ||
+ | 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, | ||
+ | add | ||
+ | |||
+ | style.ini | ||
+ | |||
+ | __body_background__ : | ||
+ | "# | ||
+ | </ | ||
+ | |||
+ | ===== 스킨수정 : 140523 ===== | ||
+ | |||
+ | ==== 상단 TopBar 배경색 변경 ==== | ||
+ | |||
+ | | <깨진 그림 고치기> | ||
+ | |||
+ | {{tag> fixme}} | ||
+ | |||
+ | arctic_layout.css | ||
+ | |||
+ | < | ||
+ | top__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: | ||
+ | div.dokuwiki h2 {font-size: 150%; margin-left: | ||
+ | div.dokuwiki h3 {font-size: 140%; margin-left: | ||
+ | div.dokuwiki h4 {font-size: 120%; margin-left: | ||
+ | div.dokuwiki h5 {font-size: 100%; margin-left: | ||
+ | </ | ||
+ | ====== Tag Cloud ====== | ||
+ | |||
+ | 태그의 글꼴 크기를 변경 하려면, | ||
+ | |||
+ | <code css> | ||
+ | .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 파일 변경 | ||
+ | <code css> | ||
+ | /* 원본은 1.2em, 더 작은 글꼴이 필요해서 수정함 */ | ||
+ | /* 최신 버젼에서는 폰트 사이즈를 상속 받는 것으로 변경, >> 폰트 크기를 결정하고 폰트도 변경함 */ | ||
+ | .ace-doku .ace_editor { | ||
+ | / | ||
+ | font-size: 0.98em; | ||
+ | font-family: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== EDITSECTION2 버튼 위치 변경 ===== | ||
+ | |||
+ | <code css> | ||
+ | body div.dokuwiki div.secedit input.button, | ||
+ | body div.dokuwiki div.editbutton_section input.button { | ||
+ | margin-top: 0.9em; /* 이 부분을 변경해서, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== dokumobile 추가 ===== | ||
+ | |||
+ | < | ||
+ | 최신버젼의 dokuwiki는 모바일 스킨을 지원하므로, | ||
+ | </ | ||
+ | |||
+ | * http:// | ||
+ | |||
+ | 모바일에서 위키가 제대로 보여지도록 추가한다. 기본 template가 이미 있으므로 이걸로 바꿀 수는 없기 때문에, 약간 코드를 추가 해야 한다. | ||
+ | |||
+ | dokuwiki에서 모바일인 경우를 알아 낼 수 있도록 외부 라이브러리를 추가해야 한다. | ||
+ | |||
+ | - 여기에서 http:// | ||
+ | - 여기에서 다운 받아서, " | ||
+ | - local.protected.php 파일에, (파일을 만들거나) 아래 내용을 넣는다. \\ local.php는 설정 화면에서 내용을 바꿔버리므로, | ||
+ | |||
+ | <file php local.protected.php> | ||
+ | include(" | ||
+ | $mdetect = new Mobile_Detect(); | ||
+ | if ($mdetect-> | ||
+ | </ | ||
+ | |||
+ | jQuery 플러그인을 켜라고 되어 있는데, arctic-mbo의 인덱스 메뉴와 충돌된다. | ||
+ | |||