/* 아래 코드 주석화 */
/* 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 폰트**를 추가
* [[https://fonts.google.com/?subset=korean&sort=popularity|구글 웹 한글 폰트]]
**main.php**
* %%%% 영역에 추가할 구글 폰트 추가
**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''
아래 부분을 찾아서,
사이드바 출력하는 윗 부분에 검색창 추가
// sidebar 출력하는 코드는 이거 비슷할 것임
추가할 검색창 코드
php tpl_searchform(); ?>
원래 검색창을 감춘다.
* ''tpl_header.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
====== 목차를 글 위에 배치하기 ======
* ''./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