CSS détaillé

Voici le design de ce blog, qui est basique (il ne fait que le minimum), simplifié (pour etre facilement modifiable), et commenté (pour etre compréhensible par tout le monde)

/*************************/
/* Structure: 3 colonnes */
/*************************/
body {margin: 2px; background: #CCC;} /* fond general du blog */
#global {border: 1px solid black; background: #DDD; margin: auto; width: 94%; } /* Pour centrer le blog */
#top {border: 0px; margin: 5px; } /* Entete */
#cl_1_0 {border: 1px solid #A17272; background: #D2BDBD; width: 20%; position: float; float: left; margin: 0px 5px; padding: 3px;} /* Colonne n 1 */
#cl_1_1 {border: 1px solid #A17272; background: #D2BDBD; width: 54%; position: float; float: left; margin: 0px 2px; padding: 5px;} /* Colonne articles */
#cl_1_2 {border: 1px solid #A17272; background: #D2BDBD; width: 20%; position: float; float: right; margin: 0px 5px; padding: 3px;} /* Colonne n 3 */
#footer {margin: 5px; padding: 3px;} /* pied de page */


/**********************************/
/* Styles pratiques, a connaitre */
/**********************************/
h2 {display: block; text-align: center;} /* Alignement de tous les titres */
a img {border: 0px;} /* supprimer les bordures sur les images qui servent de lien */
a:visited, a {color: #fff;} /* liens (deja visites ou non) */
input, textarea {font-size: 90%; border: 1px solid #ffffff; background: #A17272; color: white; padding: 0px 3px;} /* les champs des formulaires */
form {margin: 0px; padding: 0px;} /* espaces autour des formulaires */
blockquote {border: 1px solid black; background: #FFF; padding: 5px;} /* encart de tabulation, pour presenter le code */

/***********/
/* Modules */
/***********/
.box-titre h2 {font-size: 15px; color: #933; text-decoration: none; margin: 0px; margin-top: 5px;} /* Titres des modules */
.box-content {font-size: 100%; border-bottom: 3px solid #A17272; padding-bottom: 5px;} /* Contenu des modules */
.box-footer {display: none;} /* Bas des modules */
.recherche {text-align: center;} /* module recherche */
.newsletter {text-align: center;} /* module newsletter */

/************/
/* Articles */
/************/
.article {text-align: justify;} /* Contenu des articles */
.afterArticle a {padding-left: 15px; } /* lien commentaires */
.afterArticle {text-align: right; padding-bottom: 5px; margin-top: 10px; margin-bottom: 25px; border-top: 1px solid #A17272;} /* lignes apres les articles (publie par + commentaires */
.commentMessage, .commentOption {background: orange; padding: 3px;} /* Le commentaire et son auteur */
.date {font-size: 90%; text-align: right;} /* format et position de la date */


/*************************/
/* Liens du pied de page */
/*************************/
#footer a {color: black; text-decoration: none;} /* lien dans le pied de page */
#footer a:hover {text-decoration: underline;} /* liens survoles */

On repère immédiatement les groupes de lignes. Il y 5 grandes parties:

• Structure. Ces lignes là permettent de définir l'aspect globale du blog (positions, fond et bordures des colonnes)
• Style pratique. Ces lignes permettent de modifier les styles qui sont souvent utilisés: titres, liens, images, formulaires...
• Modules. Ces lignes permettent de relooker les modules. D'abord de façon générale, puis de façon détaillée pour certains.
• Articles. Ces lignes permettent de présenter les articles correctement (y compris une ligne pour les commentaires)
• Liens du pied de page. Ces lignes montrent qu'on peut vraiment modifier l'aspect de tout. Pas très utile dans ce cas, sauf que les liens auraient été blanc sur fond clair: illisible.

Ce CSS n'est pas utilisable n'importe comment.

• Dans Configurer, il faut choisir une structure à 3 colonnes (et il vaut mieux mettre des modules sur les 2 colonnes de modules).
• Dans Design, il faut choisir un design (peu importe lequel), puis "Design (CSS)". Il faut cocher la case "Je veux, modifier le CSS moi meme" et le copier dans le champ du css à la place de ce qu'il y avait.
• Il faut cliquer sur le bouton "Modifier l'héritage", et décocher les 4 cases d'héritage. (qui définissent des élements que j'ai préféré redéfinir moi même)
• Et enfin, pour me remercier, j'aimerais bien avoir un commentaire ou un lien pour voir ce que vous avez réussi à faire en partant de ce CSS.