AccueilFAQRechercherMembresGroupesS'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

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le 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



    avatar
    Ryoma
    MasculinAge : 29Messages : 420

    le Jeu 10 Juil 2014 - 11:02

    Merci.
    avatar
    Onyx
    FémininAge : 23Messages : 3013

    le Jeu 10 Juil 2014 - 16:56

    Merci ^^



    Bloody Horizon
    FémininAge : 20Messages : 21

    le Sam 19 Juil 2014 - 15:29

    Oh c'est cool, merci :3
    avatar
    Leoguillem
    MasculinAge : 18Messages : 137

    le Lun 21 Juil 2014 - 18:18

    Merci ! =D



    - Je signe Marabout -
    avatar
    Kau
    FémininAge : 15Messages : 148

    le Mar 22 Juil 2014 - 15:06

    Merciiii ♥
    avatar
    Ansuz
    MasculinAge : 27Messages : 55

    le Ven 1 Aoû 2014 - 21:29

    Merci =)
    JE T'AIME ! ♥
    avatar
    shala
    FémininAge : 25Messages : 213

    le Sam 2 Aoû 2014 - 18:30

    merci ^^



    avatar
    Invité

    le Sam 2 Aoû 2014 - 18:33

    Merci :S
    avatar
    Natsumi13
    FémininAge : 21Messages : 64

    le Lun 1 Sep 2014 - 14:28

    Arigato *o*
    avatar
    The_Scream
    FémininAge : 23Messages : 41

    le Mer 3 Sep 2014 - 14:27

    Merci !



    ~That's the hell said no ~


    avatar
    Kau
    FémininAge : 15Messages : 148

    le Sam 6 Sep 2014 - 12:04

    Merci *^*
    avatar
    Immortal
    FémininAge : 31Messages : 631

    le Sam 20 Sep 2014 - 8:12

    Merciiiiiiiiiiiiiiiiii ^^




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    avatar
    mini-mimi
    FémininAge : 21Messages : 75

    le Ven 26 Sep 2014 - 18:33

    merci :)
    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Lun 29 Sep 2014 - 21:04

    merci!
    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Mer 8 Oct 2014 - 14:29

    merci!
    avatar
    LostMind
    MasculinAge : 28Messages : 3

    le Jeu 9 Oct 2014 - 20:30

    Merci pour ce partage, tu gères Wink
    avatar
    Allèle
    FémininAge : 24Messages : 56

    le Ven 24 Oct 2014 - 16:02

    Merci beaucoup, c'est génial ce truc.
    avatar
    Azzuen
    FémininAge : 19Messages : 61

    le Jeu 30 Oct 2014 - 1:57

    Omygash *w* Thanks you very much
    avatar
    Eleania Madena
    FémininAge : 20Messages : 88

    le Jeu 30 Oct 2014 - 9:34

    C'est exactement ce que je cherchais ! Merci !




    En ligne
    avatar
    Deed01
    MasculinAge : 39Messages : 311

    le Dim 2 Nov 2014 - 21:56

    merci Very Happy
    avatar
    Alonely
    MasculinAge : 23Messages : 43

    le Mer 3 Déc 2014 - 2:07

    Merci
    avatar
    Oror
    FémininAge : 27Messages : 95

    le Ven 12 Déc 2014 - 17:01

    Merci ! =)



    avatar
    athenais
    FémininAge : 29Messages : 98

    le Mar 16 Déc 2014 - 20:51

    Merci !
    avatar
    Dooh-Nem
    FémininAge : 24Messages : 139

    le Jeu 18 Déc 2014 - 19:42

    merci
    avatar
    Roitatan
    MasculinAge : 19Messages : 50

    le Dim 21 Déc 2014 - 9:43

    Ok Merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Oct 2017 - 20:15