AccueilDernières imagesRechercherS'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.

-15%
Le deal à ne pas rater :
(Adhérents Fnac) LEGO® Star Wars™ 75367 Le croiseur d’assaut de ...
552.49 € 649.99 €
Voir le deal

    Faire un sélecteur de thème

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 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
    Ceilena
    Ceilena
    FémininAge : 32Messages : 6

    Mar 22 Sep 2009 - 15:09

    Merci beaucoup du partage.. ce que je cherchais justement <3
    Beaucoup mieux que ma bannière aléatoire qui crée des bugs ^^'
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 22 Sep 2009 - 16:10

    Avec plaisir^^



    sign
    Bang
    Bang
    MasculinAge : 28Messages : 2434

    Mar 22 Sep 2009 - 21:49

    Thank Capt'aine ^^






    OHANA
    Imari
    Imari
    FémininAge : 40Messages : 68

    Mer 23 Sep 2009 - 17:17

    Merci beaucoup =)
    Je vais tester de suite ^^
    Imari
    Imari
    FémininAge : 40Messages : 68

    Jeu 24 Sep 2009 - 14: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
    Katakana
    Katakana
    MasculinAge : 28Messages : 1139

    Jeu 24 Sep 2009 - 21:37

    Rien à dire o.o



    Faire un sélecteur de thème - Page 4 Fernan10
    || ... Fernando Torr3sEl Niño || Fifa 10 Addict |
    Graph' is Drug | Merci pour tout ... Capt'ain |
    Imari
    Imari
    FémininAge : 40Messages : 68

    Ven 25 Sep 2009 - 18:34

    Personne pour m'aider ? Faire un sélecteur de thème - Page 4 Icon_sad
    quierra
    quierra
    FémininAge : 43Messages : 69

    Sam 26 Sep 2009 - 12: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é.



    Faire un sélecteur de thème - Page 4 Never
    Sylveer
    Sylveer
    MasculinAge : 30Messages : 102

    Dim 27 Sep 2009 - 1:41

    Bonjour,

    Merci pour le partage.
    alexis93
    alexis93
    MasculinAge : 30Messages : 5

    Dim 27 Sep 2009 - 15:00

    Merci.
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 27 Sep 2009 - 17: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 ^^"



    sign
    Nashak
    Nashak
    MasculinAge : 29Messages : 45

    Dim 4 Oct 2009 - 16:03

    Merci =)



    Faire un sélecteur de thème - Page 4 486666Signa_Kit

    .: By Me :.
    Mélodrame
    Mélodrame
    FémininAge : 31Messages : 456

    Dim 4 Oct 2009 - 21:22

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



    Faire un sélecteur de thème - Page 4 Inmyworld
    ★ Tu porte du Drame ? (J'porte du BâNg' ) J'suis chanceuse x) ☆
    Spoiler:
    Enko
    Enko
    Age : 34Messages : 56

    Jeu 8 Oct 2009 - 17:41

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

    Ven 9 Oct 2009 - 23:06

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

    Sam 10 Oct 2009 - 16:42

    Encore un tuto, et bien merci :)



    Faire un sélecteur de thème - Page 4 Catcheurcopie
    *Kit By Me*
    bmbslave4u
    bmbslave4u
    MasculinAge : 44Messages : 9

    Sam 10 Oct 2009 - 19:26

    sorry, I'm don't speak french... but I really wanna know how to switch my skin..
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 10 Oct 2009 - 19: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".



    sign
    bmbslave4u
    bmbslave4u
    MasculinAge : 44Messages : 9

    Sam 10 Oct 2009 - 20: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 Faire un sélecteur de thème - Page 4 Icon_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".

    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.
    Faire un sélecteur de thème - Page 4 39065483
    2.
    Faire un sélecteur de thème - Page 4 32611455.th
    3.
    Faire un sélecteur de thème - Page 4 87369437.th
    4.
    Faire un sélecteur de thème - Page 4 80172343.th
    Crying or Very sad
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 10 Oct 2009 - 23: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.



    sign
    Melik
    Melik
    MasculinAge : 31Messages : 74

    Mar 13 Oct 2009 - 21:45

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

    Mar 20 Oct 2009 - 13:24

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

    Mar 20 Oct 2009 - 13:54

    merci je vais tester Faire un sélecteur de thème - Page 4 Lol
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 20 Oct 2009 - 14:20

    You're welcome Wink



    sign
    Absolut-13
    Absolut-13
    MasculinAge : 30Messages : 1203

    Jeu 22 Oct 2009 - 13:10

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




    Faire un sélecteur de thème - Page 4 Dance-10

    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 Ven 29 Mar 2024 - 8:27