ページへ戻る

− Links

 印刷 

スタイルシートについて のバックアップソース(No.2) :: XOOPS マニア

xpwiki:スタイルシートについて のバックアップソース(No.2)

« Prev[5]  Next »[6]
* スタイルシートについて [#ua97f3ce]
#contents

** defaltスキンのCSS [#a85cd60a]

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

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

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

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

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

#code(php){{
<?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を記述する箇所は
#code(php){{
$overwrite = <<<EOD
/* Here is an overwriting section.
 * Please use $class in selector. */

EOD;
}}
です。

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

#code(php){{
$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 は、モジュールディレクトリ名にあわせたクラスセレクタ文字列に置換されます。

** プラグインが使用するCSS [#i8f2a9b2]

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

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

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

« Prev[5]  Next »[6]