Styler la balise <hr> Topic is solved

Moderators: sarki, Aidan38

Forum rules
Règles du forum
Post Reply
Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Styler la balise <hr>

Post by Michel4546 » Fri Apr 12, 2019 2:24 pm

Hello Everybody,

Comment styler la balise <hr> dans Joomla 3 ?

Bien cordialement
Michel

User avatar
geof
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 169
Joined: Thu Nov 16, 2006 6:10 am
Location: Greece, Larissa
Contact:

Re: Styler la balise <hr>

Post by geof » Fri Apr 12, 2019 4:01 pm

look at this links
https://css-tricks.com/examples/hrs/
https://codepen.io/ibrahimjabbari/pen/ozinB
add the css classes that you want to use, in to the file, templates/your_template_name/css/custom.css
Yiorgos Fakas : https://volunteers.joomla.org/joomlers/ ... rgos-fakas
Professional Joomla Services in Greece https://www.easylogic.gr

User avatar
sarki
Joomla! Explorer
Joomla! Explorer
Posts: 280
Joined: Mon Sep 19, 2005 2:34 pm
Location: Suisse
Contact:

Re: Styler la balise <hr>

Post by sarki » Fri Apr 12, 2019 8:37 pm

Hello,
Les exemples que te suggère geof te montrent comment appliquer une classe à une ligne hr dont le style est défini par une feuille de style.
Si toutefois tu ne sais pas faire cela, tu peux appliquer le style directement à la balise, dans le code cela ressemblerait à cela :
<hr style="border-top: 1px solid #ccc" />
Comme tu le vois, le style est appliqué directement à la balise hr

En utilisant l'éditeur JCE que je te conseille de toute façon d'installer car beaucoup plus évolué que le TinyMCE intégré par défaut dans Joomla, tu as une icône représentant deux AA. En cliquant sur la représentation hr qui est dans la ligne d'état de l'éditeur JCE tu sélectionnes la balise hr, puis ensuite en cliquant sur l'icône double AA tu peux lui appliquer les styles que tu veux grâce à la fenêtre des styles qui s'ouvre alors. Tu peux voir les différents onglets de cette fenêtre en bas de cette page : https://www.sarki.ch/internet/typograph ... styles-css
French Joomla Translation & Support : www.joomla.fr
French JCE Translation & Support : www.sarki.ch/jce

Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Re: Styler la balise <hr>

Post by Michel4546 » Sat Apr 13, 2019 7:03 am

sarki wrote:
Fri Apr 12, 2019 8:37 pm
Hello,
Les exemples que te suggère geof te montrent comment appliquer une classe à une ligne hr dont le style est défini par une feuille de style.
Si toutefois tu ne sais pas faire cela, tu peux appliquer le style directement à la balise, dans le code cela ressemblerait à cela :
<hr style="border-top: 1px solid #ccc" />
Comme tu le vois, le style est appliqué directement à la balise hr

En utilisant l'éditeur JCE que je te conseille de toute façon d'installer car beaucoup plus évolué que le TinyMCE intégré par défaut dans Joomla, tu as une icône représentant deux AA. En cliquant sur la représentation hr qui est dans la ligne d'état de l'éditeur JCE tu sélectionnes la balise hr, puis ensuite en cliquant sur l'icône double AA tu peux lui appliquer les styles que tu veux grâce à la fenêtre des styles qui s'ouvre alors. Tu peux voir les différents onglets de cette fenêtre en bas de cette page : https://www.sarki.ch/internet/typograph ... styles-css

Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Re: Styler la balise <hr>

Post by Michel4546 » Sat Apr 13, 2019 4:07 pm

Merci pour ces réponses.
Ok pour <hr style="border-top: 1px solid #ccc" />, j'ai fait, mais je suis preneur de la solution CSS.
Les exemples cités par geof doivent-ils être introduits dans le volet "CSS personnalisées" du template Helix 3 ?

2. J'ai bien le plug-in éditeur JCE comme éditeur par défaut, mais je ne vois pas le double A. La balise <hr> est générée par l'icone "trait".
Je n'ai pas les panneaux cités en bas de page. Ai-je une ancienne version de JCE ?

Merci. Michel

User avatar
sarki
Joomla! Explorer
Joomla! Explorer
Posts: 280
Joined: Mon Sep 19, 2005 2:34 pm
Location: Suisse
Contact:

Re: Styler la balise <hr>

Post by sarki » Sat Apr 13, 2019 4:31 pm

