【DokuWiki】CSSを自分専用にカスタマイズ

スポンサーリンク
728×90 ビッグバナー

DokuWikiの標準テンプレートを編集して、自分専用のCSSを適用する。
標準テンプレート関係のファイルは、lib/tpl/dokuwiki/ のフォルダにある。尚、設定については、参考[1.]を参考にした。

Markdownで書けるWikiを探していた。DokuWikiはプラグインで対応出来るとの事で、使えるようにしたので備忘録を残す。 Dok...

自分専用のCSSを設定する

conf/userstyle.css」に下記のように記述。

$ sudo -u www-data nano /var/www/dokuwiki/conf/userstyle.css
/**
 * css/basic.less
 **/

h1 {
    color: #666;
    font-size: 1.8em;
    margin: 0 0 0.444em;
}
h2 {
    color: white;
    font-size: 1.6em;
    margin: 0 0 0.5em;
    font-weight: normal;
    background-color: #557697;
    padding: 6px 0px 5px 6px;
}
h3 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 0.888em;
    font-weight: normal;
    padding: 5px 0px 5px 6px;
    background-color: #f2f2f2;
    border-left: solid 10px #557697;
    border-top: none;
    border-bottom: none;
    border-right: none;
}
h4 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 1.0em;
    padding: 3px 3px 3px 5px;
    font-weight: normal;
    border-left: none;
    border-top: 3px solid #557697;
    border-bottom: 3px solid #557697;
}
h5 {
    font-size: 1.3em;
    margin: 0 0 1.1428em;
    padding: 3px 3px 3px 5px;
    /*border-bottom: 3px solid #557697;*/
    border-bottom: none;
    border-left: 8px solid #557697;
    font-weight: normal;
}
h6 {
    font-size: .75em;
    margin: 0 0 1.333em;
    border-bottom: dotted 1px #cacaca;
    font-weight: normal;
}

/**
 * css/_links.less
 **/

/* any link to current page */
.dokuwiki span.curid a {
    /*font-weight: bold;*/
    font-weight: normal;
}

/**
 * css/design.less
 **/

#dokuwiki__header {
    padding: 2em 0 1.5em;

    .headings,
    .tools {
        margin-bottom: 0em;
        width: 49%;
    }
}

キャッシュの削除

CSSを変更しただけでは、作成済みの記事はキャッシュが作成されていて変更されない事がある。 その場合は、conf/local.php ファイルをタッチしキャッシュを無効にする。

$ sudo -u www-data touch /var/www/dokuwiki/conf/local.php

補足

  • スマホの画面にも収まるようにbodyの「min-width」指定は無しにした。(標準テンプレートの指定を使う)
  • conf/userstyle.cssファイルがなければ新規に作成する。又、このファイルはバージョンアップ時にも上書きされない。

参照記事

参考

  1. Dokuwiki標準テンプレート
  2. キャッシュ | DokuWiki
  3. DokuWiki テンプレート | DokuWiki
  4. DokuWiki の設定
  5. Bootstrap3
スポンサーリンク
レシポンシブ広告
レシポンシブ広告

シェアする

フォローする