Profil

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

Photo.Graph

Catégories

7 janvier 2010 4 07 /01 /janvier /2010 10:50

Je reçois des questions par commentaires, par formulaire de contact, par mail aussi. Il y a peu j’ai reçu la question suivante : comment personnaliser ses modules ?

 

Je me suis dis : « et bien il suffit de suivre la méthode exposée dans l’article correspondant » et c’est là que je me suis aperçue que je n’avais jamais fait cet article alors que j’en étais persuadée.

 

Alors aujourd’hui, je comble ce trou : voici comment personnaliser un (ou tous) ses modules.

 

 

Pour commencer voici toutes les classes du module :

 

.box

C’est la classe générale de tout le module

 

.box a

Concerne les liens des modules non survolés par la souris

 

.box a:hover

Concerne les liens des modules survolés par la souris

 

.box-content

Les textes contenus dans les modules

 

.box-content ul

Les listes présentent dans les modules

 

.box-content ul li

Les puces des listes dans les modules

 

.box-titre

Concerne la cellule qui contient le titre du module

 

.box-titre h2

Concerne le texte du titre du module

 

.box-footer

Concerne le pied du module

 

 

box-module

 

 

Et maintenant, un petit exemple :

Je veux que mes modules soient encadrés d’une bordure épaisse en pointillés de 3px de couleur blanche et qu’il y ait une image en arrière plan sur un fond noir. Je veux que le texte à l’intérieur des modules soit écrit en rouge, en arial en 13px avec un espace de 3px sur les côtés pour éviter qu’il touche ma bordure blanche en pointillés et que mes liens soient en blanc et que survolés par la souris ils soient soulignés. Je veux que mes puces soit jaunes et rondes, que les liens présents dans les modules soient bleu et que quand je passe ma souris ils deviennent noir. Je veux que mon titre ait une autre image en fond présente en haut à droite qu’une fois et donc qui ne se répète pas et que mon titre soit écrit en blanc, en majuscule et soit souligné et pour terminer, je veux que mon pied de module fasse 10 px de hauteur et qu’il contienne une troisième image répétée en largeur.

 

 

 

 

Ce qui fait :

 

 

.box {border : 3px dashed #FFFFFF ; background: #000000 url(http://monimage.jpg);}

.box a {color :#FFFFFF ;}

.box a:hover {text-decoration:underline;}

.box-content {color :#FF0000; font-family:arial ; font-size :13px ; padding :3px ;}

.box-content ul li {list-style-type:disc; color:#FFFF00;}

.box-titre { background: #000000 url(http://monimage2.jpg) no-repeat top right;}

.box-titre h2 {color:FFFFFF; font-variant: small-caps; text-decoration:underline;}

.box-footer { background: #000000 url(http://monimage3.jpg) background-repeat : repeat-x;}

 

 

C'est article peut aussi vous intéresser : Dissocier les modules over-blog

Partager cet article

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

commentaires

La vie en couleurs 09/02/2010 13:36


Merci pour vos infos !!!
Elle me sont d'une grande utilité, merci
Pascaline


Christelle Vinsonneau 09/02/2010 21:19


tant mieux ! bonne continuation !


La journée sans immigrés : 24h sans nous 23/01/2010 18:07


Merci Christelle, avec toutes tes indications, j'ai pu faire exactement ce que je voulais, et je comprend mieux certains contenus de ma feuille de style.

Une grand merci à nouveau.

Xavier


Christelle Vinsonneau 31/01/2010 12:05



super !


Contente d'avoir pu t'aider



La journée sans immigrés : 24h sans nous 19/01/2010 23:53


Super ! Pour les listes à puces dans les articles c'est bon.
Alors ne soit pas horrifiée, comme je le disais je tatonne et j'ai trouvé un 'truc' pour ne pas l'afficher dans les box et pour aligner les OL (qui marche pas encore).

En bonus, si tu as une suggestion pour faire fonctionner les OL et blockquote ce serait top :
http://ljsidev.over-blog.com/article-test-ul-ol--43274394.html

Un grand merci d'avance.

Xavier

PS : Et promis, le 2 mars je me met au CSS !


Christelle Vinsonneau 20/01/2010 09:04



Alors si ça ne concerne que les articles, on va faire encore plus simple :

Pour les puces simples (à modifier comme tu veux, tu peux t'aider de l'article suivant : http://photo.graph.over-blog.com/article-23573583.html)
.contenuArticle ul li {list-style-type:square;}


Pour les listes numérotées (à modifier comme tu veux, tu peux t'aider de l'article suivant : http://photo.graph.over-blog.com/article-23573583.html)
.contenuArticle ol li {list-style-type:decimal;}

Pour l'indentation : à modifier comme tu veux (ici j'ai mis un retrait de 12px à chaque bord et mis le texte en rouge. Tu peux t'aider de http://photo.graph.over-blog.com/article-27420626.html)
.contenuArticle p {padding:12px; color:#CC0000;}

Et je crois que ça devrait fonctionner !



La journée sans immigrés : 24h sans nous 19/01/2010 18:17


Dès qu'on passe la page d'accueil, dans les modules de gauche

http://www.la-journee-sans-immigres.org/article-interview-de-gerard-noiriel-deuxieme-partie-43182082.html

Merci d'avance.


Christelle Vinsonneau 19/01/2010 19:03


ok... je les avais vus, mais comme ils n'étaient pas déroulants, j'ai cru que ce n'était pas de ceux là qu'il s'agissait.
Alors, juste pour que l'on soit d'accord : tu veux pouvoir avoir accès aux puces dans tes articles ? et ils semblerait qu'elles n'y soient pas. C'est ça ?

Commençons par voir ce que ça donne si tu ajoutes ça en fin de CSS  : ça devrait rétablir les puces dans les modules et dans les articles...

#cl_1_0 {list-style: square;}
#cl_1_1 {list-style: square;}
li {list-style-type:square;}
.box {list-style-type:square; padding-left:20px;}
.box li {list-style-type:square; padding-left:40px;}
.cl ul {margin: 4px; padding-left:24px;}

P.S : c'est un peu le bazar le code du Easyblog white !!!


La journée sans immigrés : 24h sans nous 19/01/2010 15:21


Lire UL, OL et BLOCKQUOTE ci dessus...


Christelle Vinsonneau 19/01/2010 17:40


ok...

pour commencer, il est où le menu dans le blog ? je suis un peu tarte, mais je ne le vois pas !