Faire un sélecteur de thème

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

C'est tout, bonne journée !

Merci ^^

Merci de l'astuce

Intéressant, je recherchais justement un moyen pour mon forum :)

Hâte de voir ce code O/

Intéressant !
Merci (d'avance) pour ce code.

Oh la la je veux voir, je cherchais partout ! T___T
En tout cas merci d'avance !!

Tiens ca m’intéresse ca . ^^

Je veux voir =)

merci sa peut être très utile ^^

Merci :)
Il est toujours sur le forum ??? :)

Merci :)

Je veux voir!

Teeeest ?

I need

Merci

Quelques choses que je recherche depuis pas mal de temps ! :) thanks

Merci pour l'astuce

Je veux voir 8D

merci beaucoup

Y'aurait t'il une bonne ame pour m'aider je nage complètement !

Oh vouiii!! ^^ je veux voir!

Ce tuto m'interesse beaucoup :) Merci du partage

Merci.