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 - 5: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 - 17:05, édité 5 fois



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep - 9:53

    Ah ok et où puis-je le mettre dans ce cas ?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep - 9:59

    Là où je l'indique dans mon premier message^^, donc dans le template "haut de page", après la barre de navig', c'est là qu'il est sur N-U..



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep - 10:02

    Ah en faite, je pensais qu'on pouvait mettre ce script n'importe où.

    Mais je ne vois pas où elle est cette barre navig...
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep - 10:06

    Je l'indique en bas de mon message, il faut que tu repères l'endroit du templates où il y a :

    Code:
                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                  <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>

    Et que tu mettes le sélecteur juste après.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep - 10:16

    Oui cela fonctionne maintenant, merci à toi de m'avoir éclairé.
    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep - 10:31

    Y a-t-il un autre endroit que l'overall_header_new où on pourrait afficher le script ? Car celui-ci se place entre ma barre de navigation (donc mon widget) et le logo de mon forum.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep - 11:40

    Oui^^ du moment que ça apparait partout. A toi de trouver où le placer pour qu'il apparaisse là.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep - 15:31

    Ok merci, donc je dois que le placer dans les templates pour qu'il fonctionne correctement ?

    edit: ok c'est bon, je l'ai placé dans l'overall_footer.

    Merci pour tout.
    avatar
    Graph' One
    MasculinAge : 22Messages : 565

    le Sam 12 Sep - 6:26

    Thanks you very munch



    Ma Galerie

    Le Mythe D'une Légende : Graph' One ...
    avatar
    Lacryma
    FémininAge : 24Messages : 72

    le Sam 12 Sep - 7:33

    merci =)
    avatar
    Verde
    MasculinAge : 106Messages : 662

    le Sam 12 Sep - 8:15

    Comment je t'aime Cap'tain ^^



    Ne soit jamais bon deux fois, une fois ça suffit. Si tu es bon une fois, alors tu es bon et c'est bon. Mais si tu es bon deux fois, alors tu es bonbon et on te suce.
    __________________________


    Merci à Bang pour cette magnifique Signature
    __________________________

    Au final, tu as également joué à la Mega Drive.
    __________________________

    Hey Taka-Tin !!!!!
    avatar
    D3NZL
    Age : 23Messages : 62

    le Sam 12 Sep - 8:30

    Merci beaucoup Captain' pour l'astuce, je vais essayer peut-être pour un futur design
    avatar
    Ed
    MasculinAge : 24Messages : 1

    le Sam 12 Sep - 10:44

    Merci !
    avatar
    Shakouw
    FémininAge : 24Messages : 18

    le Sam 12 Sep - 11:10

    Merci =)



    avatar
    Oas~
    MasculinAge : 25Messages : 23

    le Sam 12 Sep - 11:58

    Merci du partage =)
    avatar
    Kurosagi
    MasculinAge : 106Messages : 1258

    le Sam 12 Sep - 12:38

    Merchiiii =)



    avatar
    Nono
    MasculinAge : 23Messages : 985

    le Sam 12 Sep - 14:32

    Mercii =D




    avatar
    Ashley Riot
    MasculinAge : 30Messages : 2

    le Mar 15 Sep - 9:58

    Exactement ce que je cherchais ^^

    Thanks Very Happy



    avatar
    Dark Angel.
    MasculinAge : 26Messages : 13

    le Mar 15 Sep - 20:10

    salut je suis pas mal débutant en css :/
    pourrais-tu m'expliquer de a à z comment mettre ce sélecteur sur ma page d'accueil facilement ?
    avatar
    catherine31
    FémininAge : 50Messages : 4

    le Mer 16 Sep - 0:54

    merci pour ce selecteur
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 16 Sep - 4:26

    Dark Angel : c'est ce que j'ai fait... Si tu ne comprends pas je peux pas simplifier d'avantage, à toi d'apprendre les bases du langage html/css, il y a de nombreux moyens sur le net.. Comment croyez-vous que j'ai fait ? Wink



    avatar
    Dark Angel.
    MasculinAge : 26Messages : 13

    le Mer 16 Sep - 7:34

    d'accord mais j'ai mis le code dans la template que tu as donné mais ça ne change rien U_U
    avatar
    Sparkman
    MasculinAge : 20Messages : 5032

    le Mer 16 Sep - 7:38

    Génial, merci beaucoup de ton aide sérieusement ! ;D



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 16 Sep - 10:02

    Dark Angel : oui normal, il te faut lier des feuilles CSS... ^^"



    avatar
    Grif
    MasculinAge : 23Messages : 37

    le Lun 21 Sep - 13:20

    J'essaie de mettre le sélecteur, merci!
    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Mai - 15:04