CSS et Joomla: explication de la feuille de style des templates

Le CMS Joomla est du vrai bonheur pour tout ceux qui ont essayé d'autres plateformes de contenu et qui découvrent Joomla!
Le problème arrive quand on veut personnaliser l'apparence d'un site Joomla et que l'on veut modifier ce qu'on appelle les templates.
Une feuille CSS permet de définir les styles des différents éléments du site réalisé en Joomla. Cela demande de rechercher à quoi correspondent les différents styles de la feuille.
Voilà qui devrait grandement vous aider à présent, j'ai trouvé ça sur http://forum.joomla.org/index.php?topic=30067.0

Grand merci aux auteurs!

• Tutoriel de Paounet qui recense les classes CSS utilisées par les modules de base Mambo/Joomla: http://www.joomlafacile.com/index.php?option=com_content&task=view&id=72&Itemid=53
  

/* ------------------------- CSS COMPLETS POUR UN TEMPLATE JOOMLA 1.0.x ------------------------- */
/* d'après Dinh Viet Hung (c) http://www.joomlart.com et Wee Keat Chin (c) http://www.visualdensity.com */
/* traduit et complété pour Joomla! 1.0 mejean / Papounet / Lexel / Zen Air Cashmere / Dragon Company */


/* ------------------------- Styles par défaut ------------------------- */

/* Styles généraux */

body {} /* style général entre les balises body, contrôle les éléments comme le fond, etc.*/
td {} /* style par défaut des colonnes des tables du templates */
tr {} /* style par défaut entre les balises body, contrôle les éléments comme le fond, etc. */
p {} /* style par défaut des paragraphes */
hr {} /* style par défaut des lignes horizontales du template */
hr.separator {}
div {} /* format par défaut des balises "div" du template */
pre {} /* style des zones de textes préformatés (utilisé par la zone de debogage) */


/* Paramétres par défaut des niveaux de titre */

h1 {} /* style de titre de niveau 1 */
h2 {} /* style de titre de niveau 2 */
h3 {} /* style de titre de niveau 3, est utilisé pour l'affichage des titre de module que le paramètre du module est à -2 ou -3 (cf. plus bas) */
h4 {} /* style de titre de niveau 4 */
h5 {} /* style de titre de niveau 5 */
h6 {} /* style de titre de niveau 6 */

/* Paramétres par défaut des liens */

a:link {} /* style par défaut des liens */
a:visited {} /* style des liens visités */
a:hover {} /* style des liens survolés */

/* Paramétres par défaut des listes à puce */

ul {} /* style de tous les élements de liste ul */
li {} /* style de tous les élements de liste li */


/* ------------------------- Paramètres des formulaires ------------------------- */

.form {} /* permet de définir les marges (marging et padding) des formulaire pour une meilleur accessibilité (seulement pour Joomla!) */
.button {} /* apparence des boutons */
.inputbox {} /* apparence des formulaire de saisie, par ex. le module de connexion */
.search {} /* apparence des

qui contiennent les éléments de recherche : inputbox, bouton de recherche...*/


/* ------------------------- Paramètres de navigation / des menus ------------------------- */

/* Style des menus */

a.mainlevel{} /* style des liens de menu de premier ordre */
a.mainlevel:link {} /* style des liens de menu de premier ordre */
a.mainlevel:visited {} /* style des liens de menu de premier ordre visités */
a.mainlevel:hover {} /* style des liens de menu de premier ordre survolé par la souris */

#active_menu {} /* style des liens de menu de premier ordre actif */

a.sublevel{} /* style des liens de menu de second ordre */
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}

/* Style du menu horizontal */

ul#mainlevel-nav {} /* style des liens du menu horizontal (généralement dans la position user3) */
ul#mainlevel-nav li {}
ul#mainlevel-nav li a:link {}
ul#mainlevel-nav li a:visited {}
ul#mainlevel-nav li a:hover {}

/* Style des barres de navigation */

.pagenavbar {} /* style de la barre de navigation de pied de page ("<<> fin >>") quand celle-ci n'apparaît pas comme hyperlien (quand il y a seulement quelques articles).*/
.pagenavbar:link {} /* style de la barre de navigation de pied de page ("<<> fin >>") quand celle-ci devient des hyperliens */
.pagenavbar:visited {}

.pagenav {} /* paramètre des liens de la barre de navigation "<<> fin >>" */
a.pagenav:visited {}
a.pagenav:hover {}

/* Style des autres liens */

a.readon:link {} /* style du lien 'en savoir plus..." ou "lire la suite..." affiché pour des articles longs */
a.readon:hover {}
a.readon:visited {}

.back_button {} /* style pour le bouton "retour" */
.pagenav_prev {} /* style pour le bouton "précédent" */
.pagenav_next {} /* style pour le bouton "suivant" */

.latestnews ul {} /* style pour la liste "dernières news" - par défaut, les "dernières news" sont dans le module user1 */
.latestnews li {}

.mostread ul{} /* style pour la liste "plus populaires" - par défaut, les "plus populaires" sont dans le module user1 */
.mostread li{}


/* ------------------------- Paramètres des pages de contenu ------------------------- */

