Introduction
Nous allons maintenant passer au fichier content.css, celui-ci inclut le design de tout ce qui touche les modules, les minis modules ainsi que les commentaires et encore bien d'autres choses que vous allez découvrir au fur et a mesure.
Les conteneurs
Code CSS :
/* Conteneur */ div.block_container { width:auto; margin:10px auto; border:1px #cccccc solid; background:#F7F8F5 url(images/contentbg.png) repeat-x; -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; }
Cette partie sert a définir les conteneurs, par exemple quand vous allez créer un menu de contenu, c'est cette classe qui va être prise en compte.
Code CSS :
-moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;
Ceci sert à mettre des arrondis de 12 pixels sur tous les navigateurs sauf qu'Internet Explorer ne gère cette fonction qu'à partir de sa version 10. Si vous regardez bien le code, vous verrez que nous avons un arrière-plan dans les tons blanc ( #F7F8F5 ) ainsi que l'image contentbg.png qui est utilisé dans en grande partie dans le thème base, vous avez aussi un contour de 1 pixel en gris ( #cccccc )
Code CSS :
border:1px #cccccc solid;
Les tableaux
Code CSS :
/* Entête de conteneur et des tableaux */ div.block_top, table tr:first-child th { padding:5px 6px; color:#FFFFFF; background:#5D7C94 url(images/msg_top_row.png) repeat-x; text-align:left; font-size:0.75em; font-weight:bold; text-transform:uppercase; }
Cette classe est utilisée dans les tableaux du thème, comme par exemple la galerie, je ne vais pas rentrer dans les détails puisqu'il n'y a rien d'exceptionnel dans cette partie là.
Les titres
Code CSS :
/* Titres */ h1 { color:#5C5C5C; font-size:18px; } h2.title { font-size:16px; font-weight:bold; } /* Titres */ h3.title { font-size:12px; font-weight:bold; display:inline; } /* Sous-Titres */ h5.sub_title { /* Titre des menu */ font-size:12px; color:#515C68; } h6.sub_title2 { /* Sous titre dans les menu */ font-size:12px; font-weight:bold; padding-top:4px; text-indent:10px; width:155px; height:32px; color:#515C68; }
Le formulaire de contact
Le formulaire de contact ainsi que l'encadré qui va vous servir à mettre des commentaires ainsi que sur le forum.
Code CSS :
fieldset{ font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,'Bitstream Vera Sans',Times,serif; margin:20px 0; padding:6px; border:1px solid #CCCCCC; color:#445766; background:#eceeef; position:relative; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; }
Les systèmes de messagerie
( Inclus messagerie privé, commentaires etc. )
Code CSS :
a.msg_link_pseudo { font-size:11px; color:#e8eaeb; font-weight:bold; } a.msg_link_pseudo:hover { color:#f2fbff; font-weight:bold; }
Définit la couleurs ou doit apparaître le pseudo de la personne qui a laissé un commentaire.
Code CSS :
:hoverPrésent dans la seconde classe définit le style à appliquer à l'élément au survol de la souris.
Code CSS :
.msg_container,.msg_container2 { /* Case contenant l'ensemble du message */ background:#FFFFFF url(images/border.png) repeat-y right; margin-left:1px; overflow:hidden !important; height:auto !important; overflow:visible; height:1%; clear:both; } .msg_container2 { /* Case contenant l'ensemble du message => Couleur alternative */ background:#F4F9FA url(images/border.png) repeat-y right; }
Classe contenant les messages, à savoir que msg_container2 définit un message sur deux.
Code CSS :
.msg_top_l{ margin-right:0px !important; margin-right:-3px; height:34px; width:29px; background:#91BAD8 url(images/msg_top_l.png) no-repeat left; float:left; } .msg_top_r{ margin-left:0px !important; margin-left:-3px; height:34px; width:21px; background:#91BAD8 url(images/msg_top_r.png) no-repeat right; float:right; } .msg_top { height:25px; background:#FFFFFF url(images/msg_top.png) repeat-x; padding-left:6px; margin-left:20px; margin-right:15px; padding-top:9px; } .msg_top a { color:#FFFFFF; }
Barre du haut
Code CSS :
.msg_pseudo_mbr { /* Pseudo du membre */ width:127px; background:#5D7C94 url(images/msg_top_row.png) repeat-x; padding:2px 4px; float:left; margin-right:0px !important; margin-right:-3px; margin-left:-127px !important; margin-left:-64px; margin-top:-4px; }
Arrière plan du pseudo.
Code CSS :
.msg_top_row { /* Case au dessus du message, indique la date et les boutons d'administration */ height:16px; background:#5D7C94 url(images/msg_top_row.png) repeat-x; font-size:11px; color:#e8eaeb; margin-right:1px; border-top:1px solid #325889; border-bottom:1px solid #325889; padding-top:4px; padding-left:127px; overflow:hidden !important; height:auto !important; overflow:visible; height:1%; }
Toute la barre où il y a les icônes éditer, supprimer etc.
Code CSS :
.msg_info_mbr { /* Case des informations du membre */ background:#E3EDF5; width:127px; padding:4px; float:left; font-size:10px; border-right:1px dotted #C4CED6; }
Tout la partie qui contient l'avatar du membre, son statut ainsi que le groupe.
Signature du membre
Code CSS :
.msg_sign,.msg_sign2 { /* Signature du membre */ background:#FFFFFF url(images/border.png) repeat-y right; padding:4px; font-size:11px; margin-left:136px; border-left:1px dotted #C4CED6; } .msg_sign2 { /* Signature du membre => Couleur alternative */ background:#F4F9FA url(images/border.png) repeat-y right; }
Code CSS :
.msg_sign_overflow { /* Signature du membre, fixe la hauteur maximale */ height:auto !important; height:80px; width:99%; max-height:80px; max-width:99%; overflow:hidden; }
Taille maximum de la signature du membre ( changer la valeur heigth:80px; )
Les modules
Code CSS :
.module_position { width:98%; margin:auto; } .module_top_l { /* Barre supérieure des modules */ } .module_top_r { } .module_top { height:18px; text-indent:10px; font-size:12px; font-weight:bold; color:#515C68; border-bottom:2px solid #515C68; } .module_top a { } .module_top_title { float:left; font-size:12px; margin-left:3px; font-weight:bold; } .module_top_title img { margin-top:-2px; } .module_top_com { float:right; }
Le haut des modules ( sur le thème base cette classe ne sert pas à grand chose )
Code CSS :
.module_contents { /* Contenu des modules */ padding:20px 15px; padding-bottom:15px; clear:both; text-align:justify; }
Partie entre le haut et la bas de chaque module, pareil que le module_top sur le thème base elle défini simplement la taille, pas plus.
Code CSS :
.module_bottom_l { /* Barre inférieure des modules */ } .module_bottom_r { } .module_bottom { height:22px; padding:2px 0 15px 6px; font-size:10px; }
Définit l'espace bas des modules.
Les minis modules
Définit tout l'ensemble des mini-modules.
Code CSS :
.module_mini_container { /*Placement des mini modules */ width:180px; margin:0px; margin-bottom:10px; background:#F7F8F5 url(images/contentbg.png) repeat-x; border:1px #cccccc solid; border-spacing:1px; padding:5px; -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; }
[title=4]
Partie haute de chaque mini-modules.[/title]
Code CSS :
.module_mini_top { height:24px; font-weight:bold; text-align:center; }
Partie centrale des mini-modules.
Code CSS :
.module_mini_contents { border-top:none; border-bottom:none; text-align:center; padding:4px; padding-top:5px; padding-bottom:0px; }
Partie basse des mini-modules.
Code CSS :
.module_mini_bottom { /* Bordure inférieure des modules minis */ height:15px; }
Vous voilà à la fin du fichier content.css, je n'ai passé en revu que les éléments les plus importants, le reste n'est utile que si vous souhaitez personnaliser à fond votre thème.