Page 1 sur 2 1 2 DernièreDernière
Affichage des résultats 1 à 15 sur 21

Discussion: Un style correct en une soirée

  1. #1
    Date d'inscription
    December 2004
    Localisation
    Paris
    Âge
    43
    Messages
    36
    Version de vBulletin
    3.6
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    71

    Gêné Un style correct en une soirée

    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 . 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 tu trouveras tout une palette de différentes couleurs déjà mise en place. Egalement, ce ptit manuel , 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:




    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 -->
    Code PHP:
    <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 -->
    Code PHP:
    </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...NFONDESITE.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



    Roleplay-fr



    Fichiers attachés Fichiers attachés
    Dernière modification par Morwyn ; 11/01/2005 à 21h01.


    Egalement responsable de: wow-roleplay.com : communauté jdr pour World of Warcraft

  2. #2
    Date d'inscription
    December 2004
    Localisation
    Paris
    Âge
    43
    Messages
    36
    Version de vBulletin
    3.6
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    71

    Message

    Je le rajoute en format PDF (cf fichier attaché), peut être plus agréable à lire et à conserver.
    Fichiers attachés Fichiers attachés


    Egalement responsable de: wow-roleplay.com : communauté jdr pour World of Warcraft

  3. #3
    Date d'inscription
    August 2003
    Localisation
    Paris
    Âge
    43
    Messages
    4 843
    Version de vBulletin
    3.5
    Hébergeur
    me
    Pouvoir de réputation
    100
    Merci pour ce tuto, je pense que ça en aidera plus d'un meme si j'en ai pas besoin .

    Je le mettrai dans les tutos
    J'ai un ami qui croit que les gens qui tiennent des forums, comme moi ou comme Pitchoune, sont des boutonneux, gros, gras, sans vie, toujours sales, assis entre des montagnes de détritus ...
    Ben je tiens à dire que ce n'est pas vrai, j'ai jeté mes poubelles tout à l'heure ...

  4. #4
    Date d'inscription
    December 2002
    Localisation
    Paris, France
    Âge
    37
    Messages
    2 483
    Version de vBulletin
    4.0
    Hébergeur
    sandwish.fr
    Pouvoir de réputation
    90
    akex tu alide pas les pièce jointes ?

    sinon je te remercie pour ce joli tuto

  5. #5
    Date d'inscription
    December 2003
    Localisation
    France
    Âge
    37
    Messages
    2 265
    Version de vBulletin
    3.5
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    86
    Très bon boulot, merci !!
    vBulletin addict

  6. #6
    Date d'inscription
    December 2004
    Localisation
    Paris
    Âge
    43
    Messages
    36
    Version de vBulletin
    3.6
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    71
    De rien les gens , j'espère que ce n'est pas trop trop long et que ça ne décourage pas à la lecture.

    [HS] Heh Romano pas mal du tout ta sig ...dans le genre ptits dessins bien poilants y a cette adresse aussi:
    http://www.cheston.com/pbf/archive.html

    Et sinon Hideo ou as tu trouvé l'image pour l'adresse e-mail google, elle est faite maison où c'est dans les options ? J'ai regardé sur ma boite et dans la FAQ et je n'ai rien trouvé a ce sujet.

  7. #7
    figo-rose Invité
    hehe cool moi ki cherchais tjrs un tuto pour faire mon propre skin j attend juste que les pieces soit valider
    Thx a toi pour ce tuto l ami

  8. #8
    Date d'inscription
    September 2002
    Localisation
    france ou quebec pas de preferences ;-)
    Âge
    46
    Messages
    1 296
    Version de vBulletin
    3.6
    Hébergeur
    moi
    Pouvoir de réputation
    85

    Bon

    je valide les pieces jointes excellent tuto morwyn


  9. #9
    Date d'inscription
    January 2005
    Localisation
    95
    Messages
    4
    Version de vBulletin
    3.5
    Hébergeur
    allo-heberge
    Pouvoir de réputation
    0
    Merci pour cette aide précieuse,maintenant a moi de voir si je fais parti des boulets

  10. #10
    Date d'inscription
    December 2004
    Localisation
    Paris
    Âge
    43
    Messages
    36
    Version de vBulletin
    3.6
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    71
    *bump* a noter que roleplay-fr n'existe plus. Enfin j'ai toujours le nom de domaine mais pour l'instant il ne me sert à rien (si interessé contactez moi).

    En nouveauté en revanche, cms-gratuit.com en cours d'élaboration, un site pour tester de l'opensource en matière de forum, CMS, et blogs. Je pars d'une skin originale de nubula9.com intitulée bluevision, que je pense modifier en bonne partie.

  11. #11
    Date d'inscription
    July 2005
    Messages
    1
    Version de vBulletin
    Pas encore achetée
    Hébergeur
    free
    Pouvoir de réputation
    0

    Bon

    Merci pour ce support

  12. #12
    Date d'inscription
    January 2005
    Localisation
    Chez moi
    Messages
    22
    Version de vBulletin
    3.5
    Hébergeur
    www.nuxit.net
    Pouvoir de réputation
    71
    Il aura servi plus d'un vraiement ce tutorail.
    Merci pout tout

  13. #13
    Date d'inscription
    November 2002
    Localisation
    geneve
    Messages
    90
    Version de vBulletin
    3.5
    Hébergeur
    infomaniak.ch
    Pouvoir de réputation
    78
    excellent excellent mais premier jet ne marche pas faudrra que je prene plus de temps

    oui je sais on avais dit une soirée

  14. #14
    Date d'inscription
    December 2004
    Localisation
    Paris
    Âge
    43
    Messages
    36
    Version de vBulletin
    3.6
    Hébergeur
    Infomaniak
    Pouvoir de réputation
    71
    Un autre thème crée rapidement hier soir suivant le même principe:
    http://www.cms-gratuit.com/Mascarade/vb/

  15. #15
    Date d'inscription
    November 2002
    Localisation
    geneve
    Messages
    90
    Version de vBulletin
    3.5
    Hébergeur
    infomaniak.ch
    Pouvoir de réputation
    78
    ouaah la classe

Informations de la discussion

Utilisateur(s) sur cette discussion

Il y a actuellement 1 utilisateur(s) naviguant sur cette discussion. (0 utilisateur(s) et 1 invité(s))

Discussions similaires

  1. Hack style qui permet de change de style sur la page dacceuil
    Par Deen dans le forum Demande de modification
    Réponses: 0
    Dernier message: 10/01/2003, 09h22

Les tags pour cette discussion

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •