Kristoffer Sandven a écrit récemment sur son blog (JoomlaBlogger : Joomla tips) un article en anglais très intéressant sur les CSS Joomla. Voici une traduction que j'ai étoffé de remarques personnelles.
Comprendre les CSS de joomla
Une des questions qui revient souvent au sujet de Joomla concerne la présentation des templates et comment la modifier. Par moment, vous devez changer le code source du template, mais la plupart du temps, c'est plutôt les fichiers CSS qui y sont associés qui vous permettront de faire la plupart des modifications.
Les nouveaux utilisateurs de Joomla ne sont pas toujours au courant de la manière dont les CSS marchent avec Joomla. C'est pourquoi je vais tenter dans cet article de vous en expliquer le fonctionnement.
Qu'est ce qu'un CSS ?
Avant de commencer, vous devez savoir ce qu'est un CSS. Je pense que les capacités les plus importantes à avoir pour un utilisateur de Joomla sont le HTML et le CSS. Et bien sur d'être sympathique ;).
Si vous connaissez le HTML et le CSS, vous avez une très bonne base pour customiser votre site web. La plupart des extensions ont un bon aspect lorsque vous les installez. Cependant, si vous souhaitez que l'aspect de votre site web soit homogène, vous devez par moment modifier les CSS. Si vous ne connaissez pas les CSS, vous devriez donc commencer maintenant. Cet article ne porte pas sur les connaissance CSS générales, mais plutôt sur la manière dont Joomla utilise les CSS.
Voici ce que wikipédia explique au sujet des CSS (Cascading Style Sheets)
"CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
Séparer la structure d'un document de ses styles de présentation
L'un des objectifs majeurs de CSS est de permettre la stylisation hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document.
Ainsi, les avantages des feuilles de style sont multiples :
▪ La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
▪ La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
▪ Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel.
▪ Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs.
▪ Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation."
De mon point de vue, la partie la plus importante de cet extrait de Wikipédia est : "La séparation du contenu (HTML) et de la présentation (CSS). En utilisant les CSS, nous pouvons donc avoir dans un seul fichier l'ensemble des styles du site, séparé des articles de Joomla. Imaginez que vous deviez faire une mise en page spécifique pour chaque page de votre site, ce serait un cauchemar de faire un changement de style, dans le cas d'un changement de design de votre site.
Les CSS Joomla et les templates
Je suis toujours amusé de lire "Joomla ne supporte pas Internet Explorer" ou encore "Joomla n'est pas optimisé pour les moteurs de recherche". Bien sûr qu'il l'est ! Mais le template ne l'est peut être pas. Cela dépend de la manière dont le template HTML est construit, et comment les codes CSS sont inclus.
La plupart du temps, les fichiers CSS des templates sont dans /Templates/NonDuTemplate/CSS/Dossier.
Certains templates ont seulement un fichier CSS (appelé template.css la plupart du temps), d'autres en ont plusieurs. Pour des performances optimales, vous devriez ne pas trop multiplier le nombre de fichiers CSS. Cela réduit le nombre de requêtes serveur nécessaires pour charger la page.
Vous pourrez voir par moment des templates qui utilisent un fichier CSS principal qui importe d'autres fichiers CSS secondaires grâce à la syntaxe suivante (exemple) :
@import url('reset.css');
@import url('joomla.css');
@import url('typography.css');
@import url('modules.css');
@import url('custom.css');
Bonnes pratiques CSS
Sur certains templates, vous trouverez un fichier CSS vide nommé "custom.css". Ce fichier séparé a une priorité supérieure aux autres fichiers CSS du template car il est chargé en dernier. Ceci est un bon moyen de centraliser tous les changements que vous avez effectués. En effet, si vous voulez mettre à jour votre template, vous n'aurez qu'à uploader à nouveau votre fichier "custom.css" afin que toutes vos modifications soient conservées.
Si votre template ne contient pas de fichier "custom.css", vous devez alors modifier directement les fichiers CSS du template.
Ne répétez pas les CSS si vous n'en avez pas besoin
Lorsque l'on ajoute des éléments CSS au fichier "custom.css", il est important d'être spécifique. Cela veux dire que vous n'avez pas besoin de répéter votre style juste parce que vous voulez modifier un élément.
Par exemple, imaginons que vous avez le style suivant pour les balises H1 dans votre fichier CSS principal (Template.css par exemple)
h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:uppercase;
}
Imaginons que vous ne voulez pas que vos titres H1 soit en majuscule, vous pourriez inclure le code suivant dans votre fichier "custom.css" :
h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:none;
}
Ca marche ... mais ce n'est pas la meilleur méthode. En effet, vous répétez la plupart des éléments, la meilleure méthode et d'inclure uniquement les attributs que vous souhaitez changer :
h1 {
text-transform:none;
}
Dans ce cas, vous lui indiquez simplement de modifier la prise en compte des majuscules, les autres styles du fichier principal seront conservés.
Utilisez FireBug pour tester vos CSS
Un des outils que j'utilise pour tester mes CSS est appelé FireBug. Il s'agit d'un Add-on pour Firefox (et pour Chrome, mais en version moins évoluée) qui offre de bonnes informations au sujet des CSS et de la structure HTML de votre page web. Lorsque vous avez installé Firebug, vous pouvez faire un "Click droit" sur un élément et choisir "inspecter l'élément". La fenêtre FireBug va s'ouvrir en bas de l'écran. A présent vous pouvez voir la structure HTML (à droite) et les CSS (à gauche).
C'est maintenant que la partie fun commence ! vous pouvez expérimenter des modifications CSS directement dans Firebug. Vous voulez changer les marges d'un élément ? la couleur d'arrière plan ? enlever les bordures ? Toutes les modifications que vous voulez faire sont disponibles dans ce mode, et le résultat est instantané dans le navigateur. Bien sûr, si vous actualisez la page, les modifications seront perdues.
Lorsque vous êtes satisfait des changements, copiez les CSS dans le fichier CSS de votre template, et remplacez le sur votre serveur.
Prenez le temps d'apprendre le CSS
Je pense que tous les utilisateurs de Joomla devraient apprendre comment utiliser les CSS et connaitre le HTML. Cela rendra les modifications des templates beaucoup plus faciles et vous pourrez ainsi réaliser ce que vous (et vos clients ?) voulez.
Ce n'est pas comme apprendre le PHP. Je n'ai que quelques notions de PHP. Cependant, j'utilise le HTML et le CSS tous les jours. C'est pourquoi j'ai pris le temps d'apprendre et de pratiquer ces notions. C'est particulièrement vrai pour les CSS.
Bien commencer avec les CSS et Joomla!
Le meilleur moyen de commencer avec les CSS consiste à regarder les fichiers CSS inclus dans votre template. Regardez la structure et essayez de changer quelques éléments de style. Bien entendu, faites une sauvegarde de votre fichier CSS avant ;)
Vous pouvez essayer de modifier les attributs du Header en premier. Vous voulez que la balise H2 rendent vos titres plus petits ? Vous avez réussis ? Et maintenant c'est tous les titres ayant l'attribut H2 de votre site qui ont étés modifiés :)
Lecture recommandée pour apprendre le CSS
CSS 2 : Pratique du design web
La référence de Raphaël Goetter sur les CSS 2 pour maîtriser les fondamentaux du design web. Ce livre explique comment utiliser les CSS et XHTML des sites web et CMS tels que Joomla, fonctionnant aussi bien sous Internet Explorer que Mozilla Firefox, Opera, Safari et autres navigateurs conformes. Il aborde les grands classiques de la conception de feuilles de styles CSS et leurs problématiques concrètes: doctypes, flux et positionnement, préchargement, priorité de déclaration de classes CSS, gestion de la couleur, typographie, bordures et arrière-plan, menus et images réactives, cadres, etc. La gestion et le contournement des bogues des navigateurs sont étudiés (commentaires conditionnels, comportement haslayout...) et des exemples de gabarits prêts à l'emploi sont donnés en fin d'ouvrage, ainsi qu'une liste des propriétés CSS et un comparatif par navigateur des limites d'interprétation de ces propriétés.
