Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

2 mai 2008 5 02 /05 /mai /2008 12:42

Voici quelques précisions sur la classe des modules du CSS d’Over-Blog. Les modules sont les petites choses que l’on trouve dans les colonnes : les derniers articles publiés, les liens, la présentation, l’inscription à la newsletter… etc…

Il est souvent indispensable de savoir les modifier afin de les adapter à son choix de design.

 

Les modules s’identifient dans le CSS par cet identifiant :

.box {}

 

On peut aussi trouver les éléments suivants :

.box-titre {} _______________________ le texte du titre des module

.box h2 {}  _________________________ l’entête du module où se trouve le titre

.box-content {} _____________________ le contenu des modules

.box-content p {} ___________________ les textes des modules

.box-content ul {} __________________ les listes des modules

.box-content li {} __________________ les puces des modules

.box-footer {} ______________________ les pieds des modules

 

Ce qui est utile pour mettre une bordure, un cadre, une décoration autour des modules :

.box-top _____________________ le haut des modules

.box-left ____________________ le côté gauche des modules

.box-right ___________________ le côté droit des modules

.box-bottom __________________ le bas de la boîte des modules

.box-topLeft _________________ le coin en haut à gauche des modules

.box-topRight ________________ le coin en haut à droite des modules

.box-bottomLeft ______________ le coin en bas à gauche des modules

.box-bottomRight _____________ le coin en bas à droite des modules

 

 

Comment mettre des éléments ou un cadre autour des modules ?

 

Le haut du module :

Il faut ajouter une image en fond de la classe .box-top

.box-top { background-image: url(http://monimage/haut_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-top { background-image: url(http://monimage/haut_module.png); background-repeat: repeat-x; background-position: top center;}

 

Il faut ensuite refaire cette opération pour chaque éléments avec chaque image si besoin est. Ce n’est pas nécessaire de mettre une image à chaque endroit possible des modules : vous pouvez n’indiquer qu’une bordure, qu’un titre, qu’un pied…

Mais si vous souhaitez faire la totale, voici un exemple de code :

Le bas du module :

Il faut ajouter une image en fond de la classe .box-bottom

.box-top { background-image: url(http://monimage/bas_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord inférieur du module et qu’on veut qu’elle puisse être répétée pour être présente dans toute la largeur de la colonne et centrée :

.box-bottom { background-image: url(http://monimage/bas_module.png); background-repeat: repeat-x; background-position: bottom center;}

 

Encore un autre ?

L’angle en haut à droite du module :

Il faut ajouter une image en fond de la classe .box-topRight

.box-topRight { background-image: url(http://monimage/anglehautdroite_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on ne veut pas qu’elle soit répétée et quelle soit collée à droite :

.box-topRight { background-image: url(http://monimage/ anglehautdroite.png); background-repeat:no-repeat ; background-position: top right;}

 

Allez, un dernier :

Le côté gauche du module :

Il faut ajouter une image en fond de la classe .box-left

.box-left { background-image: url(http://monimage/cotegauche_module.png); }

Pour plus de précisions, on va lui indiquer que nous voulons que l’image soit placée contre le bord supérieur du module,  qu’on veut qu’elle soit répétée en hauteur et quelle soit collée à gauche :

.box-left { background-image: url(http://monimage/cotegauche.png); background-repeat:y ; background-position: top left;}

 

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

camille la it girl 14/11/2008 18:49

j'aimerai rajouter une bordure blanche autour de la zone de texte pour que mon bloc pub soit entourré de blanc et ne touche pas le papier peint. Sais tu comment faire ?

merci bcp

Christelle Vinsonneau 22/11/2008 09:45



Tu pourras trouver les réponses à tes questions (même si je ne réponds qu'aujourd'hui...) sur cet article publié pour t'aider : http://photo.graph.over-blog.com/article-25016415.html


Si tu as des questions...



e 08/10/2008 11:00

bonjour,
par exemple, sur mon blog je voudrais remplacer les puces existantes par une autre image ou par un caractère.
peux-tu donner un exemple de ce qu'il faut mettre à l'intérieur de .box-content li {} ?
merci !

Christelle Vinsonneau 08/10/2008 18:29


ok... je ferai un article d'ici quelques jours sur ce sujet.
A surveiller !