Styles css Joomla JCE

L'expérience utilisateur commence par une présentation homogène des styles sur votre site (couleur de fond et de police, taille de caractères, type de police, ombré, etc...). Si vous mettez en place une méthode simple et rigoureuse pour systématiquement appliquer les mêmes styles qui reviennent de façon récurrente dans votre contenu, vous aller gagner du temps et permettre à vos visiteurs de bénéficier d'un visuel professionnel.
Pour que vos contenus soient présentés de façon identique sur toutes vos pages, il faut vous appuyer sur les classes css.

Le principe est que la classe css est associée à vos styles. Lors de la rédaction de votre contenu, ce ne sont plus les styles que vous allez appliquer via JCE, mais vos classes.

Vous avez certainement remarqué, parmi les icônes de JCE, la boîte de sélection styles css joomla. C'est précisément en sélectionnant à cet endroit votre classe, assortie d'un libellé explicite (par exemple "Soulignement titre", "Ombré image"), que vous aller appliquer vos styles rattachés à la classe.

Les classes css sont à insérer dans votre fichier custom.css ou custom.scss qui se trouvent en général dans le dossier "votre_template/custom".

N'hésitez pas à solliciter NosyWeb si vous avez un doute sur le fichier concerné par l'ajout de css.

Par exemple nous allons créer une classe permettant de d'appliquer un soulignement à un texte sélectionné, notamment un titre.

1- Démarche de création d'une classe css

1- Ouverture du fichier custom.css

2- Insertion de la classe et du style associé

Copier vos styles selon la syntaxe suivante :

.titre{
border-bottom : 2px solid #f3c13b;
font-weight:bold
}
La couleur jaune est représentée par l'expression "#f3c13b".
La seconde ligne concerne la mise en gras du texte.
Ne pas oublier le . devant le nom de la classe qui est libre ("titre" dans notre exemple). Nous conseillons de choisir des noms de classes explicites.

2- Création du style css sous JCE

1- Aller en Composants / JCE / Profils JCE / Default / Paramètres des plug-ins

Descendre la liste des plug-ins sur la colonne de gauche jusqu'à paramétrage styles css JCE Joomla, cliquer sur cet élément puis remonter pour indiquer les paramètres ci-dessous, et enregistrer.

paramétrage classe css jce

La notion de balise permet d'insérer automatiquement la classe dans le HTML, langage simple mais qui nécessite une certaine structure. 

3- Exploitation sous JCE

1 -Au sein de votre article ou module, vous sélectionnez la zone sur laquelle vous souhaitez appliquer votre style

2- Vous choisissez le style requis dans la boîte de sélection "Style css" de JCE

insertion classes css dans le HTML Joomla

3- Résultat dans le HTML : sem5 astuce css jce4

4- Le résultat visuel sur votre site : sem5 astuce css jce3

Explication de la balise <span> : tout l'intérêt dans le cas du soulignement est d'insérer une balise <span> à l'intérieur de la balise <h2>. Cela permet de ne souligner que la largeur exacte du texte.
Si nous avions appliqué la classe "titre" non pas à la balise <span> mais à la balise <h2>, soit le HTML suivant : sem5 astuce css jce41, nous aurions obtenu un soulignement sur toute la largeur du conteneur de h2, comme sur l'image ci-dessous, ce qui n'est pas notre objectif ici.
sem5 astuce css jce31

 

Conclusion

Dès lors que vous aurez créé vos différents styles dans votre fichier custom.css et sous JCE, vous aller gagner beaucoup de temps à rédiger vos articles. Par ailleurs votre HTML sera "propre" (ne contiendra plus de styles insérés de façon anarchique) et favorisera la qualité générale du site. En effet, les moteurs de recherche apprécient les sites bien conçus, dont le HTML est rigoureux. Ce point fait partie des nombreux éléments qui contribuent au référencement.
En outre, si vous êtes plusieurs personnes à créer des contenus cela harmonisera vos méthodes de travail.

En savoir plus sur les classes css (très bien expliqué) : https://www.cssdebutant.com/debuter-en-css-les-classes.html

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !

L'auteur : un expert à votre service
Nom : XavierM
Quel meilleur outil que Joomla pour mettre en oeuvre ce qui m'intéresse vraiment : comprendre les besoins de nos clients, apporter des solutions mais surtout des idées concrètes pour faire progresser leur site et leurs connaissances de l'univers Joomla.

Articles qui devraient vous intéresser

L'effet miroir avec Photoshop CS4 L'effet miroir avec Photoshop CS4
Pour ce deuxième tuto, j'ai décidé de vous expliquer comment appliquer un effet miroir sur une image toujours...
Arrondir les bords d'une image avec Photoshop CS4 Arrondir les bords d'une image avec Photoshop CS4
Le principe est d'arrondir les bords d'une image qui à l'origine se présente donc sous la forme d'un rectangle....

Commentaires (0)

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Affichage des modules Joomla sur mobile, tablette et desktopAffichage des modules Joomla sur mobile, tablette et desktop
La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok