Tutoriel Template CSS

Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 DESCRIPTION DU TUTORIEL Inventaire des styles CSS utilisés par les modules de base Mambo SOMMAIRE 1. INTRODUCTION ......................................................................................... 2 2. STYLES CSS PRINCIPAUX DES MODULES............................................. 2 3. AUTRES STYLES UTILISES PAR LES MODULES.................................... 3 4. STYLES CSS DES MODULES DU PACKAGE DE BASE DE MAMBO ...... 3 5. STYLES CSS DES MODULES UTILISATEURS....................................... 13
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 1 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 1. Introduction Ce tutoriel n'est pas un cours sur les propriétés et attributs des styles CSS. Il recense simplement les styles en usage dans les modules. Pour pouvoir modifier la feuille de styles d'un template, un minimum de connaissance dans ce domaine est nécessaire. Vous trouverez sur le forum de mambofacile.com une liste de sites WEB qui traitent du sujet. Tous les modules du package mambo de base sont passés en revue, ainsi que les modules utilisateurs que vous pouvez créer vous même. Toutes les informations incluses dans ce tutoriel ont été vérifiées sur les versions de mambo 4.5.2 et 4.5.3. 2. Styles CSS principaux des modules Un module est affiché sur votre site par l'intermédiaire d'un tableau assorti de la classe CSS : moduletable. Nous pouvons vulgariser ceci par le code suivant : <!­­ Affichage du module ­­> <table class="moduletable"> <tr><th> Titre du module </th></tr> <tr><td> Contenu du module </td></tr> </table> Nous pouvons aussi illustrer le résultat obtenu par cette représentation : Par conséquent, le fichier template_css.css de votre template doit comporter les styles CSS mambo suivant : Style Elément concerné table.moduletable table.moduletable th table.moduletable td Container du module Titre du module Contenu du module Note : Les styles table.moduletable th et table.moduletable td héritent respectivement des attributs des styles CSS th et td.
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 2 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 3. Autres styles utilisés par les modules Pour des besoins particuliers de mise en valeur de certains éléments, le développeur d'un module peut avoir à utiliser d'autres styles que ceux énoncés précédemment. Sur le plan pratique, ceci reste généralement limité aux styles définis dans les composants et les modules du package de base de mambo. Voici, ceux que vous rencontrerez le plus souvent : Style Eléments concernés a:hover a:link a:visited .button .inputbox Liens lors du survol de la souris Liens dans l'état normal Liens déjà visités Boutons de commandes. Zones de saisie. Cette liste n'est pas exhaustive. Le chapitre suivant donne la liste des styles utilisés par chaque module du package de base de mambo. Pour les autres modules, nous vous engageons à éditer les fichiers php correspondants pour découvrir d'éventuels styles spécifiques. 4. Styles CSS des modules du package de base de mambo Ce chapitre donne les styles CSS de l'ensemble des modules inclus dans le package de base de mambo. Pour chaque module : Ø Une illustration précise les styles CSS utilisés par mambo et indique leurs emplacements dans le module en objet. Ø Des notes et conseils sont présents chaque fois que le module le nécessite. 4.1. Styles CSS du module : mod_archive
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 3 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.2. Styles CSS du module : mod_banners La balise <img> est utilisée pour les images de type bmp , gif , jpg , jpeg et png . Dans le cas d'un fichier swf elle est remplacée par une balise <embed>. Le fichier mod_banners.php contient une valeur pour la propriété border de l'image. Personnalisations possibles : La définition d'un style img dans la feuille de style template_css.css conduit à l'application des propriétés de ce style à l'ensemble des images du site. Par conséquent, il est préférable d'embellir la bannière par l'ajout d'un style spécifique au template : Ø Par exemple : #banners . Dans ce cas, il convient d'associer ce style à la cellule du tableau contenant la bannière dans le fichier index.php. Cette solution est d'usage courant par les concepteurs de template, car elle ne nécessite pas de modification dans les paramètres d'édition du module. Ø Une autre méthode, consiste à utiliser un suffixe dans l'édition du module. Pour ce faire, compléter la rubrique Module Class Suffix avec par exemple : _banners . Cette solution nécessite ensuite l'ajout à votre feuille de styles template_css.css des styles suivants: Style Elément concerné table.moduletable_banners table.moduletable_banners th table.moduletable_banners td table.moduletable_banners td img Container du module banners Titre du module banners Contenu du module banners Image (bannière).
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 4 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 Cette solution est déconseillée pour les sites à templates multiples. Le changement de template conduit à une restitution aléatoire. Ø La définition d'un style table.moduletable img est possible. Mais dans ce cas, toutes les images affichées par l'ensemble des modules sont concernées. 4.3. Styles CSS du module : mod_footer Ce module est une nouveauté du package de base de la version 4.5.3 de mambo. 4.4. Styles CSS du module : mod_latestnews Note : Si les styles spécifiques à ce module sont absents du fichier template_css.ccs alors ils sont automatiquement remplacés par les styles suivants : Styles spécifiques Styles de substitution ul.latestnews li.latestnews a.latestnews:link a.latestnews:hover a.latestnews:visited ul li a:link a:hover a:visited
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 5 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.5. Styles CSS du module : mod_login 4.5.1. Styles avant identification de l'utilisateur 4.5.2. Styles après identification de l'utilisateur 4.6. Styles CSS du module : mod_mainmenu Voir le tutoriel : Styles CSS des menus.
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 6 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.7. Styles CSS du module : mos_mostread 4.8. Styles CSS du module : mod_newsflash Note : Dans l'exemple, ci­dessus, un lien a été ajouté directement dans le texte de l'article. 4.9. Styles CSS du module : mod_poll
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 7 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 Les styles suivants sont spécifiques à ce module : Style Eléments concernés .pools .pollstableborder Titre du sondage (question objet du vote). Encadrement des options du sondage. Par contre, ceux mentionnés ci­dessous sont utilisés notamment dans les tables (listes) de sections, de catégories et par le composant contacts : Style Eléments concernés .sectiontableentry1 .sectiontableentry2 Options du sondage : lignes paires. Options du sondage : lignes impaires. 4.10. Styles CSS du module : mod_random_image Note : Pour le style img, consulter le chapitre Styles CSS du module mod_banners. 4.11. Styles CSS du module : mod_related_items
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 8 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.12. Styles CSS du module : mod_rss Ce module est une nouveauté du package de base de la version 4.5.3 de mambo. Note : La première ligne de texte du module est forcée en gras à l'aide d'une balise <strong>. Dans cet exemple, il s'agit de la mention : Powered by Mambo 4.5.2.
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 9 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.13. Styles CSS du module : mod_rssfeed Note : Pour plus d'informations sur le style img, consulter le paragraphe Personnalisations possibles du chapitre Styles CSS du module mod_banners. Les commentaires restent les mêmes. 4.14. Styles CSS du module : mod_search 4.15. Styles CSS du module : mod_sections
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 10 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.16. Styles CSS du module : mod_stats Vous l'avez deviné, le gras des libellés est obtenu par des balises <strong>. 4.17. Styles CSS du module : mod_templatechooser Note : Pour le style img, consulter le chapitre Styles CSS du module mod_banners. 4.18. Styles CSS du module : mod_whosonline Le gras des noms des membres est obtenu par une balise <strong>.
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 11 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 4.19. Styles CSS du module : mod_wrapper
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 12 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 5. Styles CSS des modules utilisateurs Mambo autorise la création de modules personnels à l'aide du gestionnaire de modules. Les styles de ces modules sont les mêmes que ceux cités précédemment. Pour nous en convaincre, réalisons un petit essai. Etape 1 : Ouvrez le menu Modules du backend, Etape 2 : Sélectionnez l'option Modules du site, Etape 3 : Après affichage du Gestionnaire de modules du site, activez la commande Nouveau, Etape 4 : Complétez ensuite les données de Détails : Etape 5 : Conservez les Paramètres par défaut :
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 13 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 Etape 6 : Entrez le texte du contenu du module : Etape 7 : Puis sélectionnez les pages de publication de votre module : Etape 8 : Sauvegardez et allez admirer le résultat. Evidemment, les couleurs et le design correspondent aux styles CSS de votre template. Les modules utilisateurs sont donc publiés avec les mêmes styles principaux que les autres modules. Nous allons maintenant enjoliver notre module : Ø en plaçant un slogan au dessus du texte, Ø en mettant un lien vers le site http:www.mambofacile.com, Ø et une petite liste de qualificatifs engageant le visiteur à aller consulter ce tutorial. Avant de commencer, rendez­vous dans l'onglet Site de la configuration de votre site, pour sélectionner l'éditeur : No WYSIWYG Editeur :
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 14 sur 15 Tutoriel Template CSS Mambo 4.5.2 à 4.5.3 FR Styles CSS des modules ­ Version 1.0 Une fois que cette modification est sauvegardée, vous pouvez éditer le module utilisateur dans le gestionnaire de modules du site. Apportez les modifications suivantes au contenu : Sauvegardez et restez en extase devant le résultat : Voilà, il ne vous reste plus qu'à donner libre cours à votre créativité...
© mambofacile.com – Contribution de Papounet le 05/07/2005 Page 15 sur 15