一部のページにカスタムCSSスタイルを追加する
一部のページにカスタムCSSスタイルを追加してユニークなスタイルを与え、デフォルトのテンプレートスタイルを上書きしたいと思います。
Joomlaでこれを実現するにはどうすればよいですか?
特定のページにカスタムCSSコードを追加するには、いくつかの方法があります。ここにいくつかの選択肢があります:
Alt。 1-ページクラス
ページクラスを使用します。メニューアイテムエディターの[ページ表示]タブの下に、[ページクラス]というフィールドがあります。これにより、テンプレートの構成に応じて、<body>
タグ(またはコンテンツの周囲の<div class="YOURCLASS">...</div>
)にクラスが追加されます。
次に、指定したクラスを使用して、テンプレートのCSSファイルに新しいルールを作成します。
例えば。メニュー項目の[ページクラス]フィールドにmycustomclass
を追加し、これをCSSファイルに追加します。
.mycustomclass p {font-color:red;} // Make text red on this particular page
Alt。 2-カスタムCSSモジュール
この目的のためにいくつかのモジュールが用意されています。 1つの例は カスタムCSS です。このモジュールを使用すると、CSSコードを追加して、スタイルを設定するページに発行できます。
同様のオプションは、ページにHTML、JavaScript、CSSを追加できるモジュールである Custom HTML Advanced です。コードは自動的に<head>
タグに追加できます。
Alt 3.-追加のCSSスタイルシートを読み込みます
別の方法として、テンプレートのindex.php
ファイルで現在のメニューアイテムIDを確認し、必要に応じて別のCSSスタイルシートをロードします。
<?php
$currentMenuId = JSite::getMenu()->getActive()->id ;
if ($currentMenuId == "14") {
echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
}
?>
私のお気に入りのアプローチの1つは、body要素の動的クラスを作成することです。
そう:
<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
$active = $menu->getActive();
$class = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">
上記のコードが生成する例の一部は次のとおりです。
ホームページ:
<body class="home pageid-13">
私達についてのページ:
<body class="about-us pageid-15">
これで、上記のクラスを使用して、ページごとにカスタムの特定のスタイルを作成できます。
これは、同じことを行う別の方法です。
Doctypeの上に移動します。
<?php
$app = JFactory::getApplication();
$menu = $app->getMenu()->getActive();
$pageclass = '';
if (is_object($menu))
$pageclass = $menu->params->get('pageclass_sfx');
?>
あなたのボディクラスがあるインデックスに行きます:
<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
これで、メニュー項目のページクラスに追加したものはすべてbody idに表示されます。クラスのないメニュー項目は、自動的にbody id = "default"になります。
また、この拡張機能を使用して、メニュー項目に異なるスタイルシートを割り当てることもできます: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic
よろしく。