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
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 18:06

    J'ai toujours le même problème. A mon avis je fais une mauvaise manip au niveau du code ou bien du css.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 19:00

    C'est certainement ton css alors, qu'as-tu mis ? (globalment je veux dire) Un changement de couleur seulement ? D'image ?

    Essayes au pire avec trois feuilles css différentes mais toutes simples du genre :

    Code:
    body
    {
    background-image: url(adresse d'un image de fond);
    background-position: top center;
    background-repeat: no-repeat;
    }

    Avec une image différente en fond, par exemple 3 de tes wallpapers. Autre chose (que je préciserai dans mon premier message), il te faut héberger ta feuille CSS ! ^^ Utilises Le meilleur hébergeur du moooonde XD (celui crée par Riku). Il te suffit de mettre l'adresse qu'il te donne dans l'emplacement indiqué.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 19:04

    En faite, j'ai fait deux designs différents et j'ai enregistré mon css de base. Ensuite je l'ai publié sur le site là et puis après, j'ai mis les liens css mais je n'ai toujours rien qui s'affiche.

    Ai-je bien fait ?

    J'aimerai également savoir si on sait convertir son thème exporté en css ?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 19:16

    Il n'est pas possible de convertir un thème en CSS pour la simple et bonne raison que l'on ne peut pas tout mettre en CSS ... (Il faudra que je fasse un sujet explicatif là dessus XD).

    Ce que tu dois faire dans un premier temps c'est "vider" le forum au maximum (virer les images => laisser vide donc, les couleurs => idem... etc... de façon à ce qu'il soit "nu").
    Après cela, normalement, tu dois mettre un CSS dans ta feuille de CSS du PA, qui sera en fait ton "thème par défaut" (ici Sober Night). Tu mets ensuite tout tes CSS dans ton code javascript.



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 20:04

    Ok je vois à peu près ce que tu veux dire donc je vais essayer comme ça mais si je décide d'installer un widget sur la gauche, est-ce que l'image de fond du widget sera prise en compte dans le css ?

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

    le Jeu 10 Sep 2009 - 20:13

    Tout dépend comment tu places l'image de fond... ^^ Après, faut chercher, je vais pas tout dire non plus Wink



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 20:36

    Je la place tout simplement dans l'arrière plan d'une table avec des images cliquables. Mais sait-on le modifier via le css ?

    Je ne sais pas mais je prends un exemple de css avec widget, peux-être ai-je raison ou tort mais tu me diras si je dois continuer sur cette voie là.

    Code:
    .widget
    {
    background-image: url(http://...);
    }

    ?
    avatar
    sNipe_sCk
    MasculinAge : 24Messages : 21

    le Jeu 10 Sep 2009 - 21:21

    Bonjour,

    j'ai bien installer le code dans le templates, j'ai bien des pages CSS hebergé comme il faut. Mais quand je clique pour selectionner un autre skin, la page se change mais sa ne met pas la nouvelle page CSS.

    Comme vous pouvez voire sur mon forum.

    Merci de votre aide. :)
    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 21:23

    En faite voilà, j'ai le même problème que toi sNipe_sCk.
    avatar
    Yosuke
    MasculinAge : 23Messages : 2664

    le Jeu 10 Sep 2009 - 21:36

    Super ! Sa va peut etre me servir ... un jour xD




    Kit by Yosuke
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 21:43

    Ca marche ici avec ce code donc pas de raison que ça ne fonctionne pas chez vous...

    Toutankhamon : oui t'es sur la bonne voie, reste à appliquer la "class" correctement.

    Je peux avoir un aperçu de ce que vous avez mis en css ?



    avatar
    Fura
    FémininAge : 29Messages : 5881

    le Jeu 10 Sep 2009 - 21:47

    Piuh trop barbare pour moi encore mais... c'est qu'ça donne envie et ça améliorait pas mal Ekoï :o
    Un thème par race, wow le taff mais wow le final aussi O.O
    uhm uhm va falloir que je soudoie Inikaam pour qu'il m'aide XD!

    miciiii
    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Jeu 10 Sep 2009 - 22:03

    Bon alors, j'ai réussi une partie pour le css donc ça a fonctionné correctement mais ce qu'il me reste à afficher, c'est les widgets et la bannière qui devraient se situer dans la feuille de style.

    Mais au niveau des codes à mettre, j'avoue que je suis perdu pour les widgets et la bannière (logo forum).
    avatar
    sNipe_sCk
    MasculinAge : 24Messages : 21

    le Jeu 10 Sep 2009 - 22:13

    J'ai mis la même feuille de CSS pour faire les test ^^ Il y a normalement just un changement de background
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 10 Sep 2009 - 22:25

    Snipe : j'ai mis le code en masqué... donc l'affiche pas stp ^^

    Bah sinon, je ne vois pas ce qui cloche, t'as bien enlevé toutes les images de ton PA ? (couleur, etc ...) ?

    Faut tester, essayer, bidouiller... Razz

    Fura : yep ! c'est ce que j'avais pensé pour Mystical Stones à un moment^^



    avatar
    kute aka stormwalker
    MasculinAge : 24Messages : 52

    le Jeu 10 Sep 2009 - 23:56

    merci Je cherchai justement sa ^^

    J'ai du mal au niveau des CSS par contre..

    1- quesce que je doit mettre exactement dans le CSS
    2- apres l'avoir hébergé je le place ou?

    _____

    3 vu que je suis un peu faigneant comme plein de monde ya pas moyen d'avoir tes theme?? lol ( je pense que non donc je me contenterai des 2 premiere question :p )
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep 2009 - 0:47

    Ce que tu dois mettre dans le CSS ? Et bien les configurations de couleur, images et autres... Vu la question je te conseille d'apprendre les bases du codage html/css avant de te lancer là-dedans ^^ Il y a un cours sur le site, fait par Riku Asakura, qui est clair et agréable à lire.

    J'ai indiqué où il faut le placer dans le code, lis bien ^^

    Je ne prendrais même pas la peine de répondre à la dernière question...

    PS : Il serait bien que les personnes qui sont venus ici juste pour avoir ce code là aillent quand même poster un petit message de présentation si ce n'est pas fait... Un minimum de politesse est appréciable. Wink



    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Ven 11 Sep 2009 - 10:19

    Il y a une méthode pour changer l'image de fond d'un widget, mais tout dépend de ta méthode initiale.
    Il s'agit d'images cliquables ? ou de liens posés sur une image de fond ?


    Merci Jacky pour l'astuce, je dois t'avouer que j'avais déjà piqué ça dans tes codes sources XD (*pas tapé*) Mais pour le moment je n'en vois pas l'utilité puisque je n'ai pas de projet utilisant le système (à part HIF qui utilise le système via PHP/SQL).

    Encore merci d'innover sans arrêt pour Never Utopia !

    PS : tu ferais pas un peu de pub pour HIF par hasard ? XD




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep 2009 - 11:13

    @Riku Asakura a écrit:Il y a une méthode pour changer l'image de fond d'un widget, mais tout dépend de ta méthode initiale.
    Il s'agit d'images cliquables ? ou de liens posés sur une image de fond ?


    Merci Jacky pour l'astuce, je dois t'avouer que j'avais déjà piqué ça dans tes codes sources XD (*pas tapé*) Mais pour le moment je n'en vois pas l'utilité puisque je n'ai pas de projet utilisant le système (à part HIF qui utilise le système via PHP/SQL).

    Encore merci d'innover sans arrêt pour Never Utopia !

    PS : tu ferais pas un peu de pub pour HIF par hasard ? XD

    Alors pour ma méthode initiale au niveau du widget, j'ai procédé comme ceci :

    Code:
    .module
              {
              background-image: url("http://...");
              }

    En faites oui, ce sont des images réactives d'où ma barre de navigation et en image de fond de cette table.

    Tout ceci est placé dans un widget mais par contre si je veux changer de design via le sélecteur, cela pose problème vu que c'est le fond du widget initial (donc du premier design) qui reste toujours afficher. Pour cela, j'aimerai passer par le css pour accorder une image de fond de widget à chaque feuilles de style. Voyez-vous où je veux en venir ?

    Alors au niveau de l'affichage de logo du forum, j'avais pensé à ceci :

    Code:
    #logo
          {
            background-image: url("http://...");
          }

    Donc pour celui-ci ici, j'ai le même problème que le code précédent, c'est-à-dire que rien ne s'affiche non plus. Peut-être ai-je fait une erreur dans les codes ?
    Si quelqu'un pouvait m'éclairer à ce sujet, ça serait sympa.

    Merci d'avance.
    avatar
    kute aka stormwalker
    MasculinAge : 24Messages : 52

    le Ven 11 Sep 2009 - 11:29

    la dernier c'etait une petite blague ^^
    les disgn ne corresponde meme pas avec mon forum lol

    fin bref je vais allé me présenté et tout et resté sur le forum par la même occasion :)
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep 2009 - 12:06

    Riku : oui je me doute que t'avais déjà "visité" les codes sources XD T'es loin d'être le seul d'ailleurs...

    (De la pub ?? quelle pub... ? Very Happy)


    Toutankhamon : je t'aurais conseillé une division moi plutôt qu'une class, mais tout dépend sur quoi tu l'appliques, et si tu veux faire tes wigets identiques ou non... Tu as placé la class sur quoi ? Une table ?

    Kute : heureusement XD Merci pour ta prés' Wink



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep 2009 - 13:22

    Bon alors pour mon logo, je viens de réussir le code car je me suis
    aidé du code source de la page de mon forum. J'ai pu constaté qu'il
    fallait que je prenne ce type d'exemple car ceci me permettra
    d'afficher plusieurs bannières différentes :

    Code:
    #i_logo {
              Background: url("http://...");
              width: ...px;
              height: ...px;
              }

    Ce qu'il me reste à trouver maintenant, c'est le code pour le widget.
    Mais si je mets une division, quel en serait le code ?

    Edit: Je viens de trouver pour le widget. Donc j'en fais part à ceux ou celles à qui cela pourrait intéresser.

    Code:
    #left {
            background: url("http://...");
            background-repeat: repeat;
            }

    Encore une fois je me suis aidé du code source de la page de mon forum.

    Maintenant, tout fonctionne mise à part les cookies qui ne suivent pas. Ceux-ci restent toujours sur la page d'accueil.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep 2009 - 14:34

    Merci pour le code de wigets, c'est gentil de ta part Wink

    Il faut s'aider des codes sources, c'est comme ça qu'on trouve les identifiants des divisions ou des class à modifier.

    Pour ce qui est des cookies, si tu bosses longtemps sur un forum il faut parfois rafraichir la page, sinon ça sature xD Donc Ctrl+F5 aide bien^^



    avatar
    Toutankhamon
    MasculinAge : 28Messages : 77

    le Ven 11 Sep 2009 - 15:05

    Non ça ne fonctionne toujours pas même avec le Ctrl+F5.

    Regardes par toi-même : mon forum

    Quand je sélectionne un autre design, ça fonctionne mais à partir du moment que je change de page, il revient automatiquement au premier design.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 11 Sep 2009 - 15:27

    Ca c'est parce que tu as mis ton sélecteur sur la page d'accueil du forum, du coup c'est seulement la page d'accueil qui tient compte du changement, et non les autres, puisqu'il n'est plus présent^^



    Contenu sponsorisé


      La date/heure actuelle est Mar 30 Mai 2017 - 5:41