Classes liées aux modules

Publié le par Titia

Classes liées aux modules
.box {}
Le module entier
.box h2 {}
L'emplacement du titre du module.

.box-content ul {}
L'ensemble de la liste à puce
.box-content li {}
Chaque élément de la liste à puce

A noter que .box-top, .box-left, .box-right, .box-bottom, .box-topLeft, .box-topRight, .box-bottomLeft, .box-bottomRight et .box-content représentent également le module entier. Mais ils ne sont pas là que pour faire joli ! Ils permettent de gérer complètement et de façon précise le design du module !

Commençons par la classe .box-top et cette image : .
On va ajouter cette image en fond de la classe .box-top, la répéter horizontalement et la positionner en haut.
.box-top { background-image: url(url_de_l_image_top.gif); background-repeat: repeat-x; background-position: top center;}
On obtient le résultat suivant :

Ensuite, on va ajouter la coin en haut à gauche. Utilisons la classe .box-topLeft et cette image : .
Nous allons la positionner en fond de la classe, ne pas la répéter, et la positionner en haut à gauche.
.box-topLeft { background-image: url(url_de_l_image_topLeft.gif); background-repeat: no-repeat; background-position: top left;}
On obtient le résultat suivant :


Désormais, on passe au coin droit, à la classe .box-topRight, et l'image inverse de la précédente : .
Cette image sera en fond de la classe .box-topRight, ne sera pas répétée pour n'apparaître qu'une seule fois, au coin, et sera positionnée en haut à droite.
.box-topRight { background-image: url(url_de_l_image_topRight.gif); background-repeat: no-repeat; background-position: top right;}
Et hop, tout le haut du module est prêt !


On va mettre les bords gauche et droite. Commençons par la gauche. Utilisons pour cela la classe .box-left. Nous allons mettre une bordure tout simple : .
Puisqu'on veut que cette image fasse toute la bordure gauche, on va la positionner à gauche, et la répéter sur toute la hauteur.
.box-left { background-image: url(url_de_l_image_left.gif); background-repeat: repeat-y; background-position: top left;}
La bordure gauche est terminée :


A droite, maintenant. Même principe, avec la classe .box-right, et une image symétrique .
Le principe est identique au précédent, à la différence que cette image sera positionnée à droite, et non à gauche.
.box-right { background-image: url(url_de_l_image_right.gif); background-repeat: repeat-y; background-position: top right;}
La bordure droite est positionnée :


Nous allons mettre la bordure du bas en utilisant la classe .box-bottom et cette image : .
Nous devons répéter cette image horizontalement pour qu'elle prenne toute la largeur. Elle sera positionnée en bas du fond.
.box-bottom { background-image: url(url_de_l_image_bottom.gif); background-repeat: repeat-x; background-position: bottom center;}
Et voilà !


Allez, soyons fous, ajoutons également des coins, en bas, pour améliorer encore ces contours ! Utilisons tout d'abord la classe .box-bottomLeft et ce coin : .
De même que le coin en haut à gauche, celui-ci sera en fond de la classe, non répétée, et positionnée en bas à gauche.
.box-bottomLeft { background-image: url(url_de_l_image_bottomLeft.gif); background-repeat: no-repeat; background-position: bottom left;}
Le premier coin du bas :


Et terminons ce module avec le coin droit. La classe sera .box-bottomRight, et l'image symétrique à la précédente : .
Même principe que précédemment, mais en positionnant à droite et non pas à gauche.
.box-bottomRight { background-image: url(url_de_l_image_bottomRight.gif); background-repeat: no-repeat; background-position: bottom right;}
Et voilà, le module est prêt !


A vous de jouer !

Classes différentes pour chaque module
A noter que chaque module peut être identifié de manière unique, ce qui peut être pratique lorsque l'on veut mettre une image de fond différente pour chaque titre de module, ou une petite icône en face de chaque titre.
  • #ArticleRecent : le module de la liste des articles récents
  • #Lien : les liens
  • #Recherche : le module de recherche
  • #Recommander : le module "recommander"
  • #Archive : les archives
  • #Calendrier : le calendrier
  • #Syndication : le module W3C
  • #Categorie : la liste des catégories
  • #Album : les albums photos
  • #Newsletter : le module "newsletter"
  • #Concours : le module "concours"
  • #Presentation : la présentation du blog
  • #aleaIm : le module des images aléatoires
  • #CommentRecent : les commentaires
  • #LeftPart et #RightPart : les deux modules "texte libre". Attention, il se peut que celui de droite ait la classe #LeftPart et inversement. Les classes ne sont pas liées aux positions des modules. D'ailleurs, si vous mettez les deux modules du même côté, les deux classes seront utilisées, une par module.
