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
    Okhmhaka
    FémininAge : 31Messages : 31714

    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.

    Seuls ceux qui posteront à la suite de ce message pourront voir le code.





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



    Toutankhamon
    MasculinAge : 27Messages : 76

    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.
    Okhmhaka
    FémininAge : 31Messages : 31714

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



    Toutankhamon
    MasculinAge : 27Messages : 76

    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 ?
    Okhmhaka
    FémininAge : 31Messages : 31714

    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.



    Toutankhamon
    MasculinAge : 27Messages : 76

    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.
    Okhmhaka
    FémininAge : 31Messages : 31714

    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



    Toutankhamon
    MasculinAge : 27Messages : 76

    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://...);
    }

    ?
    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. :)
    Toutankhamon
    MasculinAge : 27Messages : 76

    le Jeu 10 Sep 2009 - 21:23

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

    le Jeu 10 Sep 2009 - 21:36

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




    Kit by Yosuke
    Okhmhaka
    FémininAge : 31Messages : 31714

    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 ?



    Fura
    FémininAge : 29Messages : 5879

    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
    Toutankhamon
    MasculinAge : 27Messages : 76

    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).
    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
    Okhmhaka
    FémininAge : 31Messages : 31714

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



    kute aka stormwalker
    MasculinAge : 23Messages : 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 )
    Okhmhaka
    FémininAge : 31Messages : 31714

    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



    Riku Asakura
    MasculinAge : 29Messages : 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
    Toutankhamon
    MasculinAge : 27Messages : 76

    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.
    kute aka stormwalker
    MasculinAge : 23Messages : 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 :)
    Okhmhaka
    FémininAge : 31Messages : 31714

    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



    Toutankhamon
    MasculinAge : 27Messages : 76

    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.
    Okhmhaka
    FémininAge : 31Messages : 31714

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



    Toutankhamon
    MasculinAge : 27Messages : 76

    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.
    Okhmhaka
    FémininAge : 31Messages : 31714

    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é

    Aujourd'hui à 22:42


      La date/heure actuelle est Mar 6 Déc 2016 - 22:42