Morwyn
11/01/2005, 19h57
Introduction
L'objectif de ce message est de donner un ptit coup de pouce aux néophytes du design, aux débutants des styles, aux novices des thèmes, aux...autres synonymes aussi et ptète même aux boulets qui sait !
Bref, si tu te considères comme une véritable merdouille en matière de création de thèmes mais souhaite progresser un minimum, ce poste est là pour toi, car moi même, que tu prendras soin d'appeler Maître je te prie, aie eu la bonne volonté de venir vous aidez, vous, les nuls...plutôt que vous voir dépenser vos pepettes pour un thème que vous garderez une semaine alors qu'elles auraient pu aller aux dons de la croix-rouge pour les tsunamis.
Allez on commence...on va partir d'un exemple, le site de www.wow-roleplay.com (http://www.wow-roleplay.com/) . A la fin de ce message vous devriez être à même de faire la réplique du site a peu de choses prés (pas touche à la bannière signé par un pote svp), ou encore un site du même style que celui de roleplay-fr.com, et bien plus en usant de votre imagination.
Etape 1 - les couleurs
Décider des tons généraux du site. Tu souhaites le voir plutot bleu, rouge, marron, noir, mauve, rose ? Pas possible de mettre du rose, jaune et du noir dans l'fond cela risquerait de blesser l'oeil du visiteur non-averti, il y a une "charte des couleurs" à respecter. A cette adresse (http://www.vbulletin.com/forum/showthread.php?t=118649) tu trouveras tout une palette de différentes couleurs déjà mise en place. Egalement, ce ptit manuel (http://www.vbulletin.com/docs/html/main/color_maps_intro) , la carte de reference des couleurs, est trés utile et t'indique a quoi correspondent les différents blocs dans le gestionnaire de style (les classes des feuilles de style en fait). Cette carte doit surement trainer sur ce site en français.
Bien, à présent tu devrais pouvoir déterminer les couleurs que tu désires déjà, sinon on peut trés bien partir du style par défaut, ce que j'ai fais pour wow-roleplay.
Etape 2 - Largeur + Bordures
On va régler la largeur du site, la fixer à 800 pixels, largeur plus que correcte pour tout types de résolutions (sauf pour les gameboys en 640x480). Pour cela, on va dans le menu admin, on clique sur "tout developper" en haut de la colonne a gauche, c'est tout de meme bien plus pratique (on se demande pourquoi ils cachent les liens d'ailleurs...) pour voir les liens, puis:
Styles et templates >> Gestionnaire de Styles >> Le style sur lequel tu travailles (mettons default style par exemple) >> toutes les options de style >> go.
A la page qui s'affiche, descends légèrement, juste en dessous du tableau "templates communs" sur le tableau "Tailles et dimensions", juste en face de:
Largeur du tableau principal (en pixels ou pourcentage)
Entre 800 sans rien à côté, pas de pourcentage ni de "pix", 800 tout court, sinon cela peut poser problème a des navigateurs tels que Firefox. Descends tout en bas et clique "enregistrer". A present le site/forum (pas le menu admin qui est independant) sera fixe sur une largeur de 800.
On passe aux bordures, à savoir le cadre. Par exemple sur wow-roleplay, il est noir type Warcraft, avec de jolies dorures en haut et en bas du site *ronronne*.
Pour faire les cadres il te faut 8 images. Une sera le coin en haut a gauche, une en haut a droite etc...bref ceci:
http://www.roleplay-fr.com/images/cadremorwyn.gif
Donc 4 images, une pour chaque coin + quatre extensibles pour les côtés. Le plus chiant maintenant c'est de mettre ça sous forme de code mais...je les ai déjà pour toi hin hin hin...Une fois que tu as fait ton cadre, assure toi que les largeurs et hauteurs des coins correspondent avec les images extensibles. Par exemple, si l'image 8 du dessin etait en 16x16 mais l'image 7 en 16x32 (2eme nombre étant la hauteur), cela signifierait que 7 est plus grand que 8...on peut deja imaginer que cela causerait des problemes d'affichages. Donc en regardant le dessin ci-dessus, assure toi que le tout forme un joli cadre sans deformation.
A present voici les bouts de codes à insérer.
Ce code-ci est à insérer dans le Header(qui se situe dans gestionnaire de styles>>ton style>> toutes les options de style >>Tableau "Templates communs")SOUS <!-- /logo --><table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="8" height="26" style="background-image:url(http://adresse exacte de IMAGE 1 COIN GAUCHE EN HAUT);"></td>
<td height="26" style="background-image:url(http://adresse exacte de IMAGE 2 EXTENSIBLE TOP);"></td>
<td width="8" height="26" style="background-image:url(http://adresse exacte de IMAGE 3 COIN DROIT EN HAUT);"></td>
</tr>
<tr>
<td width="8" style="background-image:url(http://adresse exacte de IMAGE 4 BORDURE GAUCHE);"></td>
<td valign="top">NOTE: Les numeros d'images dont je parle dans le code correspondent aux numeros sur l'image du dessus (images en rouges avec numeros blancs). Egalement il est important de noter que tu dois rentrer dans le code les largeurs et hauteurs de tes images à toi. Exemple dans le bout de code ici on voit width="8" height="26" en face de l'image 1 mais ceci correspond a la largeur (width) et hauteur (height) de mon image 1 sur wow-roleplay.com.
A présent il nous faut insérer l'autre partie du cadre, la on remarque qu'il n'y a que le haut et le côté gauche sur le code precedent, le côté droit et le bas se mettront dans le footer, juste SOUS la balise <!-- /content area table --></td>
<td width="8" style="background-image:url(http://adresse exacte de IMAGE 5 BORDURE DE DROITE);"></td>
</tr>
<tr>
<td width="8" height="27" style="background-image:url(http://adresse exacte de IMAGE 6 COIN EN BAS A GAUCHE);"></td>
<td height="27" style="background-image:url(http://adresse exacte de IMAGE 7 Bordure extensible du Bas);"></td>
<td width="8" height="27" style="background-image:url(http://adresse exacte de IMAGE 8 COIN EN BAS A DROITE);"></td>
</tr>
</table>
Et voila, à présent enregistrer le tout...tadaaaa rho la belle bordure. Avec ça il y a moyen de bien s'amuser si tu as le temps, par exemple faire des bordures parcheminées en jouant avec la couleur du fond.
On passe à l'etape suivante, les textures.
Etape 3 - Les Textures + Bannière
En ce qui concerne la bannière, dans le gestionnaire de styles (toutes options de styles) elle se situe ici:
Chemins des images
Image de titre
Image localisée dans le template « header », utilisée comme logo principal de votre forum.
Vous pouvez ainsi rentrer l'adresse complète de l'image de votre nouvelle bannière. Si vous êtes vraiment une quiche en design j'ai inclus un fichier zip a ce message avec une bannière format photoshop (psd) de type warcraft, dizaillnée à l'aide de mes petites mimines boudinettes, en récuperant des images a droite a gauche de WoW.
Pour les textures, soit vous les faites vous même soit vous les trouvez sur le web bien entendu, le but de cette partie n'étant pas de vous expliquer comment les faire mais vous aidez à comprendre où les placer pour avoir quelque chose de potable. Normalement si vous regardez bien la carte de reference des couleurs donnée en lien plus haut, vous n'aurez même pas besoin de lire ce qui suit.
Fond du site, hors tableau
Commencons par le fond du site, les lattes verticales de wow-roleplay.com.
Allez dans:
Styles et templates >> Gestionnaire de Styles >> Le style sur lequel tu travailles (mettons default style par exemple) >> toutes les options de style >> go.
Descends, il s'agit du premier bloc CSS a savoir "Corps".
En face de "Arriere-Plan" tappe:
url(images/TONFONDESITE.gif)
Cette image ici nommée TONFONDESITE.gif serait localisée à http://tonsite.com/tonforumVbulletin/images/TONFONDESITE.gif pour donner une idée de quoi mettre dans les parenthèses aprés url.
Fond du tableau
Ce sont les planches grises de wow-roleplay.com, elles sont dans le bloc CSS du gestionnaire de style juste sous celui du Corps, dans "Arrière-plan de la page".
Même chose en face de Arriere-Plan tappe:
url(images/TONFONDESITE2.gif)
A présent il te suffit de regarder dans la carte des couleurs de reference pour te faire un idée de ou placer ces textures (format gif preferable, moins lourd en taille).
Voilà, ce n'est pas transcendant mais au moins ça devrait te permettre de faire un site comme ceux-ci, le plus pénible étant de faire ou trouver les textures à présent ^^ (je suis preneur de bonnes textures si tu en as):
WoW-Roleplay
http://www.roleplay-fr.com/images/wow-roleplay.gif
Roleplay-fr
http://www.roleplay-fr.com/images/roleplay-fr.gif
L'objectif de ce message est de donner un ptit coup de pouce aux néophytes du design, aux débutants des styles, aux novices des thèmes, aux...autres synonymes aussi et ptète même aux boulets qui sait !
Bref, si tu te considères comme une véritable merdouille en matière de création de thèmes mais souhaite progresser un minimum, ce poste est là pour toi, car moi même, que tu prendras soin d'appeler Maître je te prie, aie eu la bonne volonté de venir vous aidez, vous, les nuls...plutôt que vous voir dépenser vos pepettes pour un thème que vous garderez une semaine alors qu'elles auraient pu aller aux dons de la croix-rouge pour les tsunamis.
Allez on commence...on va partir d'un exemple, le site de www.wow-roleplay.com (http://www.wow-roleplay.com/) . A la fin de ce message vous devriez être à même de faire la réplique du site a peu de choses prés (pas touche à la bannière signé par un pote svp), ou encore un site du même style que celui de roleplay-fr.com, et bien plus en usant de votre imagination.
Etape 1 - les couleurs
Décider des tons généraux du site. Tu souhaites le voir plutot bleu, rouge, marron, noir, mauve, rose ? Pas possible de mettre du rose, jaune et du noir dans l'fond cela risquerait de blesser l'oeil du visiteur non-averti, il y a une "charte des couleurs" à respecter. A cette adresse (http://www.vbulletin.com/forum/showthread.php?t=118649) tu trouveras tout une palette de différentes couleurs déjà mise en place. Egalement, ce ptit manuel (http://www.vbulletin.com/docs/html/main/color_maps_intro) , la carte de reference des couleurs, est trés utile et t'indique a quoi correspondent les différents blocs dans le gestionnaire de style (les classes des feuilles de style en fait). Cette carte doit surement trainer sur ce site en français.
Bien, à présent tu devrais pouvoir déterminer les couleurs que tu désires déjà, sinon on peut trés bien partir du style par défaut, ce que j'ai fais pour wow-roleplay.
Etape 2 - Largeur + Bordures
On va régler la largeur du site, la fixer à 800 pixels, largeur plus que correcte pour tout types de résolutions (sauf pour les gameboys en 640x480). Pour cela, on va dans le menu admin, on clique sur "tout developper" en haut de la colonne a gauche, c'est tout de meme bien plus pratique (on se demande pourquoi ils cachent les liens d'ailleurs...) pour voir les liens, puis:
Styles et templates >> Gestionnaire de Styles >> Le style sur lequel tu travailles (mettons default style par exemple) >> toutes les options de style >> go.
A la page qui s'affiche, descends légèrement, juste en dessous du tableau "templates communs" sur le tableau "Tailles et dimensions", juste en face de:
Largeur du tableau principal (en pixels ou pourcentage)
Entre 800 sans rien à côté, pas de pourcentage ni de "pix", 800 tout court, sinon cela peut poser problème a des navigateurs tels que Firefox. Descends tout en bas et clique "enregistrer". A present le site/forum (pas le menu admin qui est independant) sera fixe sur une largeur de 800.
On passe aux bordures, à savoir le cadre. Par exemple sur wow-roleplay, il est noir type Warcraft, avec de jolies dorures en haut et en bas du site *ronronne*.
Pour faire les cadres il te faut 8 images. Une sera le coin en haut a gauche, une en haut a droite etc...bref ceci:
http://www.roleplay-fr.com/images/cadremorwyn.gif
Donc 4 images, une pour chaque coin + quatre extensibles pour les côtés. Le plus chiant maintenant c'est de mettre ça sous forme de code mais...je les ai déjà pour toi hin hin hin...Une fois que tu as fait ton cadre, assure toi que les largeurs et hauteurs des coins correspondent avec les images extensibles. Par exemple, si l'image 8 du dessin etait en 16x16 mais l'image 7 en 16x32 (2eme nombre étant la hauteur), cela signifierait que 7 est plus grand que 8...on peut deja imaginer que cela causerait des problemes d'affichages. Donc en regardant le dessin ci-dessus, assure toi que le tout forme un joli cadre sans deformation.
A present voici les bouts de codes à insérer.
Ce code-ci est à insérer dans le Header(qui se situe dans gestionnaire de styles>>ton style>> toutes les options de style >>Tableau "Templates communs")SOUS <!-- /logo --><table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="8" height="26" style="background-image:url(http://adresse exacte de IMAGE 1 COIN GAUCHE EN HAUT);"></td>
<td height="26" style="background-image:url(http://adresse exacte de IMAGE 2 EXTENSIBLE TOP);"></td>
<td width="8" height="26" style="background-image:url(http://adresse exacte de IMAGE 3 COIN DROIT EN HAUT);"></td>
</tr>
<tr>
<td width="8" style="background-image:url(http://adresse exacte de IMAGE 4 BORDURE GAUCHE);"></td>
<td valign="top">NOTE: Les numeros d'images dont je parle dans le code correspondent aux numeros sur l'image du dessus (images en rouges avec numeros blancs). Egalement il est important de noter que tu dois rentrer dans le code les largeurs et hauteurs de tes images à toi. Exemple dans le bout de code ici on voit width="8" height="26" en face de l'image 1 mais ceci correspond a la largeur (width) et hauteur (height) de mon image 1 sur wow-roleplay.com.
A présent il nous faut insérer l'autre partie du cadre, la on remarque qu'il n'y a que le haut et le côté gauche sur le code precedent, le côté droit et le bas se mettront dans le footer, juste SOUS la balise <!-- /content area table --></td>
<td width="8" style="background-image:url(http://adresse exacte de IMAGE 5 BORDURE DE DROITE);"></td>
</tr>
<tr>
<td width="8" height="27" style="background-image:url(http://adresse exacte de IMAGE 6 COIN EN BAS A GAUCHE);"></td>
<td height="27" style="background-image:url(http://adresse exacte de IMAGE 7 Bordure extensible du Bas);"></td>
<td width="8" height="27" style="background-image:url(http://adresse exacte de IMAGE 8 COIN EN BAS A DROITE);"></td>
</tr>
</table>
Et voila, à présent enregistrer le tout...tadaaaa rho la belle bordure. Avec ça il y a moyen de bien s'amuser si tu as le temps, par exemple faire des bordures parcheminées en jouant avec la couleur du fond.
On passe à l'etape suivante, les textures.
Etape 3 - Les Textures + Bannière
En ce qui concerne la bannière, dans le gestionnaire de styles (toutes options de styles) elle se situe ici:
Chemins des images
Image de titre
Image localisée dans le template « header », utilisée comme logo principal de votre forum.
Vous pouvez ainsi rentrer l'adresse complète de l'image de votre nouvelle bannière. Si vous êtes vraiment une quiche en design j'ai inclus un fichier zip a ce message avec une bannière format photoshop (psd) de type warcraft, dizaillnée à l'aide de mes petites mimines boudinettes, en récuperant des images a droite a gauche de WoW.
Pour les textures, soit vous les faites vous même soit vous les trouvez sur le web bien entendu, le but de cette partie n'étant pas de vous expliquer comment les faire mais vous aidez à comprendre où les placer pour avoir quelque chose de potable. Normalement si vous regardez bien la carte de reference des couleurs donnée en lien plus haut, vous n'aurez même pas besoin de lire ce qui suit.
Fond du site, hors tableau
Commencons par le fond du site, les lattes verticales de wow-roleplay.com.
Allez dans:
Styles et templates >> Gestionnaire de Styles >> Le style sur lequel tu travailles (mettons default style par exemple) >> toutes les options de style >> go.
Descends, il s'agit du premier bloc CSS a savoir "Corps".
En face de "Arriere-Plan" tappe:
url(images/TONFONDESITE.gif)
Cette image ici nommée TONFONDESITE.gif serait localisée à http://tonsite.com/tonforumVbulletin/images/TONFONDESITE.gif pour donner une idée de quoi mettre dans les parenthèses aprés url.
Fond du tableau
Ce sont les planches grises de wow-roleplay.com, elles sont dans le bloc CSS du gestionnaire de style juste sous celui du Corps, dans "Arrière-plan de la page".
Même chose en face de Arriere-Plan tappe:
url(images/TONFONDESITE2.gif)
A présent il te suffit de regarder dans la carte des couleurs de reference pour te faire un idée de ou placer ces textures (format gif preferable, moins lourd en taille).
Voilà, ce n'est pas transcendant mais au moins ça devrait te permettre de faire un site comme ceux-ci, le plus pénible étant de faire ou trouver les textures à présent ^^ (je suis preneur de bonnes textures si tu en as):
WoW-Roleplay
http://www.roleplay-fr.com/images/wow-roleplay.gif
Roleplay-fr
http://www.roleplay-fr.com/images/roleplay-fr.gif