Ainsi, si vous voulez par exemple mettre cette image :

en guise de titre du module Liens, le principe est le suivant :
#Lien .box-content h2 {background-image:url(url_de_l_image); font-size:0px;height:22px; }

Quelques explications :
#Lien : on ne s'occupe que du module "liens"
.box-content : il s'agit du contenu d'un module
h2 : on ne veut mettre en page que le titre... qui correspond ici à la balise html

 

(ne pas hésiter à aller vérifier dans le code source).
background-image:url(url_de_l_image); : on change le fond
font-size:0px; : comme on ne veut plus que le mot "Liens" apparaisse, on met la taille du texte à 0
height:22px; : en mettant la taille du texte à 0, plus rien n'apparaît. Donc il faut forcer la hauteur de cette partie à 22px (la hauteur de l'image) pour la voir apparaître.

Enfantin, non ?

Publié dans Aides diverses

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
T

Bonjour,


j'ai pu voir que vous etes assez experte dans la gestion de blog,


j'ai un soucis avec mon blog, je n'arrive pas à inserer de vidéos.


J'y suis arrivé la semaine derniere en retirant les "=" et les "watch" du l'adresse youtube mais ce matin ca redevient problematique


Pouvez-vous m'aider ?
Répondre
V
Bonjour et Merci!Je me suis servie pour les infos, et maintenant, me reste à éxécuter (lol).Je vais d'abord créer l'image...Au plaisir!
Répondre
T


Bon courage :)



N
Merci pour ces précieux renseignements très utiles au néophyte que je suis !Cela a du demander du travail mais soyez sûr que ce n'est pas en vain !
Répondre
T


De rien !


Yep, c'est long à faire... et c'est aussi pour ça que je n'ai plus écrit d'articles depuis très longtemps !



B
salut a toi .merci pour cette article , il m'a beaucoup aidé.sinon j'ai un petit probleme ,je veux mettre une image de fond quand on est sur le texte de mon module lien (en hover )mais le probleme c'est que l'image est de longueur differenten fonction de la longueur du texte .je voudrais que les background hover fassent comme sur ce blog :http://monsieurpoulpe.over-blog.com/ (va voir le module lien)mais moi pour l'instant ça donne ça :http://battlefrite.over-blog.com/et voici le css de mon module :/*---------------- module copains-----------------------------*/#copains .box-content ul a {text-decoration:underline; color:#FFF; font-size:12px;}#copains .box-content ul a:hover {text-decoration:none; color:#FFF; font-size:12px;font-style:italic;background-image:url(http://idata.over-blog.com/0/28/68/25/repertoire-2/fond-blog3.jpg);padding-right:55px;}merci d'avance pour ton aide.
Répondre
T

Hummm... sauf que toi, tu as mis des images, et pas du texte. Comment veux-tu mettre une image de fond alors que c'est déjà une image ? Je ne comprends pas ce que tu veux !


M
Bonsoir Titia, tout d'abord merci pour toutes les infos presentes sur ton blog qui devrait etre declaré d'utilité publique:)Puis, voila ma question, je l'ai posée sur le forum mais n'ai pas eu une complete reponse..Je souhaiterais reprendre le contenu des modules "derniers commentaires" et "articles recents", (lequel se genère automatiquement), au sein de deux articles respectifs que je creerais. J'ai bien reussi à mettre la liste des "articles recents" dans un article (on le voit sur mon blog) seulement apres test, celle-ci ne se met pas à jour automatiquement à la publication d'un nouvel article, contrairement à ce qui apparait dans le module "articles recents".Existe-til une solution pour reprendre la "routine d'automatisation" au sein dudit article? J'ai la meme question evidemment au niveau du module "derniers commentaires":))Ou au contraire dois-je proceder de facon manuelle, à chaque publication d'un nouvel article, modifier la liste comprise dans l'article "derniers articles publiés" que j'aurais créé.Heu, je ne sais pas si je suis vraiment tres claire...!!Ce doit etre la fin de journée, on va dire ca:))Merci par avance, si tu peux m'eclairer un tant soit peu à ce sujet..Mlle C.:)
Répondre
T
Bon alors je te rassure, tu es très claire. Mais... ça n'est pas possible en automatique. Il faut tout faire à la main. Pour les articles, encore, ça reste jouable... car c'est toi qui les écris, donc tu sais quand ta liste doit être mise à jour. Pour les commentaires, c'est plus chaud, car ils sont écrits à toute heure !