Deux styles dans un même site ?

**woluweb** · 20/04/2020, 13h51

Bonjour Elisabeth ,

Je crois que tu vas chercher trop loin.
Dans ton élément de menu, tu peux ajouter une classe (va voir dans les derniers onglets de mémoire). Imaginons que tu mettes

Code:

elisabeth

Et ensuite tu customises ton css général, p ex dans mon cas :

Code:

body.elisabeth .astroid-nav .nav-link.active {
color: #e6b24f !important
}

**elizabeth** · 20/04/2020, 14h19

Merci Woluweb pour ta réponse rapide !

Alors je comprend le principe, mais mes tests ne fonctionnent pas.
J'ai donc un lien de menu "références" qui affiche un article qui contient un widgetkit.
Dans le widgetkit j'ai fait une présentation en tuiles, dont chaque tuile conduit à afficher une catégorie de référence.
Et ce sont les articles contenus dans ces catégories qui ont les titres trop gros...
Alors je ne sais pas où mettre ma classe.
J'ai essayé dans le widgetkit, les Paramètres,Général "HTML Class", mais ça modifie le lien affiché, et pas ce qui s'affiche après.
Merci de ton aide

**woluweb** · 20/04/2020, 14h34

j'utilise pas les widgetkit, mais a priori ça ne devrait pas empêcher le principe

tu as un lien vers la page ?
(sinon, va dans la Console, tu survoles ton Titre, tu cliques sur "+" et tu fais un test à chaud en ajoutant une règle css.

**elizabeth** · 20/04/2020, 14h48

Merci,

voici un lien par exemple

Logements réhabilitation

https://eseb.fr/logements-rehabilitation

ESEB, Economie de la Construction à Grenoble, Economiste BIM, IFC Maquette 3D, assure l’ensemble des missions concernant l’aspect économique de la construction en Isère. Synthèse économique des investissements, gestion financière.

**woluweb** · 20/04/2020, 19h22

bon, on sait pas exactement ce que tu voulais changer, mais je viens de tester : si tu donnes une classe elisabeth à ton Element de Menu, avec ceci tes titres seront plus petits... seulement sur cette page :

Code:

body.elisabeth .uk-article-title {
font-size: 20px;
}

**elizabeth** · 21/04/2020, 08h30

Bonjour Woluweb,
ça ne semble pas fonctionner, à moins que je ne fasse pas ce qu'il faut :

J'ai ajouté "reference" dans l'onglet "type de lien", champ "style css du lien".
A tout hasard je l'ai aussi ajouté dans les styles des liens de mon composant widgetkit.

Dans mon custom.css j'ai ajouté :
body.reference uk-article-title{
font-size:10px;
etc.
}
J'ai vidé la cache de mon navigateur, et j'affiche mes références.
Quand j'inspecte les titres, le style se réfère toujours au premier uk-article-title de mon custom.

Où se cache mon erreur ?

**woluweb** · 21/04/2020, 10h21

ah oui mais non

style css du lien, c'est (comme le nom l'indique) si tu voulais changer le style css du lien (genre avoir cet élément de menu sur fond rouge)

Je faisais référence à Page Class sur l'onglet Page Display :

**elizabeth** · 21/04/2020, 13h03

BON !
On y est presque alors...
Je met le nom du style dans la classe de page du lien,
le style est bien dans le custom.css
je vide la cache,
j'affiche la page,
et j'inspecte.
Comme tu vois, le style du titre reste celui de mon custom css ligne 135.

?

Fichiers joints

**woluweb** · 22/04/2020, 11h39

ben, si j'inspecte je vois que ton <body> ne reprend pas la classe "reference" :

Code:

<body class="tm-isblog tm-page-animate">

réessaie un instant en utilisant Protostar (toujours un bon réflexe : quand un template a "oublié" une fonctionnalité, on peut parfois chercher longtemps. En basculant sur Protostar, on sait tout de suite si on a un vrai bug ou juste un effet de bord du template)

**elizabeth** · 23/04/2020, 08h42

Merci Woluweb,
je suis passée sur Protostar mais je ne sais pas ce que je suis sensée obtenir, mon fichier custom est dans le template yootheme.
Voici une copie d'écran avec inspection

Fichiers joints

**lefabdu51** · 23/04/2020, 17h08

C est normal que cela ne fonctionnes pas... tu a fait une erreur de syntaxe.
uk-article-title{ est un selecteur . Pour indiquer une classe cela doit être .uk-article-title{ .
Il manques un . devant uk-article-title pour dire que c est une classe.
Donc rien d'étonnant a ce que cela ne fonctionnes pas

**woluweb** · 23/04/2020, 20h33

je te demande juste de vérifier c'est que la classe que tu ajoutes dans l'élément de menu est bien dans le <body>

**elizabeth** · 24/04/2020, 08h21

Bonjour lefabdu51, peux-tu me dire où il manque un point ?
dans mon custom.css j'ai ceci :

Code:

.uk-article-title {
font-size: 50px;
line-height: 54px;
font-weight: 500;
text-transform: none;
margin-bottom: 5px !important;
}
body.reference .uk-article-title {
font-size: 10px;
line-height: 30px;
font-weight: 200;
text-transform: none;
margin-bottom: 5px !important;
}

et il y a bien les points avant uk-article-title. L'as-tu repéré sur mes copies d'écran ?

Bonjour Woluweb, pardon de te paraître stupide, mais est-ce que c'est sensé se trouver sous la partie "Hérité de body" dans l'inspection de l'élément où ailleurs ? et sous quelle forme ?
je ne suis vraiment pas dans mon élément, là...

**woluweb** · 24/04/2020, 09h32

bon, je vais un peu me répéter alors

pour l'instant, même quand tu ajoutes ta classe (si tu l'as bien fait là où j'indiquais bien sûr), cette classe devrait se voir dans

Code:

<body class="tm-isblog tm-page-animate">

(quand tu regardes le code source de la page en front-end)

Avec ton template, ça ne semblait pas être pris en compte (?)
D'où ma proposition de basculer le temps d'un instant sur Protostar pour voir ce que donne le <body

Fais-nous un copier-coller du <body quand tu bascule sur protostar, en ajoutant la capture d'écran qui montre que la classe est bien ajoutée dans le backend

Deux styles dans un même site ?

[RÉGLÉ] Deux styles dans un même site ?

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association