Le petit dotclear illustré

Aller au contenu | Aller au menu | Aller à la recherche

Gros plan sur style.css

Les règles du fichier style.css du thème par défaut (DotClear version 1.2RC).

Attention, cette feuille de style date d'une version antérieure à celle qui est actuellement distribuée. Les volontaires pour refaire le même travail avec l'actuelle sont les bienvenus !

Avant d'entrer dans le vif du sujet, quelques trucs indispensables

margin et padding

Les marges intérieures (padding) et extérieures (margin) se donnent dans l'ordre suivant :

  • 4 valeurs : haut, droite, bas, gauche ;
  • 2 valeurs : haut et bas puis droite et gauche ;
  • 1 valeur : partout.

em

est une valeur proportionnelle à la taille (font-size) du texte par défaut, en typographie son équivalent est le cadratin. Ici aucune taille n'est définie en valeur absolue. La taille de référence sera donc de la taille de police par défaut du navigateur du visiteur ; par défaut la plupart des navigateurs prévoient 16 pixels.

clear (utilisé dans cette feuille avec le footer et pour les post-info)

La propriété "clear" interdit à un élément d'être adjacent à une boîte flottante. Ainsi clear:both place l'élément sous toute boîte flottante qu'elle soit à gauche ou à droite. Voir OpenWeb par exemple pour de plus amples explications.

Mais venons-en au fait

/* ***** BEGIN LICENSE BLOCK *****
 * This file is part of DotClear.
 (...)
 * ***** END LICENSE BLOCK *****
 * Contributor(s):
 *  Olivier Meunier */

Dans la feuille de styles les passages encadrés par /* au début et */ à la fin signalent un commentaire. Ces lignes ne seront pas interprétées comme du code par les navigateurs.

Body et paramètres par défaut

body {
    margin : 0;
    padding : 0;
    font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
    font-size : 0.75em;
    background : #e1e1e1;
    color : #333;
}

Soit :

  • pas de marges extérieures (margin) ni de retrait (padding)
  • famille de caractères par défaut : premier choix Verdana, si le visiteur ne l'a pas alors Arial, s'il n'a pas Arial, Geneva, etc. A noter : si le nom de la police contient une espace on note son nom avec des guillemets. Ex. : "Trebuchet MS".
  • taille du texte par défaut à 0.75em (soit 12 pixels selon l'explication donnée plus haut pour les em). Cette taille devient la nouvelle taille de base.
  • couleur du fond de la fenêtre du navigateur : gris.
  • couleur du texte par défaut : noir.
p { margin : 1em 0; }
img { border : none; }
form { display : block; margin : 0; padding : 0; }
 

Soit :

  • les paragraphes seront espacés au-dessus et en dessous par 1em avant et 1em après ;
  • les images n'auront pas de bordure ;
  • les "form" (le formulaire de recherche par exemple) seront des blocs sans marges ni retrait.
h1 { font-size : 2em; margin : 0.67em 0; }
h2 { font-size : 1.4em; margin : 0.83em 0; }
h3 { font-size : 1.17em; margin : 1em 0; }
h4 { font-size : 1em; margin : 1.33em 0; }
h5 { font-size : 0.83em; margin : 1.67em 0; }
h6 { font-size : 0.67em; margin : 2.33em 0; }

code,pre { font-family : "Courier New",monospace; font-size : 1em; }

q { font-style : italic; }
 

Les spécifications propres à chaque niveau hiérarchique des titres h1 à h6 (taille et marges) et l'apparence des textes qui seront dans des balises code, pre (police et taille) ou q (style italique).

a {
    color : #6E602F;
}
a:hover, a:focus, a:active {
    color: #0373A1;
}

a[hreflang]:after {
    content: "\0000a0(" attr(hreflang) ")";
    color : #666;
    background : transparent;
}
 

L'apparence des liens :

  • a : au départ, brun
  • a:hover : au survol
  • a:focus : cliqués
  • a:active : activés, bleu foncé pour les trois
  • a[ hreflang]:after : mention de la langue du lien (si elle est renseignée) en gris
h2, h3 {
    font-family : "Trebuchet MS",Arial,Helvetica,sans-serif;
}
h2 {
    font-weight : normal;
}
 

Des spécificités pour les titres h2 et h3. (Note : on aurait pu aussi indiquer ces spécificités lors du "listage" des h1 à h6 vus plus haut.)

Paramètres spécifiques

#page (toute la page)
 /* Layout
-------------------------------------------------------- */
#page {
    width : 728px;
    margin : 0 auto;
    padding : 0;
    background: #fff url(images/bg.png) repeat-y left;
}
 

