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



    avatar
    Ceilena
    FémininAge : 26Messages : 6

    le Mar 22 Sep - 13:09

    Merci beaucoup du partage.. ce que je cherchais justement <3
    Beaucoup mieux que ma bannière aléatoire qui crée des bugs ^^'
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 22 Sep - 14:10

    Avec plaisir^^



    avatar
    Bang
    MasculinAge : 21Messages : 2434

    le Mar 22 Sep - 19:49

    Thank Capt'aine ^^






    OHANA
    avatar
    Imari
    FémininAge : 34Messages : 67

    le Mer 23 Sep - 15:17

    Merci beaucoup =)
    Je vais tester de suite ^^
    avatar
    Imari
    FémininAge : 34Messages : 67

    le Jeu 24 Sep - 12:57

    Bon, à mon tour de faire le boulet de service ^^"

    J'ai bien mis le selecteur dans le template, et il est désormais bien visible. Il se déroule correctement mais le soucis, c'est que quand je change de thème, ça ne marche pas...

    En fait, j'ai repris l'idée de notre bon capitaine en ne mettant que des fonds de forum pour voir où ça clochait, bah les fonds ne s'affichent pas (j'ai bien sûr enlevé le fond actuel de mon forum pour le test). J'ai bien hébergé mes fichiers css sur HIP avant de les coller dans mon template.

    Quelqu'un peut me dire où ça cloche ? Oo

    http://entree-des-mondes.forumperso.com/forum.htm
    Voici mon forum qui est actuellement en construction et loin d'être terminé Razz
    avatar
    Katakana
    MasculinAge : 22Messages : 1139

    le Jeu 24 Sep - 19:37

    Rien à dire o.o




    || ... Fernando Torr3sEl Niño || Fifa 10 Addict |
    Graph' is Drug | Merci pour tout ... Capt'ain |
    avatar
    Imari
    FémininAge : 34Messages : 67

    le Ven 25 Sep - 16:34

    Personne pour m'aider ?
    avatar
    quierra
    FémininAge : 36Messages : 69

    le Sam 26 Sep - 10:20

    Coucou, donc je reponds par curiosité et surtout pour comparer avec le sélecteur de thèmes que L'Abbé Stiole à posté sur mon forum... qui en plus semble ne pas très bien fonctionner... j'y trouverai peut être la réponse.

    Merci pour ce partage d'une très grande utilité.



    avatar
    Sylveer
    MasculinAge : 24Messages : 102

    le Sam 26 Sep - 23:41

    Bonjour,

    Merci pour le partage.
    avatar
    alexis93
    MasculinAge : 23Messages : 5

    le Dim 27 Sep - 13:00

    Merci.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 27 Sep - 15:06

    Imari : il doit y avoir une erreur dans ton code, veille bien à ce que ton copier coller soit correct et que lorsque tu as ajouté ou enlevé des lignes tu n'aies rien enlevé d'essentiel ^^"



    avatar
    Nashak
    MasculinAge : 22Messages : 45

    le Dim 4 Oct - 14:03

    Merci =)





    .: By Me :.
    avatar
    Mélodrame
    FémininAge : 25Messages : 456

    le Dim 4 Oct - 19:22

    Justement ce que je cherchais pour rajouter dans mon forum !!
    Vraiment merci Cap'tain pour tout ses beau tutoriels. ;D




    ★ Tu porte du Drame ? (J'porte du BâNg' ) J'suis chanceuse x) ☆
    Spoiler:
    avatar
    Enko
    Age : 28Messages : 55

    le Jeu 8 Oct - 15:41

    Depuis le temps que je cherchais ça <3 Merci beaucoup =) (Et j'annonce aussi mon retour mais OSEF XD)
    avatar
    supermancg
    MasculinAge : 66Messages : 8

    le Ven 9 Oct - 21:06

    J'ai hate de voir sa Wink
    avatar
    Tobi
    MasculinAge : 25Messages : 276

    le Sam 10 Oct - 14:42

    Encore un tuto, et bien merci :)




    *Kit By Me*
    avatar
    bmbslave4u
    MasculinAge : 37Messages : 9

    le Sam 10 Oct - 17:26

    sorry, I'm don't speak french... but I really wanna know how to switch my skin..
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 10 Oct - 17:38

    Euh.... ok, I try to explain (I understand well English but I don't whrite or speak well, sorry).

    In the first message, I give a code (it is javascript language). You must put that code in the template "overall header new" in your forum (phpbb2 version it's better Wink ).
    Then, you must make a different CSS for all the skin you want. You must know this language... and do all the thème with CSS language.
    You must pu the adress of your Style Sheet in the firt code, instead of "adresse de la feuille CSS 1".



    avatar
    bmbslave4u
    MasculinAge : 37Messages : 9

    le Sam 10 Oct - 18:27

    Sparrow-style a écrit:Euh.... ok, I try to explain (I understand well English but I don't whrite or speak well, sorry).

    In the first message, I give a code (it is javascript language). You must put that code in the template "overall header new" in your forum (phpbb2 version it's better ).
    Then, you must make a different CSS for all the skin you want. You must know this language... and do all the thème with CSS language.
    You must pu the adress of your Style Sheet in the firt code, instead of "adresse de la feuille CSS 1".

    thanks, but when I add my CSS code, it says:

    Detected error
    We have counted a different number of "{" and of "}".
    It means your CSS risks to be not valid and will not be posted
    correctly on your forum.

    (I already Put my CSS adress in your Code)

    1.

    2.

    3.

    4.

    Crying or Very sad
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 10 Oct - 21:06

    I try to change the code, but it works I think (it is the one I use on this forum).
    Look if you have copy the right code.



    avatar
    Melik
    MasculinAge : 24Messages : 74

    le Mar 13 Oct - 19:45

    merci beaucoup, super simpa le tuto ^^
    avatar
    bmbslave4u
    MasculinAge : 37Messages : 9

    le Mar 20 Oct - 11:24

    hey!!!it works!!!!!thank you so much!!!!!!!
    avatar
    Sasuke67420
    MasculinAge : 32Messages : 51

    le Mar 20 Oct - 11:54

    merci je vais tester
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 20 Oct - 12:20

    You're welcome Wink



    avatar
    Absolut-13
    MasculinAge : 23Messages : 1202

    le Jeu 22 Oct - 11:10

    Ha merci ! Mais j'ai une question ça marche pour les site internet ? :O .






    Tout désert à ses mystères...

    La fleur des fleurs est le bourgeon de la fleur du cerisier, je ne suis qu'un homme parmi tant d'autres...

    Contenu sponsorisé


      La date/heure actuelle est Dim 20 Aoû - 9:55