テンプレートのCSSスタイルをオーバーライドするにはどうすればよいですか？

21

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

templates  overrides  css 
— ヨハンプウ
ソース
1
custom.cssスタイルシートを追加します。テンプレートのdoesntのは」自動的にそれを拾う場合、あなたはあなたのhead.php通常パスであるにそれを追加することができます：テンプレート/ TEMPLATENAME / TPLS /ブロック/ head.php <リンクのrel = 『スタイルシート』のhref = "/テンプレート/ TEMPLATENAME / CSS /のcustom.css」タイプ= "テキスト/ cssの" />
— トニー・M

回答:

22

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="/joomla//templates/mytemplate/css/custom.css" type="text/css" />

！重要

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

さまざまなフレームワークでの使用

ここからがおもしろい部分です。多くのテンプレートフレームワークには、ユーザーがテンプレートに変更を加える可能性があるため、CSSオーバーライドを含める簡単な方法が追加されています。使用する方法の一部を次に示します。

RocketThemeガントリー4

RocketThemeテンプレートはGantry Frameworkによって強化されており、カスタマイズされたCSSファイルが見つかると自動的にロードされます。CSSファイルは/templates/yourtemplate/css/フォルダーに配置する必要があり、名前はである必要がありますYOURTEMPLATEFOLDER-custom.css。

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

形状5

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

Gavick Pro

Gavick Proテンプレートにoverrides.cssは、/ css /サブディレクトリに空のファイルが含まれています。ただし、このファイルはデフォルトではロードされないOverride CSSため、テンプレート設定の[詳細設定]タブでアクティブにする必要があります。

Joomla Shine

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

T3フレームワーク

T3フレームワークに基づくテンプレートには、テンプレートcustom.cssの/ css /サブフォルダーにファイルが含まれる場合と含まれない場合があります（存在しない場合は単純に作成します）が、存在する場合、ファイルは他のCSSファイルの後に読み込まれます。

ワープフレームワーク

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

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

ファイルに/layouts/template.config.php。

— ヨハンプウ
ソース
2
一般的な使用法については、別の答えについて既に議論されているのではJHtml::_('stylesheet', 'path/to/file')なく、使用することをお勧めしaddStyleSheetます:)それ以外は、血まみれの良い答えです。人々にとって間違いなく便利になります
— Lodder 14
ありがとう、@ Lodder。この情報が人々に役立つことを願っています。あなたの提案に関して、私は議論を読みました。どのJHtml::_ように使用できます$this->templateか？
— johanpw
2
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
— ロッダー14
3
実際、新しいロケットのテーマではLESSを使用しています。やらなければならないことは、template-custom.lessという名前のLESSフォルダーにファイルを作成し、その中にコードを入れることです。その後、LESSがもたらすトリックをお楽しみください。Warp 7を使用すると、stylesフォルダーに独自の「スタイル」を作成でき、実際にTHATフォルダー（独自のcssフォルダー内）にcustom.cssファイルを貼り付けることができます。これにより、各スタイルに独自のカスタムCSSを持たせることができます。また、テンプレートのアップグレードにも対応できます。デフォルトのcustom.cssファイルを使用すると、テーマをアップグレードするたびに上書きされます。
— ブライアンピート14
1
素晴らしい答えと非常に便利です！カスタムCSSファイルのプロビジョニングを含まないテンプレート/フレームワークに追加する別のオプションは、CSSConfig extensions.joomla.org/extensions/style-a-design/templating / ...などのサードパーティ拡張機能の使用です。この正確な目的のために設計されています。
— ニールロバートソン14
7

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

Joomla 3.5の時点で、呼び出されるファイルを作成user.cssし、次の場所に配置できます。

templates / protostar / css / user.css

注：ファイル名は、しなければならないことuser.css

protostarテンプレートは以下をチェックします：

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

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

Github のプルリクエストをご覧ください

— はしご
ソース
5

Helix Framework（JoomShaper）

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

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

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

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

— FFrewin
ソース
3

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

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

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

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

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

私が管理するサイトでよく行うもう1つのオプションは、テンプレートを変更し、テンプレートの終了ヘッドタグの直前に、カスタムリンクをcustom.cssファイルに追加することです。これはマイナーで、覚えやすく復元が容易な変更であり、テンプレートの更新が到着したときに対処できます。

— FFrewin
ソース
3

ガントリー5（RocketTheme）

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

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

標準のGantry 5テンプレートとしてリリースされている水素テーマを使用すると、customという名前のフォルダーが提供されます。

このフォルダーは、ユーザーがガントリーフレームワーク/テンプレートのカスタムファイル/オーバーライドを配置するために提供されます（Joomlaテンプレートオーバーライドと混同しないように、テンプレート/ htmlフォルダーに残ります）。そこにcustom.cssファイルを配置できます。次に、Gantry Template Administration Panelを使用して、テンプレートレイアウトをカスタマイズし、カスタムCSS / JS Atomパーティクル（新しいガントリー5機能）を使用して、custom.cssをテンプレートに追加できます。Gantry 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を使用して完全に問題ありません。コンパイラーは両方をコンパイルできます。

— FFrewin
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.