一部のページにカスタムCSSスタイルを追加する
回答:
特定のページにカスタム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'; ?>">
これで、メニュー項目のページクラスに追加したものはすべて、ボディIDに表示されます。クラスのないメニュー項目はすべて、自動的にbody id = "default"になります。
また、この拡張機能を使用して、さまざまなスタイルシートをメニュー項目に割り当てることができます。http： //extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic
よろしく。