L'élément page fera 728 pixels de large, sans espace ajouté au-dessus ni en dessous. La mention "auto" pour les marges de gauche et de droite centrera la page en largeur dans le body.

L'image ici appelée dans le fond c'est l'ombre grise de part et d'autre de la page. Cette image est en fait une large bande blanche avec du gris de chaque côté. Repeat-y donne l'instruction de la reproduire verticalement jusqu'en bas de la page ; left donne son point d'appui calé à gauche de l'élément "page".

#top (bandeau de titre du blog)
#top {
    margin : 0;
    background: #545454 url(images/head.png) repeat-x 0 6px;
    color : #39455B;
    height: 75px;
    padding: 1px 0 0 0;
    margin : 0 9px;
}
 

L'entête de la page n'aura pas de marge, son fond est noir avec une image reproduite horizontalement (repeat-x) en partant appuyée en haut (0) et à 6 pixels des marges (6px).

La couleur par défaut du texte est bleue, la hauteur de l'élément est de 75 pixels, le retrait de 1 pixel en haut et rien sur les trois autres côtés. Sur certains navigateurs on voit d'ailleurs ce pixel : c'est la fine bande noire qui surplombe l'en-tête.

#top h1 {
    margin : 10px 0 0 10px;
}
#top a {
    color : #39455B;
    text-decoration : none;
}

Le titre (incrémenté automatiquement en fonction du titre de blog que vous avez donné dans l'interface de configuration) sera décalé de 10 pixels par rapport au haut et de 10 pixels à gauche. La couleur du lien sera sera bleu nuit, il ne sera pas souligné. Remarque : comme le template.php prévoit que le titre soit un lien qui permette de revenir à la page d'accueil du blog, c'est de fait la couleur que vous définissez ici qui sera appliquée au titre (je ne sais pas si je suis bien claire, là...).

#prelude (liens de navigation)
#prelude {
    position : relative;
    top : -65px;
    margin : 0;
    padding : 0 15px 0 0;
    font-size : 0.85em;
    text-align : right;
    color : #abd6de;
}
#prelude a {
    color : #abd6de;
}
#prelude a:hover, #prelude a:focus {
    color : #0373A1;
}
 

Le prélude sera placé relativement au bloc précédent dans son flux (en l'occurence le titre) en remontant de 65 pixels par rapport à sa place d'origine. Cela le place dans le bandeau du titre. Marges à zéro, retrait de 15 pixels par rapport au bord droit, corps à 85% de la taille de base des caractères, alignement à droite.

Les liens seront de couleur bleu clair. Remarque : cela permet que ces liens de navigation existent pour les non- ou mal-voyants tout en restant invisibles pour les autres visiteurs.

#main, #content (espace des billets et commentaires)
#main {
    float : left;
    width : 500px;
    margin-right : 0px;
}

#main h3 {
    color : #333;
    margin-top : 2em;
}
 

Le main, sera positionné en "float" à gauche. D'une largeur de 500 pixels et à 2em du haut du bloc précédent.
 

#content {
    padding : 1px 0 1em 19px;
}
 

Le content aura des renfoncements de 1 pixel en haut et 19 pixels à gauche.
Remarque, dans ce template le content et le main se confondent pratiquement mais la présence de ces deux conteneurs peut vous permettre d'ajouter des éléments dans main outre le #content.
 

#sidebar (menu)
/* Sidebar
-------------------------------------------------------- */
RÈGLES GÉNÉRALES
#sidebar {
    margin-left : 515px;
    margin-right : 9px;
}
 

Le menu sera placé à 515px du bord gauche de la page, un retrait de 9 pixels à gauche sera appliqué.
 

