web-dev-qa-db-ja.com

記事内のグローバルCSSを上書きする

グローバルなものとは異なるスタイルを適用したい記事が1つあります。

そのように追加してみました<link rel="stylesheet" type="text/css" href="https:"/タグを記事の上部に追加しましたが、グローバルCSSを上書きしていません。

設定を通じてこの記事内のグローバルCSSをオーバーライドして、独自のものを適用することは可能ですか？この記事にのみ特別なCSSを与えるにはどうすればよいですか？

joomla-3.xarticlescssoverridestemplate-override
1
IcyPopTarts

このサイトには、CSSのオーバーライドに関する多くのリソースがあります。テンプレートと全体的なサイト/ページ構成によっては、そのページにのみ存在する可能性のある一意のCSSセレクターを使用して、テンプレートのcustom.cssに独自のCSSルールを追加するだけで、これを実行できる場合があります。

たとえば、その記事をメニュー項目とリンクし、特別なcssが記事内のマークアップのみを目的としている場合、メニュー項目に特別なクラスを与えることができます（メニュー項目編集ページ内から->ページ表示タブ->ページクラスフィールド）、custom.cssファイルにCSSを追加します。

たとえば、そのメニュー項目に「special」クラスを追加すると、custom.cssで次のように記事内の要素をターゲットにできます。

.item-pagespecial h1 {
    color: red;
}

.item-pagespecialセレクターは、テンプレート/テンプレートのオーバーライドが生成する最終的に生成されるクラスである可能性があります。

読むのに役立つリソース：

このサイトの以下のリンクは、研究に役立つことが証明される可能性があります。見て：

2
FFrewin

ページの本文では無効であるため、TinyMCEがそのタグを削除すると思います。 TinyMCEで<link>を有効な要素として設定することは不可能だと思います。そのため、「拡張機能」>「プラグイン」に移動し、TinyMCEを一時的に非公開にすると、空のエディターを使用して入力できます。

この方法で行う場合は、CustomHTMLモジュールのページに追加し、代わりにページに適用することをお勧めします（この方法は、記事がメニュー項目にリンクされている場合にのみ可能です）。 TinyMCEは将来的に常にタグを取り除きます。

これが機能しない場合は、F12キーを押し、コンソールを使用してCSSが実際に読み込まれていることを確認します（自分のサイトから読み込んでいるかどうかは不明です。そうでない場合は、埋め込みが許可されていない可能性があります）。

ページ上にあり、正しく読み込まれている場合は、スタイルが正しくオーバーライドされていることを確認してください。それは単に、それらがあなたの既存のスタイルよりも重要になるような方法で書かれていないということかもしれません。

最後に、そのようなスタイルを追加する最良の方法は、おそらくテンプレートにあります。

次のコードは、メニュー項目IDが101のときにスタイルシートを追加します。

<?php if (JFactory::getApplication()->getMenu()->getActive()->id=="101") {

        JHtml::_('stylesheet', 'https://cdn.sstatic.net/Sites/stackoverflow/all.css', array());
    } ?>

iD 1の記事が検出された場合も同様です（他のコンポーネントを使用している場合は、IDが他のコンポーネントではなくcom_contentに属していることを確認するために追加の検証が必要になる場合があります）。

<?php if (JFactory::getApplication()->input->get('id')=="1") {

    JHtml::_('stylesheet', 'https://cdn.sstatic.net/Sites/stackoverflow/all.css', array());
} ?>
0
Richard B