Oui, tu peux mettre ces ajouts de style CSS dans les propriétés du Helix 3
Idéalement il faudrait créer une feuille de style nommée "custom.css" que tu mets dans le dossier "css" de ton template, car tous les styles indiqués dans les propriétés du template ou ajoutés dans cette zone sont mis en dur dans le code et chargés avec chaque page, alors que la feuille de style css se met dans le cache du navigateur ;)

Je pense que tu as la bonne version de JCE mais ces panneaux apparaissent uniquement lors du clic sur l'icône représentant le double AA, visible sur cette image à peu près au milieu de la quatrième ligne de l'éditeur :
jce_barre-outils_version-core.png
Ne pas oublier avant de sélectionner la balise hr
You do not have the required permissions to view the files attached to this post.
French Joomla Translation & Support : www.joomla.fr
French JCE Translation & Support : www.sarki.ch/jce

Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Re: Styler la balise <hr>

Post by Michel4546 » Mon Apr 15, 2019 6:09 am

Hello Sarki,
Alors j'ai essayé les propositions.

Cas 1 :
Balise <hr> dans l’article :
<hr style="border-top: 1px solid #87CEEB" />

Cas 2
Création d’un fichier custom.css dans le sous-répertoire shaper_helix3/ css du template Hélix 3 :

hr.style1 {border-top: 1px solid #8c8b8b; }
+
Balise d’en-tête dans l’article
<hr class="style1">

Le cas n°1 n’appelle pas de remarque. L’affichage est correct.

Dans le cas n°2 , la couleur de la balise a bien changé, mais l’affichage général (body ou container ?) est réduit en largeur, environ 700px et tronque le menu principal horizontal sur la droite.
Du coup, pour l’instant, j’hésite fortement à passer les codes personnalisés du template dans le fichier custom.css.


Bien cordialement
Michel

User avatar
sarki
Joomla! Explorer
Joomla! Explorer
Posts: 280
Joined: Mon Sep 19, 2005 2:34 pm
Location: Suisse
Contact:

Re: Styler la balise <hr>

Post by sarki » Mon Apr 15, 2019 11:52 am

Hello,
Si ton template explose c'est que tu as fait une erreur qq part, essaie en fermant ta balise hr ainsi :
<hr class="style1" />
French Joomla Translation & Support : www.joomla.fr
French JCE Translation & Support : www.sarki.ch/jce

Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Re: Styler la balise <hr>

Post by Michel4546 » Mon Apr 15, 2019 1:32 pm

Ah, ah, c'est bien cela ! La balise hr non fermée, merci..
Du coup, je vais essayer de passer tous les codes personnalisés d'Hélix 3 dans cette feuille custom.css. Je devrais gagner qq millisecondes en chargement ? A suivre...

Tant qu'à faire, je souhaiterais diminuer l'espace entre deux articles lorsque je suis en blog 2 colonnes (distance entre l'icône "lire la suite" et le haut de l'article suivant).

Merci.
Michel

Michel4546
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 12, 2019 2:19 pm

Re: Styler la balise <hr>

Post by Michel4546 » Mon Apr 15, 2019 3:26 pm

geof wrote:
Fri Apr 12, 2019 4:01 pm
look at this links
https://css-tricks.com/examples/hrs/
https://codepen.io/ibrahimjabbari/pen/ozinB
add the css classes that you want to use, in to the file, templates/your_template_name/css/custom.css
Hello
why this style 14 is not correct when I change the colors ? The display is original style 14.

hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #efb98d, #ef730e, #efb98d);
background-image: -moz-linear-gradient(left, #efb98d, #ef730e, #efb98d);
background-image: -ms-linear-gradient(left, #efb98d, #ef730e, #efb98d);
background-image: -o-linear-gradient(left, ##efb98d, #ef730e, #efb98d);
}

Michel

User avatar
sarki
Joomla! Explorer
Joomla! Explorer
Posts: 280
Joined: Mon Sep 19, 2005 2:34 pm
Location: Suisse
Contact:

Re: Styler la balise <hr>

Post by sarki » Mon Apr 15, 2019 7:09 pm

Oui personnellement je fais également à chaque fois des modifications sur les espaces des blocs et d'autres éléments que je mets dans le custom.css
En fait à part qqs habituelles modifications c'est surtout pour customiser des extensions complémentaires tel HikaShop, kunena ou autre que j'ajoute des styles dans ce custom.css

En ce qui concerne le style 14, il fonctionne bien avec tes valeurs comme on le voit dans cette prévisualisation...
hr14.png
You do not have the required permissions to view the files attached to this post.
French Joomla Translation & Support : www.joomla.fr
French JCE Translation & Support : www.sarki.ch/jce


Post Reply

Return to “French Forum”