Bordure et fond de module

Publié le par PêUR

Mise à jour le 23/01/2006 00:31

Cet article a pour but d'expliquer comment modifier à votre convenance les modules de votre blog. N'hésitez pas à aller rendre visite à Zoélie  ici  ou  , ou dire coucou à la FAQ , les explications sont différentes, les résultats sont les mêmes  

Présentation

Les modules sont les boîtes à droite et/ou à gauche de votre blog. Il en existe 16 : Calendrier, Archives, Catégories,Articles récents, Commentaires, Liens, Albums, Newsletter, Recommander, Recherche, W3C, Concours, Présentation, Images Aléatoires et 2 textes libres

Leur style change selon le modèle de CSS que vous avez sélectionné:





Les modèles 1, 2, 3 et 4 ne sont pas constitués de lignes simples encadrants les modules mais de background. Le modèle 5 et supérieur diffèrent des 4 autres modèles de par leur architecture générale, cependant la construction des modules est identique. 

Architecture des modules

Pour appréhender les modifications a effecuter dans le CSS et afin d'arriver à nos fins, regardons comment est construit un module:

   

Dans le CSS on trouvera les classes suivantes correspondantes:

.box             {}
.box-top         {}
.box-left        {}
.box-right       {}
.box-bottom      {}
.box-topLeft     {}
.box-topRight    {}
.box-bottomLeft  {}
.box-bottomRight {}
.box-content     {}

 

Le vif du sujet (1) ou modification simple

Une modification très simple consiste à supprimer tous les background constituants les encadrements et de les substituer par des lignes simples, exemple sur le modèle 2:

Avant

