web-dev-qa-db-ja.com

一部のページにカスタムCSSスタイルを追加する

一部のページにカスタムCSSスタイルを追加してユニークなスタイルを与え、デフォルトのテンプレートスタイルを上書きしたいと思います。

Joomlaでこれを実現するにはどうすればよいですか？

joomla-3.xjoomla-2.5templatescss
16
johanpw

特定のページにカスタムCSSコードを追加するには、いくつかの方法があります。ここにいくつかの選択肢があります：

Alt。 1-ページクラス
ページクラスを使用します。メニューアイテムエディターの[ページ表示]タブの下に、[ページクラス]というフィールドがあります。これにより、テンプレートの構成に応じて、<body>タグ（またはコンテンツの周囲の<div class="YOURCLASS">...</div>）にクラスが追加されます。

enter image description here

次に、指定したクラスを使用して、テンプレートの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">';
   }
?>
15
johanpw

私のお気に入りのアプローチの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">

これで、上記のクラスを使用して、ページごとにカスタムの特定のスタイルを作成できます。

9
FFrewin

これは、同じことを行う別の方法です。

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"になります。

4
Faye

また、この拡張機能を使用して、メニュー項目に異なるスタイルシートを割り当てることもできます： http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

よろしく。

1
AlejandroVega