Classes liées aux modules - V2

Publié le par Titia

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 :
right-v2.jpg

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 :
top-v2.jpg
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 :
topleft-v2.jpg
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 !
topright-v2.jpg

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à !
bottom-v2.jpg

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 :
bottomleft-v2.jpg

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; }
bottomright-v2.jpg

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 :
left-v2.jpg

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...) :

right-v2.jpg

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.

Publié dans Classes v2

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

Margarida 08/05/2011 15:12



Bonjour


Je viens vers vous car sur le forum d'Over-blog j'ai l'impression d'être totalement obtuse (je le suis sans doute... oupss !) Bref, j'ai un pb en ce moment avec un des modules à droite du blog
texte libre qui quand je travaille dessus affiche le fond avec la déco du design au lieu d'avoir un fond blanc ce qui fait que pour travailler c'est impossible car le designe passe du jaune au
noir... par contre sur le web le fond est jaune  (heureusement !)


Je dois préciser qu'il ne s'agit pas de mon blog mais d'un blog d'une copine que j'aide (elle est encore plus nunuche que moi ... re-oupss !!) mais bon, à deux on y arrive plus ou moins mais là
je bloque : Voici l'URL du blog en train de naître dans la douleur http://prou.over-blog.com/


Puisque j'y suis, je pose la question que je viens de poser sur le forum à savoir comment se fait-il que je ne peux pas rectifier le design car ma copine voudrait 2 colonnes une à droite et
l'autre à gauche mais j'ai beau essayer et clique que tu cliquera sur le truc des 2 colonnes le lien reste inactif ...


Merce de nous aider


margarida



Scrapiatella 20/03/2009 17:58

Bonjour,J'ai suivi tes recommandations pour identifier les modules texte libres.Mais je ne les retrouve pas dans mon CSS.Où dois-je cherhcer ?Ton blog est une mine d'information !! Merci de partager tes connaissances ! Bises

Titia 19/04/2009 15:22


Et bien, s'ils ne sont pas dans ton css, il faut ajouter les informations :)
C'est tout simple :)


Sam 04/09/2008 11:27

Salut !! d'abord merci pour ton blog il m'a beaucoup aidé !!!J'aurais une tite question concernant un de mes modules texte libre, je l'ai identifié "a".J'aimerais enlever la ligne sous le titre, mais j'arrive pas a savoir comment l'écrire dans le css.box-titre a {}.text a .box-titre {}etc...quel est la bonne combinaison, merciiii d'avance !

Titia 04/09/2008 20:25


Normalement, c'est ça :

.[le_nom_de_ton_module] .box-content {border-top:0px;}
.[le_nom_de_ton_module] .box-titre {border-bottom:0px;}

Sauf que toi, "le_nom_de_ton_module" vaut "a". Sauf que "a" correspond à la balise html pour désigner un lien html. Donc je pense que le css ne va pas comprendre qu'il s'agit du nom de ton module
et non pas des liens html.
Donc renomme le :)


Florent 29/04/2008 10:58

Salut TitiaBon, en ce qui concerne le carré gris, le mot "dessin" et la petite bordure grise j'ai finté de la manière suivante :.box.album li {background-color: #000000; border:0px; border-color: #000000; }.box.album a {color: #000000;}Et la effectivement tout est noir.Merci pour l'idée de finte!!!Pas trop de temps pour bloguer aujourd'hui!:) Doucement mais surement :)A bientôt!

Titia 29/04/2008 23:10


Faut apprendre à feinter. Parfois, on n'a pas d'autre choix :)
Bon blog !


Florent 28/04/2008 12:18

Bonjour Titia,Merci pour le ".box-titre h2"  c'est clair que j'étais pas loin mais un "h2" change tout...J'ai mis en ligne des dessins, je les ai placé dans un album photo. Jusque là tout va bien.Par contre, lorsque je passe la souris sur le module "album photo" qui s'affiche dans mes pages d'article, il y a un vilain carré gris qui s'affiche. Vu qu'il est vilain j'aimerai bien qu'il ne s'affiche plus. J'ai essayé avec ".box.album a" avec ".box.album li" et ".box.album a:hover" mais ça fait disparaitre les liens vers l'album. Bon ça c'est pour le vilain carré gris.Ensuite, en dessous du module "album photo" (toujours sur les pages d'article) il y a un lien "dessin" qui me semble faire double emploi avec l'image au dessus. Comment puis-je l'enlever pour qu'il ne reste que l'image, qui est déjà un lien je crois. ça serait plus joli.Bon assez de questions pour aujourd'hui. Si tu peux déjà m'aider avec ça c'est super cool!A bentôt!!  .... car j'aurai surement encore plein de questions :)

Titia 28/04/2008 22:04


Et voui ! Deux lettres, ça change la face du monde ^^ !
Pour le carré gris, tu parles du fond de l'image ? Alors il faut modifier ça :
.contenuArticle img {background-color:transparent; border:none; }

Pour le libelle "Dessins" sur l'image de ton album, ça peut pas se paramétrer dans "Configurer" dans le module "album" ? Sinon, on peut feinter en le mettant de la même couleur que le fond :
.noListStyle .center a {color:#000;} Je n'ai pas trouvé mieux !