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 2009 - 11:48

    Rappel du premier message :

    Salut salut,

    A force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le sélecteur de Skin, en vous expliquant en deux mots comment l'utiliser.

    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Code:
    <div style="text-align: center;"><font style="color: #747474;" size="1">Choisis ton ambiance :</font><br><br></div><center>                               
            <script type="text/javascript">
                /* <![CDATA[ */
                    var scheme = getCookie('template1');
                    if (scheme == 'Fresh Fruits')
                    {
                        document.write('<link rel="stylesheet" type="text/css" href="http://host.image.files.free.fr/host/4aa05ca567a5dcsstheme16b.css">');
                    }
                    else if (scheme == 'Sober Night')
                    {
                        document.write('<link rel="stylesheet" type="text/css" href="http://host.image.files.free.fr/host/4a81e47691c42csstheme17.css">');
                    }
                    else if (scheme == 'Poker Face')
                    {
                        document.write('<link rel="stylesheet" type="text/css" href="http://host.image.files.free.fr/host/4a81e3770e4b7csstheme18.css">');
                    }
                    //No need to modify anything below this line
                    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>
       
            <div id="skinselector">
                <form>
                    <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                        <option> >.Skins disponibles </option>
                        <option value="Fresh Fruits"> Fresh Fruits </option>

                        <option value="Sober Night"> Sober Night </option>
                        <option value="Poker Face"> Poker Face </option>
                    </select>
                </form>
            </div>


    Ce code est à mettre l'endroit où vous voulez appliquer le sélecteur.

    Attention ! Selon l'endroit où vous le placez, ce sélecteur ne sera pas effectif partout ! Si vous voulez que lorsque le membre change de page en entrant sur le forum par exemple le skin qu'il a choisi reste le même, il faut mettre le code dans les templates en haut de page.

    Templates : "Overall_header New"

    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. Estimez-vous heureux, vous n'avez pas à passer en revenue tout le CSS de base du forum pour y trouver les identifiants car beaucoup vous seront donnés dans cette section de Trucs et Astuces. Ca vous économise un bon nombre d'heure de travail.

    Il faudra donc que vous alliez fouiller dans les topics de cette section pour trouver tout les moyens d'utiliser le CSS dans vos fora.


    Précision : une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple H.I.F..


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:05, édité 5 fois



    avatar
    Ceilena
    FémininAge : 25Messages : 6

    le 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 ^^'
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 22 Sep 2009 - 16:10

    Avec plaisir^^



    avatar
    Bang
    MasculinAge : 21Messages : 2434

    le Mar 22 Sep 2009 - 21:49

    Thank Capt'aine ^^






    OHANA
    avatar
    Imari
    FémininAge : 33Messages : 67

    le Mer 23 Sep 2009 - 17:17

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

    le 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
    avatar
    Katakana
    MasculinAge : 21Messages : 1139

    le Jeu 24 Sep 2009 - 21:37

    Rien à dire o.o




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

    le Ven 25 Sep 2009 - 18:34

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

    le 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é.



    avatar
    Sylveer
    MasculinAge : 23Messages : 102

    le Dim 27 Sep 2009 - 1:41

    Bonjour,

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

    le Dim 27 Sep 2009 - 15:00

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

    le 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 ^^"



    avatar
    Nashak
    MasculinAge : 22Messages : 45

    le Dim 4 Oct 2009 - 16:03

    Merci =)





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

    le 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




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

    le 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)
    avatar
    supermancg
    MasculinAge : 66Messages : 8

    le Ven 9 Oct 2009 - 23:06

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

    le Sam 10 Oct 2009 - 16:42

    Encore un tuto, et bien merci :)




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

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



    avatar
    bmbslave4u
    MasculinAge : 37Messages : 9

    le 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 ).
    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 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.



    avatar
    Melik
    MasculinAge : 24Messages : 74

    le Mar 13 Oct 2009 - 21:45

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

    le Mar 20 Oct 2009 - 13:24

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

    le Mar 20 Oct 2009 - 13:54

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

    le Mar 20 Oct 2009 - 14:20

    You're welcome Wink



    avatar
    Absolut-13
    MasculinAge : 23Messages : 1202

    le Jeu 22 Oct 2009 - 13: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 Mar 28 Mar 2017 - 15:48