web-dev-qa-db-ja.com

拡張CSSファイルをオーバーライドする方法

拡張機能を使用していて、CSSにいくつか変更を加えたいのですが、拡張機能を更新したときにこれらの変更が失われたくないのですが。

CSSオーバーライドを実行するにはどうすればよいですか?

4
Lodder

まず、開発者がJHtmlを使用して、CSSファイルをインポートするための正しい方法を使用していることを確認する必要があります。

JHtml::_('stylesheet', 'mod_module/style.css', ['relative' => true]);

これの鍵は、true引数です。これが定義されていないかfalseの場合、オーバーライドはできません。

true引数は、パスが/mediaディレクトリからの相対パスであることを意味し、ファイルをインポートするときに、テンプレートのCSSディレクトリを最初にチェックして、オーバーライドが存在するかどうかを確認します。

それでは、例としてmod_loginを取り上げます。オーバーライドを実行するには、次のディレクトリにmod_loginというフォルダーを作成する必要があります。

テンプレート/ YOUR_TEMPLATE/css /

結果は次のようになります:

テンプレート/ YOUR_TEMPLATE/css/mod_login /

完了したら、拡張CSSファイルをmedia/フォルダから新しく作成したディレクトリにコピーすると、次のようになります。

テンプレート/YOUR_TEMPLATE/css/mod_login/style.css

その後、必要に応じてこのファイルの編集を開始できます。

8
Lodder

Lodderの回答は素晴らしく、Joomlaで拡張機能のcssオーバーライドに利用できる可能性を示しています。しかし、彼の質問で述べたように、すべての拡張機能がこのメソッドのcssオーバーライドをサポートしているわけではありません。

独自のスタイルを拡張に適用するもう1つの便利な方法は、テンプレートのcustom.cssオーバーライドファイル内にすべてのカスタムスタイルを配置することです。

通常、ほとんどの商用テンプレートは、独自のCSSオーバーライドを追加する簡単な方法を提供します。非常に一般的な方法は、テンプレートのcssフォルダー内にcustom.cssファイルを作成することです。

このQ/Aはここにあります:テンプレートでCSSスタイルをオーバーライドするにはどうすればよいですか?はこれを行う方法の方法を示していますそして最も人気のあるテンプレートフレームワークのリファレンスがあります。

独自のカスタムテンプレートを作成する場合は、テンプレートのcssファイルに追加のcssを追加するか、拡張機能のオーバーライド用に追加のcssファイルをリンクすることができます。

1
FFrewin