DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


ja:tips:topbar

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

ja:tips:topbar [2012-10-25 18:00] (現在)
125.55.214.60 作成
行 1: 行 1:
 +====== Top Bar ======
  
 +この Wiki の Top Bar はどうやって実現しているかを多くの利用者から質問されます。
 +HTML 直書きですし、このサイト用に特化しているので、ソースコードはほとんどの方には役立たないです。
 +しかし、似たようなことをするのには良い方法です。
 +
 +次の実装では、"topbar" という名前の通常のWikiページを使用します。
 +普通に作成し、簡単な一覧を追加してください。例:
 +
 +<code * topbar.txt>
 +  * [[wp>Interwiki link]]
 +  * {{:wiki:dokuwiki-128.png?nolink&16}} [[wiki:page|Internal page]]
 +  * [[http://example.com/|External link]]
 +  * {{:document.pdf|Some PDF}}
 +  * [[paypal>anika@selfthinker.org|Donate]]
 +</code>
 +
 +動作させるために、自動的に組込まれる2つのファイルが必要です。
 +なければ作成し、既にあればコードを追加してください。
 +例のコードとして、新しいデフォルトのテンプレートを使います。
 +
 +テンプレートのフォルダーにこれを追加します((''footer.html'' の組込みフックについては、
 +大体のテンプレートが対応していますが、未対応の可能性もあります)):
 +
 +<code php ./lib/tpl/dokuwiki/footer.html>
 +<div class="topbar">
 +    <?php tpl_include_page('topbar') /* includes the wiki page "topbar" */ ?>
 +</div>
 +</code>
 +
 +conf フォルダーにこれを追加します:
 +
 +<code css ./conf/userall.css>
 +@media screen {
 +
 +    /* top bar */
 +    .dokuwiki .topbar {
 +        position: absolute;
 +        top: 0;
 +        left: 0;
 +        width: 100%;
 +    }
 +    .dokuwiki .topbar ul {
 +        text-align: center;
 +        max-width: 600px; /* change accordingly */
 +        margin: 0 auto;
 +        padding: 0;
 +        list-style: none;
 +        background-color: __background_alt__;
 +        border: solid __border__;
 +        border-width: 0 1px 1px;
 +        border-bottom-right-radius: 5px;
 +        border-bottom-left-radius: 5px;
 +        box-shadow: 0 1px 2px #999;
 +        overflow: hidden;
 +    }
 +    .dokuwiki .topbar ul li {
 +        margin: 0;
 +        padding: 0 2px;
 +        display: inline-block;
 +        font-size: 85%;
 +    }
 +    .dokuwiki .topbar ul li a {
 +        color: __text__;
 +        display: inline-block;
 +        min-height: 16px; /* make sure icons are not cut off (most icons are 16x16) */
 +    }
 +
 +    /* for IE7 */
 +    *+html .dokuwiki .topbar ul li,
 +    *+html .dokuwiki .topbar ul li a {
 +        display: inline;
 +    }
 +
 +    /* changes specific for the default "dokuwiki" template,
 +       other templates need other changes! */
 +    #dokuwiki__header {
 +        padding-top: 3.5em;
 +    }
 +    #dokuwiki__usertools {
 +        top: 2em;
 +    }
 +
 +    /* IE8 needs this in the default template */
 +    .dokuwiki .topbar ul li img {
 +        max-width: none;
 +    }
 +
 +} /* /@media */
 +
 +
 +/* for screens less than 480px wide */
 +@media only screen and (max-width: 480px) {
 +
 +    /* move topbar back to the bottom */
 +    .dokuwiki .topbar {
 +        position: static;
 +    }
 +
 +    /* un-do the specific template changes */
 +    #dokuwiki__header {
 +        padding-top: 2em;
 +    }
 +    #dokuwiki__usertools {
 +        top: .5em;
 +    }
 +
 +} /* /@media */
 +
 +
 +@media print {
 +
 +    /* don't print the topbar */
 +    .dokuwiki .topbar {
 +        display: none;
 +    }
 +
 +} /* /@media */
 +</code>
 +
 +:!: CSS のコード中には[[ja:template:dokuwiki|DokuWiki テンプレート]]用の特殊な部分があります。
 +違うテンプレートを使う場合は、おそらくそれ用に調整の必要があります。
 +
 +そして、上の例はこんな感じになります: {{:tips:dokuwiki-topbar-tip.png?direct&350}}
ja/tips/topbar.txt · 最終更新: 2012-10-25 18:00 by 125.55.214.60