#sidebar h2 {
    font-weight : normal;
    color : #598F9A;
    text-transform : uppercase;
    border-top : 2px solid #A3A3A3;
    padding : 0 0 0 0;
    margin : 1.3em 0 0.3em 0;
}
 

Spécifications propres aux titres de niveau h2 pour le menu.
Graisse normale, couleur bleu-vert, transformé en majuscules quelle que soit la saisie, surligné d'un trait continu de 2 pixels d'épaisseur de couleur grise. Pas de retrait, marges à 1.3 em au-dessus et 0.3 em en dessous.

LES LISTES
#sidebar ul {
    padding-left : 1.5em;
    margin : 0 0 0 0;
}
 

Les listes seront décalées de 1.5 em à gauche. Pas de marge.
 

#sidebar li {
    list-style : square;
    margin-top : 0.15em;
    color : #e2d6ad;
    background : transparent;
}

#sidebar li:hover {
    color : #39455B;
    background : transparent;
}
 

Aspect des éléments des listes (catégories, liens, archives, etc.) :
liste à puces carrées, marge supérieure de 0.15 em pour chaque élément, couleur beige-doré, fond transparent. Au survol, la couleur deviendra bleu nuit.

Remarque : comme les seuls "non-liens" des listes sont les puces carrées et que la couleur des liens par défaut est brun c'est ce qui explique que lesdits carrés soient de couleur plus claire que les listes.

#sidebar a {
    text-decoration : none;
}
 

Pas de soulignement pour aucun des liens du menu.

LE CALENDRIER
/* Calendar */
#calendar {
}
#calendar h2 {
    display : none;
}
 

Dans le template.php, une balise h2 contenant le mot "Calendrier" est présente. Ce "display:none" permet de ne pas afficher ce champ.

#calendar table {
    border-collapse : collapse;
    font-size : 0.85em;
    margin : 0 auto;
}
 

Le tableau du calendrier est en 2D. Les caractères sont à 0.85em par rapport à la taille de base. Pas de marges en haut ou en bas des cellules, marges gauche et droite automatiques.

#calendar caption {
    padding : 0 0 0.3em 0;
    font-size : 1.2em;
    margin : 0 auto;
}
 

Espace ajouté de 0.3em sous le titre (mois) du tableau, taille des caratères à 1.2em, pas de marges supérieure ou inférieure, marges auto à gauche et à droite - donc centré.
 

#calendar abbr {
    border : none;
}
#calendar th, #calendar td {
    border : none;
    padding : 1px;
}
#calendar td {
    text-align : center;
}
 

abbr -- sont ici les jours de la semaine (abrégés, d'où le "abbr")
th -- les lignes
td -- les cellules

#calendar td.active {
    border : 1px solid #0373A1;
}
#calendar td.active a {
    font-weight : bold;
}
 

Le texte (millésime du jour) des jours où il y a des billets sera bleu (c'est induit par les liens par défaut). Lorsqu'on clique sur une date en particulier et que les billets de cette date s'affichent, le numéro du jour [td.active] est entouré de bleu et figure en gras.
 

#calendar a {
    font-weight : bold;
}
 

Les liens du calendrier sont tous en gras.
 

RECHERCHER, CATÉGORIES, LIENS, SYNDICATION

Pas d'instructions particulières pour le moment. Vous pouvez enrichir ici.

/* Search form */
#search {
}
#q {
}

/* Categories box */
#categories {
}

/* Archives box */
#archives {
}

/* Links box */
#links {
}

/* Syndication box */
#syndicate {
}
#footer (pied de page)
/* Footer
-------------------------------------------------------- */
#footer {
    clear: left;
    margin: 2em 9px 0;
    padding: 3px 10px 5px;
    color: #fff;
    background: #545454;
    font-size: 0.8em;
    text-align: right;
    line-height: 100%;
}
#footer a {
    color : #fff;
}
 

