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 :
Fnac : 15% de réduction sur toutes les TV de 55″ est plus
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
    Xenala
    Xenala
    FémininAge : 38Messages : 28

    Sam 27 Déc 2014 - 11:07

    Merci ^^
    louha
    louha
    FémininAge : 34Messages : 219

    Jeu 1 Jan 2015 - 16:07

    merci!
    Rusha
    Rusha
    FémininAge : 25Messages : 6

    Jeu 8 Jan 2015 - 16:09

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

    Jeu 8 Jan 2015 - 21:15

    interressée! merci ! :)



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

    Mer 21 Jan 2015 - 17:44

    Merci Very Happy
    hirondelle
    hirondelle
    FémininAge : 32Messages : 134

    Sam 7 Fév 2015 - 9:40

    Merci beaucoup
    RozenBreizh
    RozenBreizh
    FémininAge : 30Messages : 1411

    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
    Arc-En-Ciela
    Arc-En-Ciela
    FémininAge : 26Messages : 37

    Ven 20 Fév 2015 - 19:37

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

    Lun 23 Fév 2015 - 3:42

    J'adore !
    Adèle
    Adèle
    FémininAge : 30Messages : 96

    Sam 28 Fév 2015 - 16:23

    Pile ce qu'il me faut ♥
    Merci beaucoup !
    Kirito
    Kirito
    MasculinAge : 25Messages : 207

    Dim 22 Mar 2015 - 18:17

    Intéressé Wink merci
    Hana Evali
    Hana Evali
    FémininAge : 31Messages : 195

    Lun 23 Mar 2015 - 20:21

    Merci ^^



    Faire un sélecteur de thème - Page 13 Ye49
    erika02
    erika02
    FémininAge : 25Messages : 278

    Mar 24 Mar 2015 - 15:51

    Merci



    Faire un sélecteur de thème - Page 13 45054210
    ClaryF
    ClaryF
    FémininAge : 31Messages : 138

    Mer 15 Avr 2015 - 11:45

    Merci !
    mary legna
    mary legna
    FémininAge : 25Messages : 12

    Dim 17 Mai 2015 - 20:37

    Merci !
    Lyo
    Lyo
    FémininAge : 25Messages : 102

    Jeu 21 Mai 2015 - 17:37

    Merci ♥
    Itachi28
    Itachi28
    FémininAge : 24Messages : 55

    Lun 22 Juin 2015 - 22:49

    Merci!
    Alumine
    Alumine
    FémininAge : 24Messages : 488

    Mar 21 Juil 2015 - 16:51

    Thanks Cap'tain !



    Alumine
    Genocider
    Genocider
    MasculinAge : 23Messages : 35

    Lun 3 Aoû 2015 - 22:20

    Thanks o/
    Kelalin
    Kelalin
    FémininAge : 29Messages : 2537

    Lun 3 Aoû 2015 - 22:50

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

    Lun 31 Aoû 2015 - 12:20

    Merci pour ce code ♥♥
    Ab0utxMe
    Ab0utxMe
    FémininAge : 26Messages : 186

    Ven 11 Sep 2015 - 20:49

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



    Faire un sélecteur de thème - Page 13 878302signaturevegeta
    Deamyx
    Deamyx
    MasculinAge : 25Messages : 221

    Ven 11 Déc 2015 - 19:17

    Merci!!!
    Myrcella Heaven
    Myrcella Heaven
    FémininAge : 25Messages : 53

    Dim 20 Déc 2015 - 14:36

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

    Dim 27 Déc 2015 - 19:10

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


      La date/heure actuelle est Dim 28 Nov 2021 - 21:04