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
    Xenala
    FémininAge : 34Messages : 28

    le Sam 27 Déc 2014 - 11:07

    Merci ^^
    avatar
    louha
    FémininAge : 30Messages : 213

    le Jeu 1 Jan 2015 - 16:07

    merci!
    avatar
    Rusha
    FémininAge : 21Messages : 6

    le Jeu 8 Jan 2015 - 16:09

    merci!! c'est bien pratique tout ça!
    avatar
    Pony62
    FémininAge : 22Messages : 61

    le Jeu 8 Jan 2015 - 21:15

    interressée! merci ! :)



    Underconstruction ♫
    avatar
    Mangédéfruiélégumeuh
    MasculinAge : 20Messages : 83

    le Mer 21 Jan 2015 - 17:44

    Merci Very Happy
    avatar
    hirondelle
    FémininAge : 28Messages : 134

    le Sam 7 Fév 2015 - 9:40

    Merci beaucoup
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1361

    le Lun 9 Fév 2015 - 15:27

    Je vais tester le sélecteur de thème pour mon forum, car apparent mon design actuel n'est pas aux goûts de tout le monde. Merci donc d'avoir proposer le tuto en LS Capitaine <3

    avatar
    Arc-En-Ciela
    FémininAge : 22Messages : 37

    le Ven 20 Fév 2015 - 19:37

    Merci, j'ai hâte d'y jeter un coup d'oeil !
    avatar
    Kovu
    FémininAge : 16Messages : 252

    le Lun 23 Fév 2015 - 3:42

    J'adore !



    avatar
    Adèle
    FémininAge : 26Messages : 96

    le Sam 28 Fév 2015 - 16:23

    Pile ce qu'il me faut ♥
    Merci beaucoup !
    avatar
    Kirito
    MasculinAge : 21Messages : 200

    le Dim 22 Mar 2015 - 18:17

    Intéressé Wink merci
    avatar
    Hana Evali
    FémininAge : 27Messages : 165

    le Lun 23 Mar 2015 - 20:21

    Merci ^^



    avatar
    erika02
    FémininAge : 21Messages : 259

    le Mar 24 Mar 2015 - 15:51

    Merci



    avatar
    ClaryF
    FémininAge : 27Messages : 135

    le Mer 15 Avr 2015 - 11:45

    Merci !
    avatar
    mary legna
    FémininAge : 21Messages : 12

    le Dim 17 Mai 2015 - 20:37

    Merci !
    avatar
    Lyo
    FémininAge : 21Messages : 79

    le Jeu 21 Mai 2015 - 17:37

    Merci ♥
    avatar
    Itachi28
    FémininAge : 20Messages : 47

    le Lun 22 Juin 2015 - 22:49

    Merci!
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Mar 21 Juil 2015 - 16:51

    Thanks Cap'tain !



    Alumine
    avatar
    Genocider
    MasculinAge : 19Messages : 35

    le Lun 3 Aoû 2015 - 22:20

    Thanks o/
    avatar
    Kelalin
    FémininAge : 25Messages : 1709

    le Lun 3 Aoû 2015 - 22:50

    Merci ( ̄ー ̄)
    avatar
    Tchi
    FémininAge : 24Messages : 40

    le Lun 31 Aoû 2015 - 12:20

    Merci pour ce code ♥♥
    avatar
    Ab0utxMe
    FémininAge : 22Messages : 182

    le Ven 11 Sep 2015 - 20:49

    Merci beaucoup, j'ai assez peur de me lancer dans ce genre de code ! ^^



    avatar
    Deamyx
    MasculinAge : 21Messages : 200

    le Ven 11 Déc 2015 - 19:17

    Merci!!!
    avatar
    Myrcella Heaven
    FémininAge : 21Messages : 53

    le Dim 20 Déc 2015 - 14:36

    Merci !
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 26Messages : 315

    le Dim 27 Déc 2015 - 19:10

    Bon, tentons de ce compliquer un peu la vie !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Nov 2017 - 2:44