AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Faire un sélecteur de thème

    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Mer 9 Sep 2009 - 11:48

    Rappel du premier message :



    Salut salut,

    À force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le Sélecteur de Thème, en vous expliquant en deux mots comment l'utiliser.

    Tout d'abord, vous devez vous rendre dans votre template Overhall_Header et vous trouvez ceci :
    Code:
    </head>

    Juste avant, vous mettez le javascript qui fait fonctionner le code :
    Code:
      <script type="text/javascript">
        //<![CDATA[
          var scheme = getCookie('template1');
       
       
          if (scheme == 'NOM THÈME #1') {
            document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #1" />');
          }
          else if (scheme == 'NOM THÈME #2') {
            document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #2" />');
          }
          else if (scheme == 'NOM THÈME #3') {
            document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #3" />');
          }
       
       
          function changeskin(change) {
            var scheme = change;
            var name = 'template1';
            var pathname = location.pathname;
            var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
            var ExpDate = new Date ();
            ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
            setCookie(name,scheme,ExpDate,myDomain);
          }
       
          function getCookie(name) {
            var cname = name + "=";
            var dc = document.cookie;
            if (dc.length > 0) {
              begin = dc.indexOf(cname);
              if (begin != -1) {
                begin += cname.length;
                end = dc.indexOf(";", begin);
                if (end == -1) end = dc.length;
                  return unescape(dc.substring(begin, end));
                }
              }
            return null;
          }
                 
          function setCookie(name, value, expires, path, domain, secure) {
            document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
            ((path == null) ? "" : "; path=" + path) +
            ((domain == null) ? "" : "; domain=" + domain) +
            ((secure == null) ? "" : "; secure");
          }
        //]]>
      </script>


    Ensuite, vous allez où vous voulez que le sélecteur soit et vous mettez le sélecteur lui-même :
    Code:
            <div id="skinselector" style="margin: auto; text-align: center;">
                <form style="margin: auto; text-align: center;">
                    <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                        <option> Choisir un thème </option>
                        <option value="NOM THÈME #1"> NOM THÈME #1 </option>
                        <option value="NOM THÈME #2"> NOM THÈME #2 </option>
                        <option value="NOM THÈME #3"> NOM THÈME #3 </option>
                    </select>
                </form>
            </div>

    Par exemple, disons que vous voulez que le sélecteur soit directement après la navigation, vous allez dans le template "Overhall_Header" et placez le code après :
    Code:
                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                   </tr>
                </table>


    Utilisation :

    Vous l'avez donc compris, il faut utiliser UNIQUEMENT les feuilles CSS pour donner au forum son skin, c'est là que réside la difficulté de la tâche, car mettre un code en copier coller c'est facile, mais convertir un design normalement "automatique" en CSS c'est déjà plus difficile.

    Pour créer une feuille de CSS, vous pouvez vous ouvrir un bloc-note tout ce qu'il y a de plus normal et y écrire votre CSS. Puis, lorsque vous le sauvegardez, vous écrivez ".css" à la place de ".txt" comme extension.

    Une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple Archive-Host.

    Enfin, une fois les feuille de CSS hébergées, vous prenez le lien donné et vous pouvez le mettre dans le code du sélecteur de thème.
    Les informations à modifier sont en majuscules dans le code (celui du javascript ET celui du sélecteur lui-même), donc vous ne pouvez pas les manquer Wink

    C'est tout, bonne journée !


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:05, édité 5 fois



    sign
    Toutankhamon
    Toutankhamon
    MasculinAge : 31Messages : 77

    Ven 11 Sep 2009 - 15:53

    Ah ok et où puis-je le mettre dans ce cas ?
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Ven 11 Sep 2009 - 15:59

    Là où je l'indique dans mon premier message^^, donc dans le template "haut de page", après la barre de navig', c'est là qu'il est sur N-U..



    sign
    Toutankhamon
    Toutankhamon
    MasculinAge : 31Messages : 77

    Ven 11 Sep 2009 - 16:02

    Ah en faite, je pensais qu'on pouvait mettre ce script n'importe où.

    Mais je ne vois pas où elle est cette barre navig...
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Ven 11 Sep 2009 - 16:06

    Je l'indique en bas de mon message, il faut que tu repères l'endroit du templates où il y a :

    Code:
                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                  <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>

    Et que tu mettes le sélecteur juste après.



    sign
    Toutankhamon
    Toutankhamon
    MasculinAge : 31Messages : 77

    Ven 11 Sep 2009 - 16:16

    Oui cela fonctionne maintenant, merci à toi de m'avoir éclairé.
    Toutankhamon
    Toutankhamon
    MasculinAge : 31Messages : 77

    Ven 11 Sep 2009 - 16:31

    Y a-t-il un autre endroit que l'overall_header_new où on pourrait afficher le script ? Car celui-ci se place entre ma barre de navigation (donc mon widget) et le logo de mon forum.
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Ven 11 Sep 2009 - 17:40

    Oui^^ du moment que ça apparait partout. A toi de trouver où le placer pour qu'il apparaisse là.



    sign
    Toutankhamon
    Toutankhamon
    MasculinAge : 31Messages : 77

    Ven 11 Sep 2009 - 21:31

    Ok merci, donc je dois que le placer dans les templates pour qu'il fonctionne correctement ?

    edit: ok c'est bon, je l'ai placé dans l'overall_footer.

    Merci pour tout.
    Graph' One
    Graph' One
    MasculinAge : 26Messages : 565

    Sam 12 Sep 2009 - 12:26

    Thanks you very munch



    Ma Galerie
    Faire un sélecteur de thème - Page 3 Graph_15
    Le Mythe D'une Légende : Graph' One ...
    Lacryma
    Lacryma
    FémininAge : 28Messages : 72

    Sam 12 Sep 2009 - 13:33

    merci =)
    Verde
    Verde
    MasculinAge : 110Messages : 662

    Sam 12 Sep 2009 - 14:15

    Comment je t'aime Cap'tain ^^



    Ne soit jamais bon deux fois, une fois ça suffit. Si tu es bon une fois, alors tu es bon et c'est bon. Mais si tu es bon deux fois, alors tu es bonbon et on te suce.
    __________________________

    Faire un sélecteur de thème - Page 3 4bd44585d53e1verde--the-monster-of-nu
    Merci à Bang pour cette magnifique Signature
    __________________________

    Au final, tu as également joué à la Mega Drive.
    __________________________

    Hey Taka-Tin !!!!!
    D3NZL
    D3NZL
    Age : 27Messages : 62

    Sam 12 Sep 2009 - 14:30

    Merci beaucoup Captain' pour l'astuce, je vais essayer peut-être pour un futur design
    Ed
    Ed
    MasculinAge : 28Messages : 1

    Sam 12 Sep 2009 - 16:44

    Merci !
    Shakouw
    Shakouw
    FémininAge : 28Messages : 18

    Sam 12 Sep 2009 - 17:10

    Merci =)



    Faire un sélecteur de thème - Page 3 Signatureiy
    Oas~
    Oas~
    MasculinAge : 29Messages : 23

    Sam 12 Sep 2009 - 17:58

    Merci du partage =)
    Kurosagi
    Kurosagi
    MasculinAge : 110Messages : 1258

    Sam 12 Sep 2009 - 18:38

    Merchiiii =)



    Faire un sélecteur de thème - Page 3 4bdc705f23cbckick-ass-copie
    Nono
    Nono
    MasculinAge : 27Messages : 985

    Sam 12 Sep 2009 - 20:32

    Mercii =D




    Ashley Riot
    Ashley Riot
    MasculinAge : 34Messages : 2

    Mar 15 Sep 2009 - 15:58

    Exactement ce que je cherchais ^^

    Thanks Very Happy



    Faire un sélecteur de thème - Page 3 1131186446rn2
    Dark Angel.
    Dark Angel.
    MasculinAge : 30Messages : 13

    Mer 16 Sep 2009 - 2:10

    salut je suis pas mal débutant en css :/
    pourrais-tu m'expliquer de a à z comment mettre ce sélecteur sur ma page d'accueil facilement ?
    catherine31
    catherine31
    FémininAge : 54Messages : 4

    Mer 16 Sep 2009 - 6:54

    merci pour ce selecteur
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Mer 16 Sep 2009 - 10:26

    Dark Angel : c'est ce que j'ai fait... Si tu ne comprends pas je peux pas simplifier d'avantage, à toi d'apprendre les bases du langage html/css, il y a de nombreux moyens sur le net.. Comment croyez-vous que j'ai fait ? Wink



    sign
    Dark Angel.
    Dark Angel.
    MasculinAge : 30Messages : 13

    Mer 16 Sep 2009 - 13:34

    d'accord mais j'ai mis le code dans la template que tu as donné mais ça ne change rien U_U
    Sparkman
    Sparkman
    MasculinAge : 24Messages : 5032

    Mer 16 Sep 2009 - 13:38

    Génial, merci beaucoup de ton aide sérieusement ! ;D



    Faire un sélecteur de thème - Page 3 1474840621-sign
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Mer 16 Sep 2009 - 16:02

    Dark Angel : oui normal, il te faut lier des feuilles CSS... ^^"



    sign
    Grif
    Grif
    MasculinAge : 26Messages : 37

    Lun 21 Sep 2009 - 19:20

    J'essaie de mettre le sélecteur, merci!
    Contenu sponsorisé


      La date/heure actuelle est Sam 6 Mar 2021 - 17:48