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



    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



    fascicularia
    MasculinAge : 49Messages : 181

    le Mer 9 Sep 2009 - 12:54

    Merci Sparrow, je venais justement de de poster un topic à ce sujet
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 12:56

    Oui, tu n'es pas le seul d'ailleurs XD C'est pour ça que je préfère directement poster l'astuce ^^



    fascicularia
    MasculinAge : 49Messages : 181

    le Mer 9 Sep 2009 - 13:30

    euh, désolé mais je risque de faire mon boulet.
    J'ai édité le template Overall_header New avec le script modifié. Tout ce passe bien au moment de la prévisualisation mais au moment de l'édition , plus aucune trace du sélecteur ; aussi bien sous IE que sous Firefox.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 14:11

    Si j'ai masqué le code c'est pas pour qu'on l'affiche dans un autre message ^^"

    As-tu pensé à Activer ta modification ?



    fascicularia
    MasculinAge : 49Messages : 181

    le Mer 9 Sep 2009 - 14:14

    Milles excuses Sparrow. J'ai bien activé la modification.



    Dernière édition par fascicularia le Mer 9 Sep 2009 - 14:19, édité 1 fois
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 14:15

    L'as-tu placé au bon endroit ? Au pire essaie de le déplacer avant la fin de la "table".



    avatar
    Kaveta
    MasculinAge : 25Messages : 247

    le Mer 9 Sep 2009 - 14:44

    Merci beaucoup mais je suppose que c'est que pour phpbb2 encore ?



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 14:46

    Bien sûr, ou alors punbb.. l'essentiel est que le forum (la version) autorise la modification des Templates. Après, la version en elle-même n'importe peu, du moment qu'il est possible de les modifier. A ma connaissance il n'y a que phpbb2 et punbb qui le permettent.



    avatar
    Kaveta
    MasculinAge : 25Messages : 247

    le Mer 9 Sep 2009 - 14:47

    Ah ok, je regrette vraiment d'avoir fait un design en PHPBB3 sur mon forum --' A chaque fois que tu sors un nouveau truc je l'ai dans le c*l :'(

    Enfin bon merci quand même en tout cas Wink



    avatar
    Etana
    Age : 29Messages : 17

    le Mer 9 Sep 2009 - 15:07

    Merci pour cette astuce :§erre:



    Oui il n'y a bien que punbb et phpbb2 qui le permettent ham1
    fascicularia
    MasculinAge : 49Messages : 181

    le Mer 9 Sep 2009 - 15:09

    Bon, je viens de remettre en forme le script. Le dysfonctionnement venait d'un mauvais placement du script.

    Je vais encore jouer les boulets, , le selecteur affiche les noms des skins mais n'applique pas les skins demandés. J'ai créé une page html pour les référencer mais cela ne change malheureusement rien. Vue mes compétences, je suis certain d'avoir fait une boulette quelque part.
    Voici la page HTML
    Code:
    document.getElementById('padang').innerHTML='<select id="selector" onChange="load_new_css(this.value)"><option value="/76-ltr.css"></option><option value="/100416-ltr.css">红色</option><option value="/139690-ltr.css">Лимонный Киви</option><option value="/107347-ltr.css">Féérie futuriste</option><option value="/132377-ltr.css">gothica dollz</option><option value="/135573-ltr.css">~Joyeuse¨Pâques~</option></select>'

    et voici ce que j'ai placé dans la description du site
    Code:
    <div id=padang></div><script type=text/javascript src=/css-selecteur-h6.htm></script>


    avatar
    sNipe_sCk
    MasculinAge : 24Messages : 21

    le Mer 9 Sep 2009 - 15:42

    Merci beaucoup pour ce code.

    Bonne continuation :)
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 16:53

    Fascicularia : il te faut utiliser le CSS, dans le code, il te faut placer les feuilles CSS préalablement hébergées (tu peux les héberger sur HIF (créé par un admin du forum)).

    Etana : De rien^^ Oui c'est ce qu'il me semblait...



    avatar
    L'abbé Stiole
    MasculinAge : 46Messages : 5

    le Mer 9 Sep 2009 - 17:04

    Merci beaucoup
    fascicularia
    MasculinAge : 49Messages : 181

    le Mer 9 Sep 2009 - 17:43

    Autant pour moi. Etana ayant déjà hébergé ces fichiers, je t'avouerai que je me suis simplifié la chose; comme quoi la fainéantise
    avatar
    Gold Hawk
    MasculinAge : 23Messages : 12682

    le Mer 9 Sep 2009 - 18:53

    Merci pour l'astuce ^^ (Mais çà gâche le mystère qui entourait N-U et sa grande classe T_T *sors*)

    Un très bon truc à exploiter, ne serait-ce qu'en "partie" (rien qu'un Background qui change, avec même toutes les autres images de semblables çà peut faire la différence ^^)



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 21:59

    Tout à fait^^ Un exemple tout simple avec un forum Naruto, sur lequel les membres pourraient choisir l'ambiance du village qu'ils souhaitent Razz



    avatar
    Gold Hawk
    MasculinAge : 23Messages : 12682

    le Mer 9 Sep 2009 - 22:22

    Transmissions de pensée activée, j'pensais à çà XD Ayant un thème sur Konoha sur mon forum, j'pense que je tenterais çà ^^

    Bref, encore merci de l'astuce ^^



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 9 Sep 2009 - 22:30

    Perso ça faisait très longtemps que j'y pensais. Je me souviens même de mon frère qui en voyant mon forum Naruto m'avait dit "ça serait bien que le design change en fonction du lieu où l'on va...".
    On s'y approche Razz



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 16:31

    Merci beaucoup pour le code mais je crois avoir fait une mauvaise manip car ça ne fonctionne pas. Peux-tu me réexpliquer s'il te plait Sparrow?

    Merci d'avance.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 17:02

    J'ai corrigé une erreur sur le code, j'avais zapé une ligne -_- Ca devrait marcher à présent.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 17:09

    J'ai refait comme tu l'as expliqué, mais dans le sélecteur, je n'ai rien qui bouge, pourtant j'ai bien mis les liens css.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 17:46

    C'est à dire ? Ton sélecteur d'affiche ou bien tu n'as rien ? Ca se déroule pas ?
    Autre chose, penses bien à virer les images et couleurs dans le panneau^^ sinon le navigateur n'interprète que ce qui est dans le PA.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 18:01

    Oui mon sélecteur d'affiche et bien quand je clique, rien ne se passe.
    Ah c'est peut-être ça qui cloche alors au niveau des couleurs et des images. Tout est encore mis en faite. Je vais essayer comme tu as dit et je te dis si cela fonctionne.

    Merci à toi.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 25 Mai 2017 - 22:14