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,

    À 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



    avatar
    supersam2
    MasculinAge : 22Messages : 8

    le Jeu 22 Oct 2009 - 17:57

    merci ^^ Question: ca marche pour xooit en phpbb2?
    avatar
    Shigeru
    MasculinAge : 22Messages : 1497

    le Sam 24 Oct 2009 - 18:40

    Merci Captain' =D



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 24 Oct 2009 - 20:27

    Aucune idée pour Xooit... désolé ^^"



    avatar
    supersam2
    MasculinAge : 22Messages : 8

    le Sam 24 Oct 2009 - 21:04

    ca à l'air d'aller mais il semblerait que les skins forumactif soient incompatibles xooit
    avatar
    Miyashi
    MasculinAge : 31Messages : 750

    le Dim 25 Oct 2009 - 16:19

    Super, merci



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 25 Oct 2009 - 21:58

    Concrètement ça devrait fonctionner, c'est à toi d'adapter ton CSS ensuite^^



    avatar
    Absolut-13
    MasculinAge : 23Messages : 1202

    le Lun 26 Oct 2009 - 8:53

    Ok ! Merci =) .






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

    avatar
    Raik'n
    MasculinAge : 21Messages : 765

    le Dim 1 Nov 2009 - 14:37

    Merci pour le tuto =)




    « Tout ce qui ne nous tue pas nous rend simplement plus .. bizarre. »
    avatar
    akuma uchiwa
    MasculinAge : 24Messages : 274

    le Dim 1 Nov 2009 - 14:44

    merci superbe astuce




    kit by my
    avatar
    NiceCorporation
    MasculinAge : 23Messages : 207

    le Dim 1 Nov 2009 - 15:06

    Merci pour l'astuce, elle me servira surement x]



    avatar
    hosted
    Age : 26Messages : 1

    le Mar 3 Nov 2009 - 21:02

    Oh Yeah merci c'est ce qu'il me fallait Very Happy
    avatar
    Skull-piou
    MasculinAge : 24Messages : 82

    le Mar 3 Nov 2009 - 21:30

    Oh mon dieu que ce forum est génial.
    Un gros merci à vous Very Happy



    avatar
    Geeko'
    MasculinAge : 22Messages : 16

    le Lun 14 Déc 2009 - 21:18

    Merci pour l'astuce, je vais m'appliquer à la tâche Wink
    8 pages de remerciements, sa commence à faire...



    Spoiler:












    avatar
    Yujoba
    MasculinAge : 22Messages : 1576

    le Jeu 17 Déc 2009 - 18:55

    merci pour l'astuce !





    Sign by Yosumi
    Lay'Ks
    FémininAge : 23Messages : 43

    le Lun 21 Déc 2009 - 16:54

    Aaah génial,je me demandais comment on faisait ^^



    . . . N o t h e r e a n y m o r e . . .
    avatar
    Drickeem
    MasculinAge : 23Messages : 46

    le Mar 22 Déc 2009 - 12:44

    C'est vraiment sympas de ta part =)

    TY !



    avatar
    Duff
    MasculinAge : 20Messages : 8

    le Ven 25 Déc 2009 - 22:59

    Merci pour le tutorial.
    avatar
    beya
    MasculinAge : 21Messages : 38

    le Ven 25 Déc 2009 - 23:00

    Merci pour le tuto!! Wink
    avatar
    Cami-Ali
    FémininAge : 25Messages : 7

    le Sam 26 Déc 2009 - 18:05

    Merci beaucoup ! ^^
    avatar
    Oas~
    MasculinAge : 25Messages : 23

    le Mar 29 Déc 2009 - 23:15

      Hoy hoy !

      Deuxième fois que j'utilise ce code, et deuxième fois que je galère. J'ai réussis cependant la dernière fois à le faire marcher ce fichu sélecteur, mais j'ai complètement zappé comment j'y étais arrivé. En réutilisant les mêmes codes, et les mêmes feuilles css - où le sélecteur fonctionne - , ça ne marche pas.

      Tout est bon, sauf que la page de s'actualise pas et que le skin ne change donc pas. Lorsqu'on choisis un skin, rien ne se passe y_y


      Help t_t


      Voici le lien du forum en question: World of Thalionn. Si tu le souhaites Sparow, je peux t'envoyer le code - où le template via MP, car je ne sais plus comment masquer les codes pour ceux qui n'ont pas poster dans le sujet x/

      Bref, merci d'avance !

      Edit: les couleurs et les images (pour la plupart) sont bien retirer du PA, donc je doute que le problème vienne de là..
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 29 Déc 2009 - 23:30

    J'avais eu un souci avec le code pour certains noms de skin, vérifies en premier lieux les noms donnés, qu'il n'y ai aucun caractère spéciaux, surtout pas d'apostrophe non plus !
    Sinon, il peut s'agir du contenu du "head" dans les templates. Si tu as celles où ça fonctionnait, essaie de faire une copie complète du code du haut des tamplates (entre les balises head) pour voir.
    Il faut que je prenne un moment pour chercher d'où ça vient, il y a peut-être eu un changement léger dans les scripts ou autres des nouveaux forums qui fait que ça a du mal à fonctionner avec certaines pages.



    avatar
    Oas~
    MasculinAge : 25Messages : 23

    le Mar 29 Déc 2009 - 23:36


      Aucun changement au niveau du head, le template est presque identique en réalité que l'ancien, car je me souvent sur celui-ci pour débuter un design. Ensuite les noms que j'ai donnés sont sans majuscules ou caractères spéciaux, tel que les accents et apostrophes.
      Je désespère y_y
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 29 Déc 2009 - 23:49

    Le changement dans le haut des templates n'a pas besoin d'être important, le tout c'est que je ne l'ai pas localisé et que c'est peut-être un petit détails qui fait tout capoter en fait...

    Peux-tu me mettre entre les balises "hide" le haut des templates de ta page stp ? Tout ce qui est avant le "body". Je vais essayer de comparer avec celles de N-U.



    avatar
    Oas~
    MasculinAge : 25Messages : 23

    le Mar 29 Déc 2009 - 23:52

    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 30 Déc 2009 - 0:06

    Alors, déjà je n'ai pas ça :



    Juste après la balise "head".

    (On va procéder par étapes Razz) Essaies de l'enlever pour voir si ça fonctionne.



    Contenu sponsorisé


      La date/heure actuelle est Ven 28 Avr 2017 - 16:11