Corbu
07/10/2002, 18h38
###########
Auteur : CORBU
###########
Tuto sur le postbit, partie 3
On va bidouiller sur Dreamweaver maintenant, et apres c finit.
On recapitule :
- Vous avez vos images dans un rep images qui sont decoupées (tranches).
- On peut donc passer a l'edition du template.
- Ouvrez Dreamweaver MX
- Allez dans votre CP de votre forum, et allez vois le postbit original de votre vbb. "View original"
- Copiez l'original (CTRL A et ensuite CTRL C)
- Retournez sur Dreamweaver
- Vous avez un nouveau document d'ouvert, affichez lui la source en cliquant sur "afficher le mode code" qui est un bouton comme ca : "<>" en haut a gauche.
- Là vous effecez toute la source, et vous faite CTRL V pour coller ce que vous venez de copier.
- On a donc ds dreamweaver votre code original du postbit.
On va travailler a partir de celui là, on peut bien sur repartir de zero mais c encore plus dur pour vous je pense. Cela fera l'objet d'autre Tuts.
- Maintenant faites sur Dream (D) un nouveau doc encore. Dedans, vous supprimez aussi toute la source.
Et vous collez une deuxieme fois votre postbit original.
- Dans le 1er document, maintenant cliquez sur le 3ème bouton en partant de la gauche apres celui dont vous avez appuyé pour voir la source. "*Afficher le mode creation"
Là vous voyez votre postbit a l'etat pur, sans les couleurs. screen14 (http://forum.vbulletin-fr.org/ressources/postbit tut/p14.gif)
- Vous voyez donc tout ce qui compose votre post bit, l'avatr, le post....et les boutons... Bon , et bien c'est ces textes qu'il suffira de bouger a un endroit pour les changer de place sur le postbit. On verra ca apres.
- On s'attaque a la structure.
- Dans D, pour selectionner une cellule, vous appyer sur CTRL et vous cliquez dans la cellule. Et bien vous allez supprimer le contenu de ces 4 cellules. (le texte)
- Apres il vous reste donc le cadre + les 4 cellules que vous voyez vide.screen15 (http://forum.vbulletin-fr.org/ressources/postbit tut/p15.gif)
Ces 4 cellules, vous les selectionnez en meme temps, et vous cliquez ensuite du boutons droit de votre souris > Tableau > fusionner les cellules. Ca vous les regroupe en une seule cellule. Vous pouvez aussi les garder comme ca.... a vous de voir, vous bidouillerez apres.
Donc là, on va garder le postbit comme ca...On touches a rien de l'original et on va diviser les cellule. Et vous va s'occuper de ranger nos images dedans. ( LE PLUS DUR pour ceux qui connaissent pas)
Donc
- Dans la cellule ou il y a : $post[firstnewinsert] $post[username]
- Clique Droit, > Tableau > inserer une ligne. Vous inserez donc une ligne au dessus de cette cellule. Vous remarquez qu'elle s'est allongée juste qu'au bout du cadre > tres bien, merci Dream.
- maintenant toujours dans la cellule : $post[firstnewinsert] $post[username], faite un clique droit et > Tableau > fractionner la cellule. Vous la divisez donc en deux ligne horizontale, vous avez juste a faire ok normalement sinon vous faites donc "split celle into rows." et vous choissisez "2". Ensuite ok. Vous avez donc cette cellule divisée en deux horizontalement.
- Maintenant toujours dans la cellule : $post[firstnewinsert] $post[username] vous cliquez droit > tableau > fractionner la cellule, et la vous choissisez "en colonnes". Toujours "2".
Ca donnes ca :screen16 (http://forum.vbulletin-fr.org/ressources/postbit tut/p16.gif)
- Maintenant on va integrer nos images.
On va jouer avec les backgrounds qui permettent de faire repeter une image sur toute une colonne. Rappellez vous des Tranches que l'on a fait ou je vous demandait de les faire les plus fines possibles. C'est pour qu'on les repete dans le cadre...vous allez comprendre ensuite.
- cliquez du boutons gauche dans la cellule qui est juste en dessous de celle qui contient : Posts: $post[posts] que l'on a crée tout a l'heure en divisant deux cellules.
On va ajouter les coin droit.
En haut, dans l'onglet "COMMUN" vous avez un bouton avec dedans un arbre...c'est le bouton qui vous sert a integrer des images.
Cliquez dessus, et selectionnez l'image "corbu_..." qui correspond au coin de l'angle arrondi des informations de l'user (pour moi c'est corbu_12) , faites OK. Votre image est aparu dans le cadre. Maintenant on l'aligne a droite de cette celule en cliquant tout en bas, dans "proprietées " sur ALIGNER A DROITE comme si vous alignez du texte a droite.
- maintenant toujours dans cette celule, vous allez toujours en bas, ds propeties, il y a une colonne "Ar-Pl" avec un dossier a droite, cliquez dessus et choississez l'image corbu_11 normalement qui correspond a la tranche que l'on a fait a coté du coin arrondit (la tout fine tranche qui est aussi large horizontalement que le coin). Faites ok.
Maintenant, selectionnez votre image du coin arrondit que vous avez inserée en premier. Regardez en bas, ds proprietées, sa hauteur. Moi c'est "35" pixels. (Hight).
- On recliques dans la cellule maintenant, et vous allez tj ds propreties en bas, dans la case "H" rentrer la valeur "35" pour lui dire que la celule fera 35 pixels de hauteur...sur ...ce qu'il veut de largeur.
- Maintenant pareil pour la colonne du dessus du coin, pour faire tout le bord 3D.
Donc vous cliquez dans la cellule, puis vous ajoutez un arriere-plan (image corbu_08) , puis vous alignez la cellule a gauche.
- Maintenant pour voir ce que ca donnes...cliquez sur "apercu" avec Internet explorer a droite de la case "title" en haut. Vous voyez que le postbit prends forme. screen important ! 17 (http://forum.vbulletin-fr.org/ressources/postbit tut/p17.gif)
Si vous avez des defauts d'alignement...vous inquietez pas...vous bidouillerez ca apres.
Donc vous avez vu qu'avec une image de 1 pixel de large, vous pouvez la repeter en background tout le long d'une cellule.
Ben on va faire pareil pour la cellule du haut .
- Donc la cellule que l'on a rajouté en premier, au dessus de : $post[firstnewinsert] $post[username], vous cliquez dans celle là (attention elle est coupée en deux , il y a 2 celules). Et vous mettez un arriere-plan avec l'image corbu_03. Ajustez la cellule en modifiant sa taille en bas ds proprietées en mettant sa hauteur (donc regardez bien en inserant votre image quelle hauteur elle fait, Dream vous le dit a droite dans la fenetre). Donc vous rentre par exemple 35 si l'image fait 35 pixel de hauteur, normalement elle fait 2 ou 3 pixel de largeur sinon.
- Faites de meme pour la celule a droite , la 2eme. Donc là maintenant vous avez la cellule du haut qui est en couleur tout le long. Reste plus qu'a rajouter le coin droit.
- Inserez l'image dans la celulle de droite et alignez là a droite.
SCREEN18 (http://forum.vbulletin-fr.org/ressources/postbit tut/p18.gif)
- Maintenant faite pareil pour la colonne du bas tout simplement en mettant encore une fois le background qui correspond et ensuite a gauche cette fois en ajoutant l'image et en l'alignant a gauche dans la cellule.
SCREEN19 (http://forum.vbulletin-fr.org/ressources/postbit tut/p19.gif)
Remarquez que j'ai reduite la taille des caracteres a gauche pour que la cellule s'agrandisse pas maintenant et qu'a droite ne bas j'ai viré tout le cadre ou il y avait des boutons. Faites pareil, en selectionnant le cadre et en le deletant, vous le remettrez apres.
Maintenant toutes nos imgs sont posées... BRAVO
On va donner les couleurs de fonds maintenant.
- Dans la cellule : $post[icon] $post[title] cliquez dedans. Et en bas ds les proprietées de la celule ajoutez une couleur d'arrière plan. Attention, il faut que ce soit pour cet exemple la meme couleur que le bleu qu'on avait mis sur photoshop. Pour cela, notez sa reference. Du genre : 333399. Toujours à 6 chiffres. Et recopiez la dedans la case ou change la couleur de fonds dans Dream.
ATTENTION : il faut que ce soit une couleur WEB. Une couleur Web, pour l'avoir quand vous etes dans photoshop et que vous choisissez une couleur, vous cochez couleurs Web en bas a gauche de la fenetre. Sinon que va t il se passer ? Ben la personne qui sera en train de regarder votre postbit sur le WEb n'aura pas la meme interpretation du bleu et il verra peut-etre un bleu clair dans le fond du cadre ou est le message, alors que ce sera un autre bleu dans le cadre 3D sur les bords.
- Faites pareil pour le cadre des infos de l'user. Moi c'est un #666666 comme couleur. Voila tout est ok.
- On va remettre les boutons en bas a droite dans la cellule.
Retournez dans Dream, et allez sur le document n°2 que l'on avait crée au debut. (l'original).
Selectionnez le cadre en entier et faites un CTRL C et puis V dans la cellule du doc 1, ou sinon prenez les un par un...
Une petite bidouille en plus : retournez voir le code de votre postbit ( <> ) et tout en bas, ajouter : <br>
Ca fera le saut de ligne des posts.
SCREEN FINAL 20 (http://forum.vbulletin-fr.org/ressources/postbit tut/p20.gif)
Maintenant : uploadez toutes les images de votre postbit dans le rep images de vbb.
Copiez la source de votre nouveau postbit ( <> ) et collez la a la place de votre ancien template "postbit"
Allez sur votre forum et voir un petit peu comment ca ce passe en regardant un post.
Vous allez voir que rien ne marche.
LOL !
Normal, les chemins des fichiers ne sont pas bons. !
Il faut rectifier cela dans dreamweaver.
Passer au TUT 4
Auteur : CORBU
###########
Tuto sur le postbit, partie 3
On va bidouiller sur Dreamweaver maintenant, et apres c finit.
On recapitule :
- Vous avez vos images dans un rep images qui sont decoupées (tranches).
- On peut donc passer a l'edition du template.
- Ouvrez Dreamweaver MX
- Allez dans votre CP de votre forum, et allez vois le postbit original de votre vbb. "View original"
- Copiez l'original (CTRL A et ensuite CTRL C)
- Retournez sur Dreamweaver
- Vous avez un nouveau document d'ouvert, affichez lui la source en cliquant sur "afficher le mode code" qui est un bouton comme ca : "<>" en haut a gauche.
- Là vous effecez toute la source, et vous faite CTRL V pour coller ce que vous venez de copier.
- On a donc ds dreamweaver votre code original du postbit.
On va travailler a partir de celui là, on peut bien sur repartir de zero mais c encore plus dur pour vous je pense. Cela fera l'objet d'autre Tuts.
- Maintenant faites sur Dream (D) un nouveau doc encore. Dedans, vous supprimez aussi toute la source.
Et vous collez une deuxieme fois votre postbit original.
- Dans le 1er document, maintenant cliquez sur le 3ème bouton en partant de la gauche apres celui dont vous avez appuyé pour voir la source. "*Afficher le mode creation"
Là vous voyez votre postbit a l'etat pur, sans les couleurs. screen14 (http://forum.vbulletin-fr.org/ressources/postbit tut/p14.gif)
- Vous voyez donc tout ce qui compose votre post bit, l'avatr, le post....et les boutons... Bon , et bien c'est ces textes qu'il suffira de bouger a un endroit pour les changer de place sur le postbit. On verra ca apres.
- On s'attaque a la structure.
- Dans D, pour selectionner une cellule, vous appyer sur CTRL et vous cliquez dans la cellule. Et bien vous allez supprimer le contenu de ces 4 cellules. (le texte)
- Apres il vous reste donc le cadre + les 4 cellules que vous voyez vide.screen15 (http://forum.vbulletin-fr.org/ressources/postbit tut/p15.gif)
Ces 4 cellules, vous les selectionnez en meme temps, et vous cliquez ensuite du boutons droit de votre souris > Tableau > fusionner les cellules. Ca vous les regroupe en une seule cellule. Vous pouvez aussi les garder comme ca.... a vous de voir, vous bidouillerez apres.
Donc là, on va garder le postbit comme ca...On touches a rien de l'original et on va diviser les cellule. Et vous va s'occuper de ranger nos images dedans. ( LE PLUS DUR pour ceux qui connaissent pas)
Donc
- Dans la cellule ou il y a : $post[firstnewinsert] $post[username]
- Clique Droit, > Tableau > inserer une ligne. Vous inserez donc une ligne au dessus de cette cellule. Vous remarquez qu'elle s'est allongée juste qu'au bout du cadre > tres bien, merci Dream.
- maintenant toujours dans la cellule : $post[firstnewinsert] $post[username], faite un clique droit et > Tableau > fractionner la cellule. Vous la divisez donc en deux ligne horizontale, vous avez juste a faire ok normalement sinon vous faites donc "split celle into rows." et vous choissisez "2". Ensuite ok. Vous avez donc cette cellule divisée en deux horizontalement.
- Maintenant toujours dans la cellule : $post[firstnewinsert] $post[username] vous cliquez droit > tableau > fractionner la cellule, et la vous choissisez "en colonnes". Toujours "2".
Ca donnes ca :screen16 (http://forum.vbulletin-fr.org/ressources/postbit tut/p16.gif)
- Maintenant on va integrer nos images.
On va jouer avec les backgrounds qui permettent de faire repeter une image sur toute une colonne. Rappellez vous des Tranches que l'on a fait ou je vous demandait de les faire les plus fines possibles. C'est pour qu'on les repete dans le cadre...vous allez comprendre ensuite.
- cliquez du boutons gauche dans la cellule qui est juste en dessous de celle qui contient : Posts: $post[posts] que l'on a crée tout a l'heure en divisant deux cellules.
On va ajouter les coin droit.
En haut, dans l'onglet "COMMUN" vous avez un bouton avec dedans un arbre...c'est le bouton qui vous sert a integrer des images.
Cliquez dessus, et selectionnez l'image "corbu_..." qui correspond au coin de l'angle arrondi des informations de l'user (pour moi c'est corbu_12) , faites OK. Votre image est aparu dans le cadre. Maintenant on l'aligne a droite de cette celule en cliquant tout en bas, dans "proprietées " sur ALIGNER A DROITE comme si vous alignez du texte a droite.
- maintenant toujours dans cette celule, vous allez toujours en bas, ds propeties, il y a une colonne "Ar-Pl" avec un dossier a droite, cliquez dessus et choississez l'image corbu_11 normalement qui correspond a la tranche que l'on a fait a coté du coin arrondit (la tout fine tranche qui est aussi large horizontalement que le coin). Faites ok.
Maintenant, selectionnez votre image du coin arrondit que vous avez inserée en premier. Regardez en bas, ds proprietées, sa hauteur. Moi c'est "35" pixels. (Hight).
- On recliques dans la cellule maintenant, et vous allez tj ds propreties en bas, dans la case "H" rentrer la valeur "35" pour lui dire que la celule fera 35 pixels de hauteur...sur ...ce qu'il veut de largeur.
- Maintenant pareil pour la colonne du dessus du coin, pour faire tout le bord 3D.
Donc vous cliquez dans la cellule, puis vous ajoutez un arriere-plan (image corbu_08) , puis vous alignez la cellule a gauche.
- Maintenant pour voir ce que ca donnes...cliquez sur "apercu" avec Internet explorer a droite de la case "title" en haut. Vous voyez que le postbit prends forme. screen important ! 17 (http://forum.vbulletin-fr.org/ressources/postbit tut/p17.gif)
Si vous avez des defauts d'alignement...vous inquietez pas...vous bidouillerez ca apres.
Donc vous avez vu qu'avec une image de 1 pixel de large, vous pouvez la repeter en background tout le long d'une cellule.
Ben on va faire pareil pour la cellule du haut .
- Donc la cellule que l'on a rajouté en premier, au dessus de : $post[firstnewinsert] $post[username], vous cliquez dans celle là (attention elle est coupée en deux , il y a 2 celules). Et vous mettez un arriere-plan avec l'image corbu_03. Ajustez la cellule en modifiant sa taille en bas ds proprietées en mettant sa hauteur (donc regardez bien en inserant votre image quelle hauteur elle fait, Dream vous le dit a droite dans la fenetre). Donc vous rentre par exemple 35 si l'image fait 35 pixel de hauteur, normalement elle fait 2 ou 3 pixel de largeur sinon.
- Faites de meme pour la celule a droite , la 2eme. Donc là maintenant vous avez la cellule du haut qui est en couleur tout le long. Reste plus qu'a rajouter le coin droit.
- Inserez l'image dans la celulle de droite et alignez là a droite.
SCREEN18 (http://forum.vbulletin-fr.org/ressources/postbit tut/p18.gif)
- Maintenant faite pareil pour la colonne du bas tout simplement en mettant encore une fois le background qui correspond et ensuite a gauche cette fois en ajoutant l'image et en l'alignant a gauche dans la cellule.
SCREEN19 (http://forum.vbulletin-fr.org/ressources/postbit tut/p19.gif)
Remarquez que j'ai reduite la taille des caracteres a gauche pour que la cellule s'agrandisse pas maintenant et qu'a droite ne bas j'ai viré tout le cadre ou il y avait des boutons. Faites pareil, en selectionnant le cadre et en le deletant, vous le remettrez apres.
Maintenant toutes nos imgs sont posées... BRAVO
On va donner les couleurs de fonds maintenant.
- Dans la cellule : $post[icon] $post[title] cliquez dedans. Et en bas ds les proprietées de la celule ajoutez une couleur d'arrière plan. Attention, il faut que ce soit pour cet exemple la meme couleur que le bleu qu'on avait mis sur photoshop. Pour cela, notez sa reference. Du genre : 333399. Toujours à 6 chiffres. Et recopiez la dedans la case ou change la couleur de fonds dans Dream.
ATTENTION : il faut que ce soit une couleur WEB. Une couleur Web, pour l'avoir quand vous etes dans photoshop et que vous choisissez une couleur, vous cochez couleurs Web en bas a gauche de la fenetre. Sinon que va t il se passer ? Ben la personne qui sera en train de regarder votre postbit sur le WEb n'aura pas la meme interpretation du bleu et il verra peut-etre un bleu clair dans le fond du cadre ou est le message, alors que ce sera un autre bleu dans le cadre 3D sur les bords.
- Faites pareil pour le cadre des infos de l'user. Moi c'est un #666666 comme couleur. Voila tout est ok.
- On va remettre les boutons en bas a droite dans la cellule.
Retournez dans Dream, et allez sur le document n°2 que l'on avait crée au debut. (l'original).
Selectionnez le cadre en entier et faites un CTRL C et puis V dans la cellule du doc 1, ou sinon prenez les un par un...
Une petite bidouille en plus : retournez voir le code de votre postbit ( <> ) et tout en bas, ajouter : <br>
Ca fera le saut de ligne des posts.
SCREEN FINAL 20 (http://forum.vbulletin-fr.org/ressources/postbit tut/p20.gif)
Maintenant : uploadez toutes les images de votre postbit dans le rep images de vbb.
Copiez la source de votre nouveau postbit ( <> ) et collez la a la place de votre ancien template "postbit"
Allez sur votre forum et voir un petit peu comment ca ce passe en regardant un post.
Vous allez voir que rien ne marche.
LOL !
Normal, les chemins des fichiers ne sont pas bons. !
Il faut rectifier cela dans dreamweaver.
Passer au TUT 4