hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
[ 自宅サーバーWebRing |ID=54 前後5表示乱移動サイト一覧 ]

TOP » xpwiki » スタイルシートについて » Ver 3.20.1以前

スタイルシートについて anchor.png Edit

このページは、Ver 3.20.1 以前の xpWiki について書かれています。Ver 3.21 以降については「スタイルシートについて」のページをご覧ください。

Page Top

defaltスキンのCSS anchor.png Edit

xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSをXOOPS_TRUST_PATH 側に持っています。ただ、CSSを独自にカスタマイズした場合に、バージョンアップするとカスタマイズした分が元に戻ってしまいます。

それでは具合が悪いので、スタイルシート(CSS)のオーバーライト(上書き)を取り入れています。

まずは、defaultスキンを使っている場合について説明します。

オーバーライトするために修正すべきファイルは、XOOPS_ROOT_PATH/modules/[module_dir]/skin/default/pukiwiki.css.php です。

pukiwiki.css.php は次のような内容になっています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?php
define('_LEGACY_PREVENT_LOAD_CORE_', TRUE); // for XOOPS Cube Legacy
$xoopsOption['nocommon'] = true;
require '../../../../mainfile.php' ;
if( ! defined( 'XOOPS_TRUST_PATH' ) ) die( 'set XOOPS_TRUST_PATH in mainfile.php' ) ;
 
require '../../mytrustdirname.php' ; // set $mytrustdirname
 
// Base
$base   = isset($_GET['base'])   ? "_".preg_replace("/[^\w-]+/","",$_GET['base'])    : '';
$class = "div.xpwiki".$base;
 
$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
 
EOD;
 
include XOOPS_TRUST_PATH.'/modules/'.$mytrustdirname.'/skin/'.basename(__FILE__); 
?>

この中で、CSSを記述する箇所は

1
2
3
4
5
$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
 
EOD;

です。

例えば<h>タグの色を変えたい場合は、次のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */
$class h1,
$class h2 {
    background-color:#9ACD32;
}
$class h3 {
    border-bottom:  3px solid #9ACD32;
    border-top:     1px solid #9ACD32;
    border-left:   10px solid #9ACD32;
    border-right:   5px solid #9ACD32;
}
$class h4 {
    border-left:   18px solid #9ACD32;
}
EOD;

$class は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。

Page Top

プラグインが使用するCSS anchor.png Edit

プラグインが独自にCSSを読み込んでいる場合があります。そのCSSのオーバーライト方法について説明します。

プラグインが独自に読み込むスタイルシートは、
XOOPS_TRUST_PATH/modules/xpwiki/skin/css
ディレクトリにあります。

これらのCSSをオーバーライトするには、CSSを記述した同名のファイルを
XOOPS_ROOT_PATH/modules/[module_dir]/skin/css
に置きます。 .

Page Top

ページ毎のスタイルシート anchor.png Edit

各ページにファイル名 style.css として、CSSファイルを添付することで、特定のスタイルシートをそのページに適用することができます。

また、下層ページにもそのスタイルシートが適用(継承)されます。

このページには以下のスタイルシートが添付されています。

Everything is expanded.Everything is shortened.
1
2
3
-
|
!
$class div.body {
    background : url(../image/HowToCSS.gif) no-repeat fixed right 200px ;
}
.
.
.

Front page   Edit Freeze Diff Backup Upload Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 186, today: 1, yesterday: 0
Princeps date: 2007-09-17 (Mon) 14:27:56
Last-modified: 2007-09-17 (Mon) 14:27:56 (JST) (5399d) by nao-pon
このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





パスワード紛失  |新規登録
オンライン状況
52 人のユーザが現在オンラインです。 (1 人のユーザが xpwiki を参照しています。)

登録ユーザ: 0
ゲスト: 52

もっと...
サイト情報