Skip to main content

Work Tips

HD-Custom CSS

2013/01/18

5年以上経過した古い記事です（Joomla2.5）

HYDE-DESIGN社のExtension「HD-Custom CSS」のインストールが必要です。

HD-Custom CSS

【サイト】http://extensions.joomla.org/extensions/style-a-design/templating/14053
　　　　　http://www.hyde-design.co.uk/free-joomla-extensions/custom-css

このExtensionはモジュール型Extensionです。
ページ単位（正しくはMenu項目単位）でCSSをカスタマイズ（上書き）する事が出来るモジュールです。

長所：モジュール形式なので幾つでも配置出来る

短所：CSSの上書きなので多少制約がある／テンプレートよっては設定が異なる／Positionの設定が必要

操作画面

■モジュールポジションを選択（表示位置の選択）
※beez_20のテーマの場合はPosition-13を選択／YooThemeの場合は下記を参照ください。

■上書きするページを選択

■cssを記入

操作画面

 

YooThemeでの設定

YOOThemeでの利用するには、下記の2っのファイルを修正するだけで、選択可能なモジュールポジションを作ることが出来ます。

  • templateDetails.xml
  • /layouts/template.php

■YOOThemeにモジュールポジションを追加する

/templates/yoo_xxxx/templateDetails.xml
//記載例
------------------------------------省略---------------------------------------------
<positions>
        <position>absolute</position>
        <position>search</position>
        <position>logo</position>
        <position>menu</position>
        <position>banner</position>
        <position>breadcrumbs</position>
        <position>top-a</position>
        <position>top-b</position>
        <position>bottom-a</position>
        <position>bottom-b</position>
        <position>bottom-c</position>
        <position>innertop</position>
        <position>innerbottom</position>
        <position>sidebar-a</position>
        <position>sidebar-b</position>
        <position>footer</position>
        <position>debug</position>
        <position>custom-css</position>
</positions>
------------------------------------省略---------------------------------------------
custom-cssはお好きな名称に変えてください。

■YOOThemeにタグを追加する
　モジュールポジションをテンプレートに読み込ませる

/templates/yoo_xxxx/layouts/template.php　<head>〜</head>の間に追加
//記載例
------------------------------------省略---------------------------------------------
<!DOCTYPE HTML>
<html lang="" dir="">
<head>
<?php echo $this['template']->render('head'); ?>
<jdoc:include type="modules" name="custom-css" />
</head>
------------------------------------省略---------------------------------------------
custom-cssはお好きな名称に変えてください。

これでフロントサイトでは表示されないがモジュールポジション選択可能な「custom-css」が出来上がります。