Syntaxe CSS pour affecter une classe aux boutons "lire la suite" ?

[FlodAriege]

Bonjour,

Dans le Template que j'utilise (JSN Boot), les boutons "Lire la suite" sont mis en forme respectivement à la description de la classe .readon du Template.css
Bon.

Mais moi je voudrais qu'ils aient la même tête que les autres boutons du site.

Et en particulier ceux qui sont définis par deux classes "imbriquées" qui s'appellent :
.link-button.button-light
.link-icon jsn-icon-info

Quand je fais un lien sous forme de bouton avec l'icône "info", le lien se présente ainsi :
"<a class="link-button button-light" href="adresse-du-lien" title ="balise meta titre du lien"><span class="link-icon jsn-icon-info">texte à afficher</span></a>"

MA QUESTION :

Dois-je redéfinir complètement la classe .readon dans custom.css en copiant les paramètres de .link-button.button-light et de .link-icon.jsn-icon-info ...

... ou bien existe-t-il un moyen de dire :

Si classe = .readon , alors : appliquer les paramètres de .link-button.button-light et de .link-icon.jsn-icon-info ?

(évidemment la 2nde option m'irait mieux, je ne suis pas vraiment à l'aide avec le css, et je ne sais pas si je saurais copier correctement tous les paramètres requis)

Merci pour le coup de main

[chipie24]

Re : Syntaxe CSS pour affecter une classe aux boutons &quot;lire la suite&quot; ?

Bonjour,
Il faudrait voir le code html/php du bouton readon concerné avant la génération de la page car les balises sont peut etre différentes, ainsi que le code css des classes readon, link-button, button-light, link-icon, jsn-icon-info pour avoir une meilleure idée.
A priori il n'est pas nécessaire de redefinir readon.
Je ne connais pas le moyen d'appliquer la 2nde option mais modifier légerement le code html ou appliquer une classe supplémentaire à readon pour à défaut améliorer le design du bouton sans impacter sur d'autres possibles readon est faisable.

[jisse03]

Re : Syntaxe CSS pour affecter une classe aux boutons &quot;lire la suite&quot; ?

Bonjour,

JSN Boot possède pas mal de surcharges de com_content et autres.

Pour readon, html/com_content/article/default.php ligne 461, html/com_content/category/blog_item.php ligne 405, html/com_content/featured/default.php ligne 395.

Remplacer simplement class="readon" par ce qui ets désiré, par exemple class="link-icon jsn-icon-info"..

[FlodAriege]

Re : Syntaxe CSS pour affecter une classe aux boutons &quot;lire la suite&quot; ?

Je t'aiiiiiiiiiiiiiiime Jisse !!

Bon, alors ça n'a pas marché du premier coup.

J'ai trouvé les fichiers que tu mentionnais et les lignes concernées (l'un de nous 2 ne doit pas avoir fait la dernière mise à jour car je n'ai pas les mêmes numéros de ligne que toi).
J'ai remplacé class="readon" par class="link-button button-light link-icon jsn-icon-info"
Et là... rien, nada.

Bon sang mais c'est bien sûr !
Puisque j'utilise FlexiContent, c'est FC qui gère l'affichage des blogs de catégorie dans lesquels apparaissent ces boutons readmore / readon !

Alors je suis allée chercher dans :
components/com_flexicontent/templates/blog/category_items.php (et son petit frère :
components/com_flexicontent/templates/blog/category_items_html5.php

J'ai trouvé dans chacun 2 lignes qui faisaient référence à la classe readon, j'ai refait la manip' pour remplacer cette classe par la combinaison link-button button-light link-icon jsn-icon-info
Et...
... tada ! Ca fonctionne !!!

Merki à toi grand contributeur de cet indispensable forum
Une fois de plus tes lumières me rendent service et, au passage, m'apprennent un truc.
Je n'ose plus te demander en mariage, les autres vont me jeter des caillous (lapidation pour polyandrie), mais ce n'est pas l'envie qui m'en manque


PS: sans vouloir abuser de ta vaste patience... :
J'ai un petit problème d'alignement de l'icône dans le bouton.
Quand j'utilise cette combinaison de classe pour insérer un bouton à l'intérieur d'un article ou d'un module (cf ma page d'accueil où il y a 4 boutons de ce genre dans la colonne de gauche : 3w rouchenergies point fr), l'icône est bien centrée en hauteur et respecte une marge (padding ?) à gauche : en saisissant ainsi les classes à la suite dans les fichiers php, l'icône se colle complètement au bord gauche et au bor dhaut du bouton.

Quand j'insère un bouton de ce genre, je le fais ainsi :
"<p><a class="link-button button-red" title="titre" href="URL"><span class="link-icon jsn-icon-star text-size-xlarge">TEXTE</span></a></p>"

A priori le fait que les 2 classes link-button button-red et link-icon jsn-icon-star soient "imbriquées" via un span change quelque chose à l'alignement de l'icône :
J'ai fais l'expérience en créant un bouton avec cette syntaxe :
"<p><a class="link-button button-red link-icon jsn-icon-star" title="titre" href="URL"><span class="text-size-xlarge">TEXTE</span></a></p>"
... et là aussi l'icône apparaît décentrée en hauteur et collée complètement au bord gauche du bouton.

Jisse, une idée pour saisir autrement la combinaison de classes dans les fichiers .php ?
Quelque chose qui fasse le même job que le span ci-dessus ?

Merci encore

[jisse03]

Re : Syntaxe CSS pour affecter une classe aux boutons &quot;lire la suite&quot; ?

Et en utilisant le span dans le remplacement du readon, tout comme dans ton exemple ?

[FlodAriege]

Re : Syntaxe CSS pour affecter une classe aux boutons &quot;lire la suite&quot; ?

Ouiiiiiiiiiiiiii !

La bonne syntaxe qui va bien :

<a href="<?php echo JRoute::_(FlexicontentHelperRoute::getItemRoute($i tem->slug, $item->categoryslug, 0, $item)); ?>" class="link-button button-light"> <span class="link-icon jsn-icon-info">
<?php
if ($item->params->get('readmore')) :
echo ' ' . $item->params->get('readmore');
else :
echo ' ' . JText::sprintf('FLEXI_READ_MORE', $item->title);
endif;
?>
</span></a>



Merci encore