[FAQ]Comment marche le skin Bamboo pour Demolite
Le second skin du p'tit labo. Je me remettais a peine dans le CSS, je découvrais chaque jour les fonctionnalités de canalblog... Ce qui fait que le code n'est p'tet pas des plus jolis... des balises qui ne servent a rien, ou des class qui ne sont pas utilisés... mais tant que ça marche...
Demolite voulait savoir comment il marchait... je ne sais pas trop ce que tu attend exactement, mais je vais essayer d'expliquer un peu comment tout marche:
Le but de ce skin et de méler fond et contenu. L'effet et totalement réussi, il faut le reconnaître. Il ne faut tout d'abord pas oublié que le blog est divisé en blocs (les div) et que c'est avec ceci qu'il faut jongler.
J'ai commencé par faire le skin entièrement sous Gimp (mon logiciel d'infographie préféré). Ensuite, une phase de découpage. La premiere version donnait ça: skin puis j'ai changer pour aller vers l'actuel.
Il y'a le fond, la bannière et le container.
Le fond, (les bambous ). le fond est fixe (background-attachement: fixed;) centré en haut de la fenêtre (background-position: center top;). Il ne se répète pas et je mets en couleur de fond la couleur de fond de l'image. Comme ça, quand elle s'arrète, hop, ça se voit pas trop (vu que je fini proprement le dessous).
Ensuite, la bannière, je la découpe bien et je la mets, normalement. Je pousse le vice à mettre dedans et les liens (liste déroulante avec fonction javascript) et le calendrier (pour combler un peu le vide). Vu que j'ai supprimé les marches de la page, ça colle parfaitement avec mon fond.
Enfin, je crée une image avec le petit bout de branche dedans, que je mets dans ma div container à 150px du haut. L'illusion est faite.
Ensuite, pour les messages, j'ai la fleur de lotus qui est marrante. Je voulais qu'il y'ai un réel mélange entre la fleur et le texte. Tout d'abord, j'ajoute lors de la gération du code devant la date ceci:
<img class="puce" src="http://membres.lycos.fr/riesseg/canalblog/bamboo/Lotus.png" alt="lotus"/>
Ensuite, grace au CSS et ma classe .puce, je gère sa position pour qu'elle soit en dessous du titre.
La date elle, est fixée à droite, pour que ce soit un peu original et je mets une bordure au dessus. Je place ensuite correctement le tout grâce au paramètre margin Pour que la ligne soit collée au titre du blog et ne dépasse pas la fleur de lotus. Le titre du blog recouvre la fleur de lotus qui recouvre le trait de la date.
Pour le kanji caché derrière le commentaire, même méthode.
<img class="puce" src="http://membres.lycos.fr/riesseg/canalblog/bamboo/Lotus.png" alt="lotus"/>
placé avant le lien du commentaire, et je le place grâce au CSS.
Et voila. Après, rien de bien extraordinaire. Je change la bannière en fonction de la page grace a plusieurs classe (une classe par catégorie) et le tour est joué.
En espérant que tout cela réponde a tes question Demolite.
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