a.category:link {}
a.category:hover {}
a.category:visited {}

.blog /* apparence de la table entourant le contenu central sur le front page */
.blogsection {} /* paramètres de liens d'une page de type blog * */
.blog_more {} /* style du texte "Plus..." d'une page de type blog * */
a.blogsection:link {} /* paramètre le format du lien */
a.blogsection:visited {}
a.blogsection:hover {}

.article_seperator { } /* style pour l'écartement vertical entre les articles d'une page de type blog */

.componentheading {} /* style du composant utilisé pour affiché le contenu en cours */
.contentheading {} /* style du tire du contenu, de l'article... en cours */
.contentpane {} /* apparence de la table qui contient les éléments non-liés à un article (composant, liste de catégories, formulaire de contect, etc).*/
.contentpaneopen {} /* apparence de la table qui contient le texte de l'article en cours */
.contentpagetitle {} /* style du titre du contenu, de l'article, etc. affiché */

.buttonheading {} /* position des boutons : "pdf", "imprimer", "envoyer à un ami" */

a.contentpagetitle:hover {} /* Titre des articles quand ils fonctionnent comme lien */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}

.contentdescription {} /* style de la "description" des sections, catégories (news/liens web/dernières news...) */
table.contenttoc {} /* style de la table des matières pour des contenus ou articles à pages multiples */
table.contenttoc th {} /* style du titre de la table des matières */
table.contenttoc td {} /* style du contenu de la table des matières */
table.contenttoc td.toclink {} /* style du des liens dans la table des matières */
a.toclink:link {}
a.toclink:visited {}
a.toclink:hover {}


/* ------------------------- Paramètres sections Joomla! ------------------------- */

.sectiontableheader {} /* apparence des titres des tables */
.sectiontableentry1 {} /* apparence des lignes impaires des tables */
.sectiontableentry2 {} /* apparence des lignes paires des tables */
.sectiontablefooter {} /* apparence du pied de table */


/* ------------------------- Paramètres des modules Joomla! (par défaut) ------------------------- */

table.moduletable {} /* apparence général des modules */
table.moduletable th {} /* apparence du titre des modules */
table.moduletable td {} /* apparence du contenu des modules */
table.moduletable ul {} /* apparence deslistes des modules */

/* NB : selon le paramètre x d'affichage du module mosLoadModules ( 'position', x ), le titre du module est paramétré par : */

moduletable h3 {} /* apparence du titre d'un module publié avec -2 */
div.module div div div h3 {} /* apparence du titre d'un module publié avec -3 */

/* ------------------------- Paramètres particuliers ------------------------- */

/* images insérées via le bot {mosimage} */

.mosimage {} /* style de l'image : bordure, marges... */
.mosimage_caption {} /* style de la légende de l'image */

/* Dates, auteurs, évaluation, etc. */

.createdate {} /* style de l'intitulé "créé le" si affiché */
.modifydate {} /* style de l'intitulé "modifié le" si affiché */
.content_rating /* style des résultats des votes pour un article si affiché */
.small {} /* style employé pour la liste de liens en bas lors de l'affichage sous forme de blog */
.smalldark {} /* style uniquement employé (à ma connaissance) pour les intitulés "nombre de votes", "premier vote", "dernier vote" lors de l'affichage des résultats d'un sondage */

/* composant sondage */

.poll {} /* apparence du texte du module de sondage */
.pollstableborder {} /* apparence des bordure du sondage affiché */

/* composant liens web */

a.weblinks:link /* apparence des liens */
a.weblinks:visited {}
a.weblinks:hover {}

/* composant fils d'actualité */

.newsfeedheading {} /* style du titre desfils d'actualité */
.newsfeeddate {} /* style de la date des fils d'actualité */
.fase4rdf {} /* style des liens des fils d'actualité */
a.fase4rdf:link {}
a.fase4rdf:visited {}
a.fase4rdf:hover {}

/* composant recherche */

table.searchintro {} /* Paramètre du texte affiché de la boîte affichant "Rechercher les mots-clés ... x résultat(s) trouvé(s) au total. Rechercher ... avec Google" apparaissant après avoir fait une recherche */

/* paramètres de la table contact */

table.contact {}
table.contact td.icons {}
table.contact td.details {}

/* paramètres du pathway (quand affiché) */

.pathway {}
a.pathway,
a.pathway:visited {}
a.pathway:hover {}

/* titre du site (quand affiché) */

.site_name {}


/* ------------------------- Paramètres l'interface d'administration Joomla! en frontend ------------------------- */
/* les CSS suivant permettent de définir l'interface d'administration en frontend (lorsqu'un utilisateur est connecté) */

.ontab {} /* apparence des onglets actifs dans l'éditeur d'article en "frontend" */
.offtab {} /* apparence des onglets inactifs dans l'éditeur d'article en "frontend" */
.tabpadding {} /* défini la largeur les fenêtres de saisie (formulaire) */
.tabheading {}
.pagetext {} /* apparence du contenu des fenêtres de saisie du contenu */

.message { } /* style du message envoyé par l'éditeur en frontend suite à une action de l'utilisteur, par exemple "Publication sauvegardée avec succés" */