.box        {background:url(http...}
.box-top    {background:url(http...}
.box-left   {background:url(http...}
.box-right  {background:url(http...}
.box-bottom {background:url(http...}
.box-topLeft     {...}
.box-topRight    {...}
.box-bottomLeft  {...}
.box-bottomRight {...}
.box-content     {...}

Après

.box   {border:1px solid #000000;}
.box-top         {}
.box-left        {}
.box-right       {}
.box-bottom      {}
.box-topLeft     {}
.box-topRight    {}
.box-bottomLeft  {}
.box-bottomRight {}
.box-content     {}

Pour connaître les différents style supportés par l'attribut border, voir l'article L'attribut border 

 

Le vif du sujet (2) ou modification simple plus compliquée

Le principe suivant est le même que le précédent avec l'ajout d'un background dans le titre du module, exemple sur le modèle 2:

Avant

.box        {background:url(http...}
.box-top    {background:url(http...}
.box-left   {background:url(http...}
.box-right  {background:url(http...}
.box-bottom {background:url(http...}
.box-topLeft     {...}
.box-topRight    {...}
.box-bottomLeft  {...}
.box-bottomRight {...}
.box-content     {...}

Après

.box    {border:1px solid #000000;}
.box h2 {background:#FF4500;}
.box-top         {}
.box-left        {}
.box-right       {}
.box-bottom      {}
.box-topLeft     {}
.box-topRight    {}
.box-bottomLeft  {}
.box-bottomRight {}
.box-content     {}

 

Le vif du sujet (3) ou modification élaboré pour les pros de The Gimp, Photoshop et autres éditeur d'image

Cette méthode consiste à récupérer, une à une, les images constituants les bordures du modèle choisi afin de les modifier à vos couleurs et design.

Je vous mâche le travaille, ci-dessous les URL de ces images. Cliquez-droit sur chacune et faite enregistrer la cible sous...

  • Pour le modèle 1 (101):

box-bottom-center.png
box-bottom-left.png
box-bottom-right.png
box-middle-left.png
box-middle-right.png
box-top-center.png
box-top-right.png
fleche.png

  • Pour le modèle 2 (102):

box-bottom-center.png
box-bottom-left.png
box-bottom-right.png
box-middle-left.png
box-middle-right.png
box-top-center.png
box-top-right.png

  • Pour le modèle 3 (103):

box-top-center.png
box-bottom-center.png
box-top-left.png
box-bottom-left.png
top.png
box-bottom-right.png

  • Pour le modèle 4 (104):

box-bottom-center.png
box-bottom-left.png
box-bottom-right.png
box-middle-left.png
box-middle-right.png
box-top-center.png
box-top-right.png

Une fois modifié, il suffit de les télécharger dans Mes fichiers et de changer les URL des backgrounds des différentes classes constitutives des modules.

Le vif du sujet (4) ou modification pour les créatifs

Maintenant que vous avez compris le principe, mélangez les différentes méthodes

Les finitions

Maintenant que vous avez modifié le contour de vos modules, la question est de savoir comment rajouter  une couleur de fond, modifier la police du texte et des liens et de l'aspect des puces. Pour cela il faut modifier les lignes suivantes:

.box-content { background-color:#couleur; ... Couleur du background
.box-content p  { color:#couleur;...   Couleur du texte 
.box-content { color#:couleur;...  Couleur des liens
.box-content a:hover { color#:couleur;...  Couleur des liens au passage de la souris
.box-content li  { list-style:square;... Aspect des puces

Pour aller plus loin

Sachez que ces modifications affectent tous les modules en même temps. Cependant vous pouvez changez l'aspect d'un ou de certains modules uniquement. Comment faire ? En rajoutant l'identifiant du module à modifier et en dupliquant juste en dessous toutes les classes .box- qui changent, exemple pour le module "article récent":

#articleRecent
.box    {border:1px solid #000000;}
.box h2 {background:#FF4500;}
.box-top         {}
.box-left        {}
.box-right       {}
.box-bottom      {}
.box-topLeft     {}
.box-topRight    {}
.box-bottomLeft  {}
.box-bottomRight {}
.box-content     {}

 Voici la liste des identifiant par module:

#RightPart      Texte libre 1
#LeftPart       Texte libre 1
#Calendrier     Calendrier
#Categorie      Catégorie
#CommentRecent  Derniers commentaires
#ArticleRecent  Derniers articles
#Archive        Archive
#Lien           Lien
#Album          Album photo
#Recherche      Recherche
#Concours       Concours
#Newsletter     Newsletter
#W3C            W3C --> syndication
#Presentation   Présentation
#aleaIm        Images aléatoires

Articles connexes:

 

Publié dans CSS

Commenter cet article

grolix 15/05/2007 16:05

bonjour
malgrès toutes ces explications trés claires, voici 3 jours que j'essaye en vain de modifier mon design.

je comprend parfaitement ce qu'il faut faire pour modifier les modules, mais je ne retrouve pas, dans le css, les caractéristiques des modules (ex: les coins, le bord haut et bas,...)
peut etre que cela vient du fait de la version 2.0 d'over blog...
merci d'avance de m'éclairer (je craque...!)

PêUR 15/05/2007 23:37

Avec le modèle que tu as choisis les modules ne sont pas décomposé en coin haut gauche, coin haut droit... mais en trois parties: box-titre, box-content et box-footer.

Mélusine 06/04/2007 10:20

MERCI ! MERCI ! MERCI à toi !! génial, un grand merci pour ton aide, ça marche, je n'y croyais plus. Maintenant, si tu as des suggestions pour mon blog, je suis preneuse !!

PêUR 06/04/2007 17:23

R.A.S :)

Mélusine 03/04/2007 20:41

Au secours !! je n'y arriverais jamais !! j'ai beau lire toutes les explications, Anna K ou Zoéllie, et malgré leur patience, je n'arrive pas à "aérer" mes modules. J'explique, en fait j'ai rajouté une bordure fleurie pour séparer mes modules, mais j'aurais aimé rajouter de l'espace entre chaque module pour ne pas que ça fasse trop "serré", mais ça ne marche pas. Aurais-tu la solution ?
Merci à toi,
Mélusine...

PêUR 04/04/2007 09:03

Bonjour Mélusine,
Premièrement, pour que ta bordure fleurie soit moins collée au bas de chacun de tes modules, rajoutes une marge interne inférieure à la partie inférieure de ton module. Pour cela, rajoutes un padding-bottom: 20px; à ta classe .box-bottom
Deuxièmement, pour que les modules soient plus espacés les uns des autres, il suffit de rajouter une marge extérieure inférieure à chaque module. Pour cela, rajoutes un margin-bottom: 30px; à ta classe .box
Enfin, n'oublies pas de vider le cache de ton navigateur en faisant Ctrl + F5 afin de recharger le css modifié.

lory 31/01/2007 14:07

Merci pour cette explication, finalement j'ai compris comment ça marche!Maintenant je n'ai plus que la mettre en pratique!

PêUR 31/01/2007 21:57

:)

lionel 12/01/2007 13:36

Bonjour Pêur. je me tourne à nouveau vers toi pour une aide car je n'en trouve pas sur le forum d'Ob, malgré toutes leurs aides. Sur mon blog est apparu il y a deux jours une inscription en en-tête (à la place des pub texte) indiquant" impossible d'afficher"...
En fait, pour résumer, voici le lien de toute la discussion (ce sera peut-être plus simple que tout te réexpliquer, il y eu plusieurs étapes...) : http://forum.over-blog.com/0-forum-blog-1-2428765.html
Si tu peux m'aider, ce serait vraiment super!!!parceque 'en vérité je ne sais plus quoi faire :(
merci d'avance