web-dev-qa-db-ja.com

テンプレートのCSSスタイルを上書きするにはどうすればよいですか？

Template Club X/Y/Zの無料/商用のJoomlaテンプレートを使用する場合、自分のCSSスタイルを含めるための最良の方法は何ですか？

templatesoverridescss
21
johanpw

CSSオーバーライドを使用する理由

事前に作成されたJoomlaテンプレートを使用している場合は、CSSスタイルを既存のテンプレートスタイルから分離することを常にお勧めします。

  • メンテナンスが簡単です
  • テンプレートをアップグレードしても、変更は失われません
  • 変更を別のテンプレートまたは別のサイトに簡単にコピー/移動できます。

CSSオーバーライドはどのように機能しますか？

CSSは「カスケードスタイルシート」を意味します。このコンテキストでは「カスケード」とは、特定のHTMLに複数のスタイルシートルールを適用できるため、より一般的なルールから必要な特定のルール（最も具体的なルールが選択されます）、または任意の要素のルールの順序に基づいて（最後に見つかったルールが選択されます）。

カスタマイズされたCSSファイルがロードされる限り後デフォルトのテンプレートCSSファイル、独自のスタイルを追加して、必要に応じて特定の要素をオーバーライドできます（いくつかあります）例外、詳細については下記をご覧ください）。

一般的な使用法

Joomla _<head>_タグでカスタムスタイルシートをロードするには、次のコードをテンプレートの_index.php_ファイルの末尾の_YOURDOMAIN.COM/templates/yourtemplate/index.php_の直前に追加できます（_</head>_）ファイルが最後に読み込まれるようにするためにタグを付けます。

_JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
_

（CSSファイルには任意の名前を付けることができ、/ css /サブフォルダーにある必要はありませんが、その方がきれいです。）

通常の_<link>_タグを追加することも可能ですが、これは上記のオプションよりも柔軟性が低くなります。

_<link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" />
_

！重要

一部の拡張機能は、CSSスタイルをロードした後（または、index.phpファイルに直接スタイルを追加する場合もあります）、オーバーライドをオーバーライドします。これは通常、スタイルに_!important_を追加することで解決できます。 _h1{color:red!important;}_

異なるフレームワークでの使用

楽しい部分ですが、多くのテンプレートフレームワークでは、ユーザーがテンプレートを変更する可能性があるため、CSSオーバーライドを簡単に含めることができます。使用される方法のいくつかはここにあります：

RocketTheme Gantry 4

RocketThemeテンプレートはGantry Frameworkを利用しており、カスタマイズされたCSSファイルが見つかると自動的に読み込まれます。 CSSファイルは_/templates/yourtemplate/css/_フォルダーに配置する必要があり、名前mustは_YOURTEMPLATEFOLDER-custom.css_にする必要があります。

例：無料の_Afterburner 2_テンプレートを使用している場合、デフォルトのテンプレートディレクトリは_/templates/rt_afterburner2/_です。 _rt_afterburner-custom.css_（アンダースコアとハイフンを含む完全）というファイルを/ css /サブフォルダーに追加すると、Gantryフレームワークによって自動的にロードされます。

形状5

Shape 5テンプレートには、テンプレートの/ css /サブディレクトリに空の_custom.css_ファイルが付属しています。このファイルにスタイルを追加するだけで、レイアウトに含まれます。

Gavick Pro

Gavick Proテンプレートには、/ css /サブディレクトリに空の_overrides.css_ファイルが付属しています。ただし、このファイルはデフォルトでは読み込まれないため、テンプレート設定の[詳細設定]タブで_Override CSS_をアクティブにする必要があります。

Joomla Shine

テンプレートの/ css /サブフォルダーにカスタムCSSファイルを作成します。 _custom.css_およびExtensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)でファイル名を指定します。

T3フレームワーク

T3フレームワークに基づくテンプレートには、テンプレートの/ css /サブフォルダーに_custom.css_ファイルが含まれる場合と含まれない場合があります（そこにない場合は単に作成してください）。ただし、存在する場合、ファイルは他のCSSの後にロードされますファイル。

ワープフレームワーク

Warp Frameworkに基づくテンプレートは、/ css /サブフォルダーにある_custom.css_ファイルを自動的にロードします。追加することで追加のCSSファイルをロードできます

_$this->warp->stylesheets->add('css:yourcssfile.css');
_

_/layouts/template.config.php_ファイルへ。

