Un thème en kit

Dans cet article :

• modifier l'existant
• ajouter un élément décoratif

Kit utilise trois éléments décoratifs, une sorte d'arabesque en bas du menu, une vignette à côté du titre du billet et une spirale en haut de la zone des trackbacks et commentaires. Voici les règles qui les concernent :

#sidebar {
   width : 160px;
   float : right;
   margin : 20px 0 0 0;
   padding : 0 20px 40px 20px;
   background : transparent url(images/bas-sidebar.png) no-repeat bottom center;
   border-left:1px dashed #A71602;
   font-size:0.85em;
   color:#666;
   line-height:125%;
}

.post {
   background : transparent url(images/icopost.png) no-repeat;
   margin-bottom : 3em;
   }
.post-title {
   text-transform : uppercase;
   font-weight : normal;
   padding-left : 42px;
   }
.post-info {
   margin : 0.25em 0;
   color : #999;
   padding-left : 42px;
   }

#trackbacks {
   background : transparent url(images/comments.png) no-repeat top right;
   }

Remplacer les images existantes

Exemple sur la modification de la vignette apparaissant à gauche du titre du billet. (L'image fleurettes.png aura été déposée dans le répertoire kit1/images/.)

Le code :

.post {
   background : transparent url(images/fleurettes.png) no-repeat;
   margin-bottom : 3em;
   }
.post-title {
   text-transform : uppercase;
   font-weight : normal;
   padding-left : 50px;
   }
.post-info {
   margin : 0.25em 0;
   color : #999;
   }

Le résultat :

Notes sur le code utilisé ici :

• Le choix de placer cette imagette dans le background du billet plutôt que dans celui du titre répondait au besoin de pouvoir placer également la ligne d'informations à son côté. Dans l'exemple ci-dessus on pourrait déplacer la ligne de background dans la règle de .post-title.
• Attention à penser à tenir compte de la taille de l'image pour régler les padding-left du titre du billet et de la ligne d'informations. Ici il a été augmenté pour le titre du billet et supprimé pour la ligne d'informations.

(Image disponible dans le répertoire zegoodies.)

Ajouter un élément décoratif

Méthodologie :

1. repérer l'identifiant ou la classe de l'élément
2. placer l'image dans le répertoire kit1/images/
3. modifier la valeur du background correspondant et ajuster éventuellement les autres propriétés.

Exemple de placement d'un guillemet en fond des citations :

Code de .post blockquote modifié :

.post blockquote {
   margin : 2em 0 2em 2em;
   padding : 0 2em 0 40px;
   background : transparent url(images/quote.png) no-repeat top left;
   }

(Image quote.png diponible dans le répertoire zegoodies.)