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

12年5月23日(Wed) 16時56分
TOP » xpWiki::Dev » スタイルシートについて » Ver 3.20.1以前

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

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

Page Top

defaltスキンのCSS anchor.png Edit

xpWiki では、デフォルトの表示状態(defaultスキン)でのCSSXOOPS_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 ;
}
.
.
.

Post a new comment

Subject
guestname
Body
Go to richer form

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: 2554, today: 1, yesterday: 2
Princeps date: 2007-09-17 (Mon) 14:27:56
Last-modified: 2007-09-17 (Mon) 14:27:56 (JST) (1710d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証 | SSLログイン

Register now! | Lost Password?



メインメニュー
付箋機能 (xpwiki)
Fusen(Tag) menu 
Tag Editor
Color: BG:
Name:  Connect line ID:
 
MenuBar (xpwiki)
ブックマーク
Please log in to use it.
[Login]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 72 人がオンライン中 :-)
(xpWiki::Dev : 12 人)

登録ユーザ: 0 & ゲスト: 72

もっと...
サイト情報
管理人

nao-pon
 

登録ユーザ数: 2185


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報
No trackback