22
johanpw

Joomla 3.5+（Protostarテンプレート）

Joomla 3.5以降では、user.cssというファイルを作成して次の場所に配置できます。

templates/protostar/css/user.css

注：ファイル名である必要がありますuser.css

Protostarテンプレートは、次のことを確認します。

  • ファイルが存在します
  • ファイルサイズは> 0です。

両方の条件が満たされている場合は、このファイルが自動的にインポートされます。

Githubで Pull Request を参照してください

7
Lodder

Helix Framework（JoomShaper）

カスタマイズワークフローを容易にする別のJoomlaテンプレートフレームワーク。

Helix Frameworkテンプレートは、2つの便利な方法でカスタムスタイルを追加する簡単な方法も提供します。

  1. バックエンドのテンプレートコントロールパネルには、カスタムCSSフィールドがあります。ここにcssを入力できます。これは、ページのヘッドセクションにスタイル要素として追加されるため、他の外部cssファイルよりも優先されます。もちろん、このオプションは理想的ではありません。CSSの一連の行を記述する場合は、2番目の方法があります。

  2. 他の多くのテンプレートフレームワークと同様に、Helixは、独自のcustom.cssファイルを作成する機能も提供します。作成して、テンプレートのcssフォルダー内に配置するだけです。テンプレートはそれを解析し、ページのヘッドセクションに含めます。

5
FFrewin

Johanpwは自分の質問に対する彼の回答で非常に良い仕事をしました...特に多くの商用テンプレートのcssオーバーライドに関して。

ここに2セントだけ追加したいのですが...

Johanpwが強調したように、CSSオーバーライドを作成することをお勧めします。カスタムCSSを、更新後に削除または上書きされないことがわかっている単一のファイルに保持することは不可欠です。

これは、すべてのJoomla拡張機能について覚えておくことが重要です。モジュールまたはコンポーネントのコアCSSファイルを変更しないでください。代わりに、独自のカスタムtemplate.cssファイルを作成して最後にロードし、そこですべてのカスタムスタイルを作成することをお勧めします。

商用テンプレートがcssオーバーライドを追加する方法を提供しない場合は、次のような拡張機能を使用できます： Add Custom CSS 、これはまさにこれを可能にします。カスタムcssオーバーライドファイルを作成し、最後にロードします。

私が管理しているサイトでよく行う別のオプションは、テンプレートを変更して my.linkをcustom.cssファイルに追加することです 、テンプレートの終了ヘッドタグの直前。これはマイナーであり、覚えやすく、変更を復元できます。テンプレートの更新が届いたときに対処できます。

3
FFrewin

ガントリー5（RocketTheme）

ガントリー5は人気のあるテンプレートフレームワークの最新バージョンであり、多くの新しい機能を備えています。

CSSオーバーライドに関しては、多くの柔軟性とオプションがあります。

標準のガントリー5テンプレートとしてリリースされたHydrogen Themeを使用して、customという名前のフォルダーを提供します。

このフォルダーは、ユーザーがガントリーフレームワーク/テンプレートのカスタムファイル/オーバーライドを配置するために提供されます（template/htmlフォルダーに残っているJoomlaテンプレートオーバーライドと混同しないでください）。 custom.cssファイルをそこに配置できます。次に、ガントリテンプレート管理パネルを使用して、テンプレートレイアウトをカスタマイズし、カスタムCSS/JS Atom Particle（ （新しいガントリー5機能）、custom.cssをテンプレートに追加します。ガントリー5は、いわゆるストリームリンク、（ショートカットのような）、custom.cssファイルを簡単にリンクするため。

したがって、Atomパーティクルの内側から、次のようにリンクします。

gantry-theme://custom/thing.css

gantry-theme://ショートカット。常に現在のガントリーテンプレートフォルダーを参照します。

このアプローチを使用すると、gantry5テンプレートの特定のテンプレートアウトラインにcustom.cssを追加できます。

ガントリーテンプレート全体に対してグローバルに機能する2番目のアプローチは、custom.scssファイルを内部に追加することです。

template_directory/custom/scss/custom.scss

そうすることで、gantry5は常にこのscssファイルをロードしてコンパイルし、適用したcssルールはテンプレートのデフォルトルールを上書きします。

Scssファイル内では、SCSSまたは単にcssを使用して完全に問題ありません。コンパイラは両方をコンパイルできます。

3
FFrewin