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 :
Sexy Cosplay Doll : Tome 8 Collector de Sexy Cosplay Doll avec artbook
10.80 €
Voir le deal

    Faire un sélecteur de thème

    Sparrow-style
    Sparrow-style
    FémininAge : 37Messages : 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
    Kita
    Kita
    MasculinAge : 29Messages : 57

    Ven 28 Jan 2011 - 19:43

    Merci ^^
    bouboucool
    bouboucool
    MasculinAge : 42Messages : 10

    Mer 23 Fév 2011 - 11:10

    Merci de l'astuce
    thomas1117
    thomas1117
    MasculinAge : 29Messages : 21

    Mer 23 Fév 2011 - 13:08

    Intéressant, je recherchais justement un moyen pour mon forum :)
    Ketsu
    Ketsu
    FémininAge : 26Messages : 49

    Jeu 24 Fév 2011 - 0:14

    Yaka! A moi le taff pour Arganalth



    Oulala, une nouvelle bien inquiétante.
    Faire un sélecteur de thème - Page 8 306099KetsukaSignaturepng
    Nico Robin
    Nico Robin
    FémininAge : 33Messages : 45

    Dim 27 Fév 2011 - 22:37

    Hâte de voir ce code O/



    Faire un sélecteur de thème - Page 8 13081311325692794 Faire un sélecteur de thème - Page 8 130813113256545763 Faire un sélecteur de thème - Page 8 131007105856621775 Faire un sélecteur de thème - Page 8 131007105949512474
    Katterina
    Katterina
    FémininAge : 32Messages : 2

    Dim 6 Mar 2011 - 19:57

    Intéressant !
    Merci (d'avance) pour ce code. Very Happy
    Nell-chan
    Nell-chan
    FémininAge : 29Messages : 12

    Jeu 17 Mar 2011 - 0:20

    Oh la la je veux voir, je cherchais partout ! T___T
    En tout cas merci d'avance !!
    Arawen
    Arawen
    FémininAge : 30Messages : 126

    Jeu 7 Avr 2011 - 17:56

    Tiens ca m’intéresse ca . ^^
    Ice Cream
    Ice Cream
    FémininAge : 24Messages : 22

    Lun 25 Avr 2011 - 15:17

    Je veux voir =)
    Givrix
    Givrix
    MasculinAge : 25Messages : 203

    Ven 29 Avr 2011 - 23:06

    merci sa peut être très utile ^^



    Faire un sélecteur de thème - Page 8 713484123
    avatar
    Esto
    MasculinAge : 28Messages : 53

    Mar 24 Mai 2011 - 16:30

    Merci :)
    Il est toujours sur le forum ??? :)
    Daddoo
    Daddoo
    FémininAge : 31Messages : 23

    Mer 1 Juin 2011 - 23:16

    Merci :)
    SaphiraSephora
    SaphiraSephora
    FémininAge : 24Messages : 7

    Lun 20 Juin 2011 - 22:28

      Ze veux voir ^.^
    Yesterday
    Yesterday
    FémininAge : 27Messages : 57

    Mer 22 Juin 2011 - 14:43

    Je veux voir!
    Fusions
    Fusions
    MasculinAge : 25Messages : 21

    Ven 24 Juin 2011 - 19:22

    Teeeest ?
    Angel Ezekiel
    Angel Ezekiel
    MasculinAge : 29Messages : 1377

    Ven 8 Juil 2011 - 13:25

    I need



    Perle
    Perle
    FémininAge : 25Messages : 32

    Ven 8 Juil 2011 - 13:31

    Merci
    Alchimie
    Alchimie
    FémininAge : 28Messages : 4

    Dim 10 Juil 2011 - 20:56

    Quelques choses que je recherche depuis pas mal de temps ! :) thanks
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 30Messages : 76

    Mer 20 Juil 2011 - 20:31

    Merci pour l'astuce



    Faire un sélecteur de thème - Page 8 Bannol1xj5
    avatar
    Pupuce17
    FémininAge : 25Messages : 28

    Sam 6 Aoû 2011 - 16:42

    Je veux voir 8D



    Panda panda panda !! : P I love Panda x)
    Revaz
    Revaz
    MasculinAge : 41Messages : 15

    Jeu 11 Aoû 2011 - 22:49

    merci beaucoup



    Faire un sélecteur de thème - Page 8 Signrevaz
    Luna-Golden
    Luna-Golden
    FémininAge : 33Messages : 7

    Dim 28 Aoû 2011 - 22:46

    Y'aurait t'il une bonne ame pour m'aider je nage complètement !
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 34Messages : 71

    Mer 14 Sep 2011 - 1:43

    Oh vouiii!! ^^ je veux voir!
    Skyleen
    Skyleen
    FémininAge : 29Messages : 476

    Sam 17 Sep 2011 - 19:09

    Ce tuto m'interesse beaucoup :) Merci du partage Very Happy
    titchou78
    titchou78
    MasculinAge : 25Messages : 2

    Ven 30 Sep 2011 - 14:00

    Merci. Wink
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Juin 2022 - 16:14