15 novembre 2007 à 18:44

[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.

- FAQ - Commentaires [3] - Permalien [#]

Commentaires

    Wahou !

    Super !
    Je regarde tout ça demain à tête reposée...
    ce soir, c'est "prison break" !
    bises et merci beaucoup !
    Demain je t'enverrai l'adresse de mon blog test tu me dira ce que tu en pense

    Par Demolite, 15 novembre 2007 à 20:53
  • Bonsoir !
    Merci beaucoup pour toutes tes explications ....
    J'y vois un peu plus clair sur la structure que devrait avoir les choses.
    Par rapport à ce que tu m'as dit sur le "codage" je crois pouvoir t'expliquer le pourquoi du comment:
    je suis totalement débutante, j'ai fait le blog grâce à des tutos trouvés à droite à gauche mais sans respecter aucune structure parce que je ne pensais pas que c'était important (*pas maline*)
    Donc par exemple, j'ai supprimé leftbar, rightbar, et plein d'autres choses pensant me faciliter la vie ....
    Je comprends les termes de css, et un peu moins ceux d'html, donc j'ai pu bidouiller mais au niveau de la structure je suis consciente que c'est n'importe quoi :[
    Je peux te montrer mon code html et css si tu veux (et si tu as le temps) mais je crois que tu vas frémir devant ce chantier !
    Pour le menu, c'est normal je ne l'ai pas encore vraiment complété, j'essayais de d'abord donner une tête au blog
    Enfin voilà, pour schématiser ma situation, c'est comme si j'avais tout le vocabulaire pour faire une phrase mais que je ne savais comment la structurer
    Encore merci pour tes explications et puis bonne soirée!

    Par Juliie, 15 novembre 2007 à 22:19
  • bin heu...

    De rien ^^
    j'ai dis que j'étais là pour aider, j'assume totalement mon choix.

    je me pencherai peut être plus en détail sur ton blog Juliie. La je suis sur un autre projet, mais apres peut être.

    Par riesseg, 16 novembre 2007 à 10:17

Poster un commentaire