Classes liées aux modules - V2

Encadrer un module

Vous en avez rêvé ? Titia l'a fait ! Ouais, j'y crois à fond ^^ !
Bon, alors en fait, après une grosse prise de tête et un gros arrachage de cheveux, je viens enfin de réussir à faire des jolis contours de modules avec des colonnes élastiques. Ouf ! Ca n'a pas été facile. Alors il y a encore un tout petit défaut, mais je suis désormais chauve alors je vais attendre que mes cheveux repoussent pour m'arracher les cheveux de nouveau.

On va donc faire en sorte d'obtenir ça :


Donc comme vous le voyez, il manque quelques millimètres en bas à droite sur le côté droit du module... Mais j'en ai ras la casquette de chercher, alors en attendant, il faudra s'en contenter !

Bon, on va y aller en pas à pas, comme d'habitude.
Commençons par la classe .box-titre et cette image : .
On va ajouter cette image en fond de la classe .box-titre, la répéter horizontalement et la positionner en haut. J'indique que la ligne fait 22px de hauteur, sinon, je ne vois pas l'image en entier, elle est tronquée en bas.

.box-titre {background-image:url(url_de_l_image_du_haut); background-repeat:repeat-x; height:22px; }

On obtient le résultat suivant :

Ensuite, on va ajouter la coin en haut à gauche. Utilisons la classe .box-titre span et cette image : .
Nous allons la positionner en fond de la classe, ne pas la répéter, et la positionner en haut à gauche. On ajoute un "padding-bottom", sinon, l'image est tronquée en bas. Pourquoi 6px ? Parce qu'apparemment, le "span" fait 16px... mon image en fait 22... et il en manque donc 6 pour tout voir ! Ca, c'est un peu au p'tit bonheur la chance !

.box-titre span {background-image:url(url_de_l_image_du_haut_a_gauche); background-repeat:no-repeat; background-position:top left; padding-bottom:6px; }

On obtient le résultat suivant :

Désormais, on passe au coin droit, à la classe .box-titre h2, et l'image inverse de la précédente : .
Cette image sera en fond de la classe .box-titre h2, ne sera pas répétée pour n'apparaître qu'une seule fois, au coin, et sera positionnée en haut à droite. De la même façon que tout à l'heure, on indique la hauteur de la ligne : 22px, qui correspond à la hauteur de l'image.

.box-titre h2 {background-image:url(url_de_l_image_du_haut_a_droite); background-repeat:no-repeat; height:22px; background-position:top right; }

Et hop, tout le haut du module est prêt !


Nous allons mettre la bordure du bas en utilisant la classe .box-footer 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. Comme pour l'image du haut, on indique la hauteur de l'image : 7px, sinon, elle est tronquée.

.box-footer {background-image:url(url_de_l_image_du_bas); background-repeat:repeat-x; height:7px; }

Et voilà !


Allez, soyons fous, ajoutons également des coins, en bas, pour améliorer encore ces contours ! Utilisons tout d'abord la classe .box-footer span 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. On ajoute un padding à gauche... Pourquoi ? Sinon l'image est tronquée. De la même façon que pour le coin du haut on a ajouté un padding d'une taille un peu choisie au hasard, là, c'est pareil. Ca dépend de la taille initiale du span (que j'ignore) et de la taille de l'image...

.box-footer span {background-image:url(url_de_l_image_du_bas_a_gauche); background-repeat:no-repeat; background-position:top left; padding-left:3px;}

Le premier coin du bas :


Passons au coin droit. La classe sera .box-footer h2, et l'image symétrique à la précédente : .
Même principe que précédemment, mais en positionnant à droite et non pas à gauche. Par contre, ici, pas de padding. Ca fonctionne bien ^^ !

.box-footer h2 {background-image:url(url_de_l_image_du_bas_a_droite); background-repeat:no-repeat; background-position:top right; }

On va finir avec les bords gauche et droite. Commençons par la gauche. Utilisons pour cela la classe .box. Nous allons mettre une bordure toute 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 {background-image:url(url_de_l_image_de_gauche); background-repeat:repeat-y; background-position: top left; }

La bordure gauche est terminée :


A droite, maintenant. Même principe, avec la classe .box-content, 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-content {background-image:url(url_de_l_image_de_droite); background-repeat:repeat-y; background-position: top right; }

Le module est prêt (malgré le petit blanc en bas à droite...) :



Voilà, ça n'a pas été de tout repos, mais ça fonctionne ! Ouf !

Les différents modules

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
• .w3c : le module W3C
• .concours : le module "over-blog - créer un blog"
• .categorie : la liste des catégories
• .album : les albums photos
• .newsletter : le module "newsletter"
• .presentation : la présentation du blog
• .aleaIm : le module des images aléatoires
• .commentrecent : les commentaires
• .community : les communautés
• .pub : les modules de publicité
• .profil : le module du profil
• .pages : le module de la liste des pages
• .text : les deux modules "texte libre". Il est possible de les identifier manuellement.

Identifier les modules textes libres.

Dans Configurer / Options globales / Réglages avancés, il faut cocher la case : "Permettre la configuration des id XHTML des modules". Ensuite, quand on configure le module en question (petit marteau dans le coin en haut à droite des modules, dans Configurer), on voit une case "id XHTML" qui correspond à l'identifiant que vous souhaitez pour le module.