Vous avez peut-être déjà entendu parler de la surcharge CSS mais tout le monde ne sait pas ce que c'est et comment l'utiliser. Il y a pourtant des cas de figure où cette technique peut s'avèrer très intéressante. Après quelques explications à ce sujet, nous allons voir dans ce tutoriel comment utiliser la surcharge CSS dans Joomla.
Qu'est ce que la surcharge CSS ?
En fait, c'est très simple. La première règle CSS appliquée est la dernière propriété définie dans l'ordre du fichier CSS.
En gros, si vous avez une même propriété CSS définie à deux reprises dans votre feuille de style, c'est celle qui est la dernière sur la feuille de style qui sera la première appliquée.
p.text{
padding: 0;
}
/* Cette règle sera appliquée en priorité */
p.text{
padding: 5px;
}Comment utiliser la surcharge CSS dans Joomla ?
Pourquoi et comment utiliser cela dans votre template ?
Les fichiers CSS de votre template Joomla sont chargés après la balise <head>.
Les balises situées dans l'en-tête des pages de Joomla chargent les fichiers JS et CSS avant ceux de votre template. Cela implique que si nous utilisons un module, ses feuilles de style CSS seront chargées avant les fichiers CSS du template. Ainsi, nous pourrons utiliser le principe de la surcharge CSS pour modifier l'apparence de ce module (ou de n'importe quel module) dans les CSS du template et ainsi l'adapter visuellement à notre site Web.
Cette technique est très intéressante car elle peut être utilisée avec n'importe quel module Joomla sans que vous ayez à modifier le fichier CSS original du module pour obtenir l'affichage escompté.