web-dev-qa-db-fra.com

Remplacer Global CSS dans l'article

J'ai un article dans lequel je veux lui appliquer un style différent de celui de Global.

J'ai essayé de l'ajouter comme une balise <link rel="stylesheet" type="text/css" href="https:"/ En haut de mon article, mais cela ne remplace pas le CSS global.

Est-il possible de remplacer le css global dans cet article par le biais de paramètres et d'appliquer le mien? Comment puis-je donner des CSS spéciaux à cet article uniquement?

joomla-3.xarticlescssoverridestemplate-override
1
IcyPopTarts

Il y a beaucoup de ressources sur ce site pour redéfinir les CSS. En fonction de votre modèle et de la configuration globale du site/de la page, vous pouvez le faire simplement en utilisant un sélecteur CSS unique qui n'existe peut-être que dans cette page et en ajoutant vos propres règles CSS dans un custom.css sur votre modèle.

Par exemple, si vous liez cet article à un élément de menu et que votre css spécial est uniquement destiné au balisage de votre article, vous pouvez attribuer à votre élément de menu une classe spéciale (depuis la page d'édition de l'élément de menu -> Onglet Affichage de la page -> Champ Classe de la page ) et ajoutez votre css dans le custom.css fichier.

Si par exemple vous ajoutez donner special class pour cet élément de menu, alors dans votre custom.css vous pouvez cibler des éléments dans votre article avec:

.item-pagespecial h1 {
    color: red;
}

le .item-pagespecial sélecteur pourrait être la classe finale produite par votre modèle/modèle.

Ressources utiles à lire:

Les liens suivants sur ce site pourraient être utiles à étudier. Jettes un coup d'oeil à:

2
FFrewin

Je suppose que TinyMCE supprimera cette balise car elle n’est pas valide dans le corps de la page. Je crois qu'il n'est pas possible de définir <link> en tant qu'élément valide dans TinyMCE. En tant que tel, si vous allez dans Extensions> Plug-ins et annulez temporairement la publication de TinyMCE, vous pourrez l’entrer à l’aide de l’éditeur vierge.

Si vous procédez ainsi, je vous suggérerais de l'ajouter à la page d'un module CustomHTML et de l'appliquer à la page (cette approche n'est possible que si l'article est lié à un élément de menu), comme enregistrer l'article à l'aide de TinyMCE à l'avenir enlèvera toujours le tag.

Si cela ne fonctionne pas, appuyez sur F12 et utilisez votre console pour vous assurer que le CSS est en cours de chargement (il est difficile de savoir si vous le chargez depuis votre propre site. Sinon, vous ne pourrez peut-être pas l'intégrer.)

S'il se trouve sur la page et qu'il se charge correctement, assurez-vous que vos styles sont correctement remplacés. Il se peut simplement qu'ils ne soient pas écrits de manière à prendre le pas sur vos styles existants.

Enfin, la meilleure approche pour ajouter de tels styles réside probablement dans votre modèle.

Le code suivant ajoutera une feuille de style lorsque l'id de l'élément de menu est 101.

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

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

et ce qui suit fera la même chose quand il détectera un article d'ID 1 (cependant, si vous utilisez d'autres composants, une validation supplémentaire peut être nécessaire pour vous assurer que l'id appartient à com_content et non à l'un des autres composants)

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

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