-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2010年06月09日

xpWikiが読み込むCSSのカスタマイズ

[スタイルシートについて] - xpWiki::Dev - XOOPSマニア:参考
xpWikiが読み込むCSSの実体は、
XOOPS_TRUST_PATH/modules/xpwiki/skin/css
ディレクトリにあります。

ページを表示する場合に必ず読み込まれる CSS は main.css (media="all") と main_print.css (media="print") です。

この main.css を上書きするためには、
XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/css ディレクトリに、main.css というファイル名でアップロードします。

さらに、スキンにより上書きすることができます。そのためには、
XOOPS_ROOT_PATH(html側)/modules/[インストールディレクトリ]/skin/[スキン名] ディレクトリに、main.css というファイル名でアップロードします。

まとめると、デフォルトのスキン「default」における main.css の読み込み順は次のようになります。

1. XOOPS_TRUST_PATH/modules/xpwiki/skin/css/main.css
2. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/main.css
3. XOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/default/main.css

 参考にさせていただいた上記引用、1の位置にあるmain.cssを3の位置にコピペしました。
 実際に表示されているブラウザのページで、ページのソースをみると、<div id="xpwiki_body">などという変更したい位置にあるID属性が確認が出来ます。
 CSS呼び込みの上書き(オーバライド)用に用意した
main.cssを開き、これも引用した次の説明を参考に、該当箇所を探し、編集しました。
$class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。(モジュールディレクトリ名が xpwiki ならば、"div.xpwiki_xpwiki")

 ID属性が「xpwiki_body」の場合、次の位置を編集しました。

$class div.body {
    width:700px; ←この部分を記事の表示幅を変更するために追記しました。
    padding:0px;
    margin:0px 0px 0px 0px;
}





posted by hirono at 01:14| Comment(0) | TrackBack(0) | プログラミング
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/38830722

この記事へのトラックバック