도쿠위키_css_설정하기
도쿠위키 css 설정하기
문서의 이전 판입니다!
목차
도쿠위키의 css를 튜닝하여 보기 좋은 나만의 위키를 만들어 보자
위키 문서 본문 설정하기
1. 위치
(root)/lib/tpl/[현재템플릿]/css/basic.less
예) 만약 현재템플릿이 dokuwiki 개인 템플릿이면,
(root)/lib/tpl/dokuwiki/css/basic.less
가 된다.
2. 꾸미기
가. 바디
기본 바탕체는 16px 크기에 줄 간격을 200%로 하였다.
body { color: @ini_text; background: @ini_background_site url(images/page-gradient.png) top left repeat-x; margin: 0; padding: 0; } body { font: normal 16px Arial, sans-serif; /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */ -webkit-text-size-adjust: 100%; line-height: 200%; }
나. 헤딩
위키 문서 본문의 헤딩은 다음과 같이 하여 박스형에다가 그림자를 주는 방식으로 꾸몄다.
위키 문서 본문의 경우에는 최상위인 1단계 문단이 h2헤딩부터 시작한다. h1헤딩은 위키 사이트의 제목에 사용되므로 주의를 요한다.
h2 { font-size: 1.6em; background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } h3 { font-size: 1.4em; background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 12px 8px 12px !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } h4 { font-size: 1.2em; background: #5B9600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-weight: bold; height: 20px; line-height: 19px; margin: 12px 16px 8px 18px !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; }
위키 페이지 꾸미기
1. 위치
(root)/lib/tpl/[현재템플릿]/css/content.less
2. 꾸미기
아래처럼 헤딩부분만 바꿔 보았다.
.dokuwiki .page 부분이 위키 페이지에 대한 설정이다.
.dokuwiki .page h1 {margin-left: 0; font-size: 2em; color: darkgreen; margin: 0 0 0.666em; border-color: darkgreen; border-bottom: 1rem solid;} .dokuwiki .page h2 {margin-left: .666em;} .dokuwiki .page h3 {margin-left: 1.776em;}
폰트 변경하기
1. 폰트 업로드 위치
각 템플릿별로 템플릿의 루트폴더에 올리면 가장 좋다.
(root)/lib/tpl/[현재템플릿]
2. 수정할 파일 위치
각 템플릿의 css폴더에서 basic.less 파일을 수정한다.
(root)/lib/tpl/[현재템플릿]/css/basic.less
3. 폰트 페이스 설정하기
다음과 같이 폰트 페이스를 설정했다.
@font-face { font-family: 'RIDIBatang'; src: url('RIDIBatang.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Jalpool'; src: url('잘풀리는오늘 MEDIUM.TTF') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'JalNan'; src: url('JALNAN.TTF') format('truetype'); font-weight: normal; font-style: normal; }
4. 각 요소마다 폰트 설정하기
각 수정할 요소마다 폰트패밀리를 설정하면 된다. 이를테면 헤딩에 다음과 같이 설정하면 된다.
h2 { font-family: 'JalNan'; font-size: 1.6em; < 후략.... > }
도쿠위키_css_설정하기.1677119227.txt.gz · 마지막으로 수정됨: 2023/02/23 11:27 (바깥 편집)
로그인