|
Pour réaliser un template pour Joomla! il est impératif de connaitre le nom de toutes les classes CSS qui identifie les titres, les menus, les tables, les DIV etc etc... Pas évident d'autant que Joomla! en propose un nombre assez conséquent. Je vous propose dans cet article de visualiser chaque classe de Joomla grâce à des captures d'écran. Pour faciliter l'identification des éléments j'ai tout simplement rajouté un cadre rouge de 2 pixels de larges au différentes classes CSS. Voyons ce que cela donne. Articles en cours de redaciton
table.contentpane {} Comme on le voit, cette classe pointe vers un tableau qui entoure les composants comme : Contact, Liens mais aussi le composant chargé d'afficher les news etc etc...  table.contentpaneopen {}
Pointe vers une table qui contient les contenus comme les articles : .small {} Pointe vers les textes de petite taille comme le nom des auteurs ou le nombre d'article d'une catégorie : .createdate {} & .modifydate{}
Pointe respectivement vers les textes de date de création et date de modification des articles : .componentheading{} Pointe vers les titres des modules : .contentheading {} Pointe vers les titres des articles : .moduletable {} Pointe vers le bloc contenant les modules : .mainlevel {} Pointe les les liens de premier niveau (les liens des menus de niveau inférieur portent la classes .sublevel{} ) : .sectiontableheader {} Pointe vers les titres des tables de sections : .inputbox {} Pointe vers les boites de saisie : .poll {} Pointe vers un "cadre" qui entoure les sondages : td.sectiontableentry1 {} Eux... ba... sectiontableentry1 quoi : td.sectiontableentry2 {} ....et sectiontablenetry2 (voir le 1 pour comprendre de quoi il s'agit) : .back_button {} Pointe vers le bouton "Retour" des articles : span.pathway {}Le pathway est dans un span de class... span.pathway, cette class permettra donc de controler l'apparance aisni que les marges et paddings du pathway. .button {} Pointe vers les boutons de validation : .readon {} Pointe vers les textes "Lire la suite..." : .toclink {} Identifie le texte qui compose l'index d'un article multi-pages : |