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.

Le deal à ne pas rater :
PS5 sur Cdiscount : l’astuce pour mettre la console dans son panier
Voir le deal

    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
    QueenDancing13
    QueenDancing13
    FémininAge : 24Messages : 106

    Lun 10 Juin 2013 - 15:02

    I want Wink



    Faire un sélecteur de thème - Page 11 Christina_Aguilera_Signature_by_Sitic
    Coco-Drift
    Coco-Drift
    MasculinAge : 27Messages : 18

    Mar 18 Juin 2013 - 20:31

    Thx a lot :3
    Eros
    Eros
    MasculinAge : 25Messages : 19

    Mar 18 Juin 2013 - 23:53

    Merci
    alexandre385
    alexandre385
    MasculinAge : 20Messages : 25

    Mer 21 Aoû 2013 - 17:36

    merci
    Ryosaki
    Ryosaki
    MasculinAge : 28Messages : 109

    Mar 10 Sep 2013 - 12:48

    Merci



    Faire un sélecteur de thème - Page 11 Tutog
    Yukionna
    Yukionna
    FémininAge : 20Messages : 75

    Dim 29 Sep 2013 - 15:42

    Merciiii
    teck
    teck
    MasculinAge : 29Messages : 63

    Dim 27 Oct 2013 - 13:55

    merci beaucoup



    Faire un sélecteur de thème - Page 11 Signa113
    Lady Doll
    Lady Doll
    FémininAge : 31Messages : 101

    Ven 6 Déc 2013 - 11:08

    merci =D
    Deviliar
    Deviliar
    FémininAge : 32Messages : 44

    Dim 8 Déc 2013 - 16:16

    merci beaucoup !
    Miss Kiba
    Miss Kiba
    FémininAge : 27Messages : 38

    Ven 13 Déc 2013 - 19:58

    Merci!
    Junhae
    Junhae
    MasculinAge : 24Messages : 16

    Lun 30 Déc 2013 - 22:46

    Merci o/



    Cokinelle
    Cokinelle
    FémininAge : 24Messages : 10

    Mer 8 Jan 2014 - 18:36

    Merci bien.
    Thorn
    Thorn
    MasculinAge : 19Messages : 432

    Sam 1 Fév 2014 - 17:23

    Merci beaucoup !^^



    Faire un sélecteur de thème - Page 11 Kryr
    rhino
    rhino
    MasculinAge : 25Messages : 25

    Jeu 27 Fév 2014 - 2:49

    Merci !
    Lakxi
    Lakxi
    FémininAge : 28Messages : 40

    Lun 21 Avr 2014 - 19:42

    parfait ! merci !
    Miyoko
    Miyoko
    FémininAge : 28Messages : 213

    Lun 5 Mai 2014 - 18:16

    Merci beaucoup



    Faire un sélecteur de thème - Page 11 641359838739
    Ryuu
    Ryuu
    FémininAge : 27Messages : 61

    Lun 5 Mai 2014 - 18:20

    Merci ♥



    avatar
    Golhbul
    MasculinAge : 39Messages : 16

    Lun 19 Mai 2014 - 12:45

    Génial...Merci
    Cydae
    Cydae
    FémininAge : 28Messages : 99

    Ven 13 Juin 2014 - 9:30

    Merci beaucoup!
    Haaken
    Haaken
    FémininAge : 27Messages : 43

    Mar 24 Juin 2014 - 22:36

    Merci par avance =)
    avatar
    Zahil
    MasculinAge : 27Messages : 29

    Sam 28 Juin 2014 - 21:28

    Merci !
    Saphiina
    Saphiina
    FémininAge : 26Messages : 26

    Dim 29 Juin 2014 - 11:09

    Je cherchais ça depuis longtemps :o merci Very Happy
    Klemmeria
    Klemmeria
    FémininAge : 21Messages : 147

    Dim 29 Juin 2014 - 16:44

    merci!



    Faire un sélecteur de thème - Page 11 Btqy
    skyfighter
    skyfighter
    MasculinAge : 37Messages : 352

    Lun 30 Juin 2014 - 16:20

    merci




    Faire un sélecteur de thème - Page 11 Signat10
    Lunara
    Lunara
    FémininAge : 34Messages : 95

    Mar 8 Juil 2014 - 20:34

    merci pour le partage, ça m'intrigue !
    Contenu sponsorisé


      La date/heure actuelle est Lun 8 Mar 2021 - 11:19