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

17年10月19日(Thu) 2時05分
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スキン)での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 ;
}
.
.
.

新しくコメントをつける

題名
ゲスト名
投稿本文

より詳細なコメント入力フォームへ

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 3166, today: 1, yesterday: 0
初版日時: 2007-09-17 (月) 14:27:56
最終更新: 2007-09-17 (月) 14:27:56 (JST) (3684d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証 | SSLログイン

新規登録 | パスワード紛失



メインメニュー
付箋機能 (xpwiki)
付箋メニュー 
付箋の編集
文字色: 背景色:
お名前:  線接続id:
 
MenuBar (xpwiki)
ブックマーク
オンサイトブックマークは
ログインするとご利用になれます
[ログインする]
サイト内 Wiki
☆ 検索 ☆



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

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

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

nao-pon
 

登録ユーザ数: 4470


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