Le clear:left permet de placer le pied de page sous le bloc (#main) à gauche de lui et ainsi éviter la superposition.
Marges (là, j'ai besoin d'infos je ne sais pas ce que ça veut dire quand il n'y a que trois valeurs). Idem pour le padding.

Couleur du texte : blanc. Fond du footer : quasiment noir, taille des caractères 0.8em, aligné à droite, hauteur de ligne 100% (nécessaire pour définir la hauteur du fond). Les liens apparaîtront également en blanc.

Billets et commentaires
BILLETS

Pas de notions nouvelles pour day.date, post et post-title, sauf le placement des pictogrammes en tête des titres de billet et pour les commentaires.

/* Post
-------------------------------------------------------- */
.day-date {
    font-size : 1em;
    font-weight : bold;
    margin-top : 2em;
    text-align : right;
    border-top : 2px solid #ccc;
    color : #666;
    background : transparent;
}

.post {
    margin-bottom : 2.5em;
}
.post-title {
    margin : 0.8em 0 0 0;
    color : #39455B;
    background : transparent url(images/ico_entry.png) no-repeat 0 40%;
    padding-left : 12px;
}
 

On place une image qui ne se répète pas (no-repeat) en arrière-plan du titre du post. Les valeurs 0 et 40% servent à s'assurer du bon alignement de l'image par rapport à la hauteur de la ligne. Le padding-left est utile pour décaler le texte à la droite de l'image.

.post-title a {
    color : #394558;
    text-decoration : none;
}
.post-info {
    font-size : 0.85em;
    clear : both;
    color : #666;
    margin : 0;
}
.post-chapo {
    margin-bottom : 2em;
}
.post-content {
}
.post-info-co {
    font-size : 0.85em;
    clear : both;
    color : #666;
    background : transparent url(images/ico_comments.png) no-repeat 0 40%;
    padding-left : 13px;
}
 

Même manoeuvre pour placer la "bulle" à côté de la ligne faisant un lien sur le formulaire de commentaires.

CI-DESSOUS, CE QU'ON VOIT QUAND ON CLIQUE SUR UN BILLET EN PARTICULIER

Outre le texte intégral du billet, voici où paramétrer l'aspect de ce qu'on voit quand on n'affiche qu'un seul billet.

#trackbacks {
}
#comments {
}
#comment-preview {
}

#trackbacks, #comments, #comment-preview {
    margin : 0 2em;
}

#trackbacks blockquote, #comments blockquote, #comment-preview blockquote {
    display : block;
    margin : 0 0 1em 0;
    padding : 1px 1em;
    font-style : normal;
    border : 1px solid #999;
    color : #666;
    background : transparent;
}
 

Display:block; impose la présentation les uns en dessous des autres des trackbacks, comments, comments preview, quelle que soit leur largeur.

.comment-info {
    margin : 0;
    background : transparent url(images/ico_comments.png) no-repeat 0 40%;
    padding-left : 13px;
}
 

et hop ! on remet la bulle cette fois au début de la ligne qui indique la date et l'auteur du commentaire.

POUR FIGNOLER LES MESSAGES D'ERREUR
/* Error messages
-------------------------------------------------------- */
.error {
    border : 1px solid #c00;
    background : #fee;
    padding : 0.5em;
}
.error ul {
    padding-left : 20px;
}
.error li {
    list-style : square;
}
 
LES PARAMÈTRES DES FORMULAIRES (saisie des commentaires, etc.)
/* Interactions
-------------------------------------------------------- */
fieldset {
    display : block;
    border : none;
    margin : 0;
    padding : 0;
}

input, textarea {
    font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
    font-size : 1em;
    border-width : 1px;
    border-color : #ccc;
}

input[type], textarea[name] {
    background: #F3EEDC;
}

input[type=submit], input[type=reset] {
    background : #ccc;
    color : #000;
}

input[type=submit]:hover {
    background : #598F9A;
    color : #fff;
}

textarea {
    width : 100%;
}

p.field {
    margin : 0.5em 0 0 0;
}

p.field label {
    display : block;
    font-weight : bold;
    font-size : 0.85em;
}

.form-help {
}

#comment-form {
}

input.preview {
}
input.submit {
}

#c_nom {
}
#c_mail {
}
#c_site {
}
#c_content {
}
#c_remember {
}
 

Si vous introduisez des blocks dans le template, voici des blocs tout prêts à être renseignés :

/* Extra blocks
-------------------------------------------------------- */
#block1 {
}
#block2 {
}
#block3 {
}
#block4 {
}
#block5 {
}
#block6 {
}

Et maintenant, à vous !