Astuce de la semaine: un selecteur de thème pour vos membres

[The Godfather]

Rappel du premier message :

=> Nouvelle version <=

Installer un sélecteur de thème Au préalable : - Ne vous lancez pas dans cette démarche si vous n'avez pas du temps devant vous. - Il faut scrupuleusement suivre les consignes, et prendre du temps pour tout faire correctement afin que le sélecteur fonctionne. - Ouvrez une page de bloc note pour relever certaines informations. But: Ce tutoriel vous guidera afin de mettre un sélecteur de thème sur votre forum. Cette option permet de proposer des thèmes différents à vos membres. La mise en place de cet outil se fait en trois étapes : Etape 1 - Préparer des feuilles de style Etape 2 - Créer le script Etape 3 - Insérer le sélecteur sur votre forum Etape 1 - Préparer les feuilles de style : *Méthode Niveau 1 : Méthode simple, utilisez les thèmes Hitskin. Vous n'avez pas de connaissance en css, mais vous souhaitez proposer plusieurs thèmes à vos membres : choisissez cette méthode. ~> Allez sur http://fr.hitskin.com/ ~> Choisissez un thème qui vous plaît, rendez vous sur la page de démo du thème. Attention : Vous devez obligatoirement choisir un thème qui est disponible dans la version de votre forum. Pour connaitre la version de votre forum : Reconnaitre la version d'un forum Pour l'exemple nous prendrons, des thèmes en version phpBB3 : Prévisualiser le thème Web 2.2 rose par Capucine ~> Dans la barre d'adresse le numéro du thème apparait : ~> Vous obtenez l'adresse de la page css de ce thème grâce à ce chiffre, de cette manière : Code: /131817-ltr.css ~> Ajoutez l'adresse de votre forum devant, pour obtenir l'adresse à mettre plus tard dans le sélecteur : Code: http://adresse_de_votre_forum/131817-ltr.css ~> Notez sur votre bloc-note cette adresse obtenue, ainsi que le nom, et le nom de l'auteur, pour se souvenir à quoi il correspond. ~> Reproduisez cette manœuvre pour les différents thèmes que vous souhaitez proposer. ~> Une fois cela terminé et bien noté vous pouvez passer à l'étape 2. ** Méthode Niveau 2 : Faire vos propres feuille de style : Si vous avez quelques connaissances en css, rien de plus simple. ~>Ouvrez un nouveau bloc-note, tapez y directement votre css. ~>Enregistrez votre document en .css en lui spécifiant en nom qui vous aidera à le reconnaitre facilement. (Évitez les espaces dans les noms.) ~> Renouvelez la manœuvre pour le nombre de CSS différents que vous souhaitez proposer à vos membres. A noter : Il n'est pas du tout nécessaire de refaire une feuille de CSS complète, du moment que vous ne désactivez pas le css de base de votre forum. Exemple: Vous pouvez ne faire des feuilles css qui ne modifient que quelques éléments ou qu'un seul, par exemple le fond de votre forum : J'écris dans mon bloc-note : Code: body { background-color:#000000; } ~>J'enregistre sur mon bureau mon fichier en Fond_noir.css Je veux aussi proposer un fond rouge : Nouveau document sur mon bloc note : Code: body { background-color:#ca2c2d; } ~>J'enregistre sur mon bureau le fichier en Fond_rouge.css ~>Une fois que vos feuilles de style css sont prêtes, enregistrées sur votre bureau : il faut les héberger. ~>Pour héberger un fichier css, il y a plusieurs sites sur internet : exemples : https://www.archive-host.com ou si vous avez un compte google :Google page créator ~>Héberger vos fichiers css, puis notez les adresses obtenues sur le bloc note, en précisant le nom de celles là pour que vous puissiez les repérer facilement. Etape 2 - Créez le script : 2.1 - Créez une page html : Panneau d'administration en mode Avancé Onglet "Modules" Gestion des pages html Première étape : - Donnez un nom à votre page html. - Les deux options proposées doivent être cochées : NON Deuxième étape : Insérez le code suivant dans votre page html : [ Cliquez ici pour télécharger le script à copier dans votre page ] Le code est divisé en trois parties : Partie 1 : IMPORTANT : cette partie du code ne doit pas avoir de saut de ligne à partir de la troisième ligne. Ne faites jamais "entrer" dans cette partie. Vérifiez que tout retour à la ligne est dû à un manque d'espace qui coupe la phrase et non pas à un espace en trop. La seule partie où vous pouvez insérer des espaces est celle des noms des thèmes entre Code: <option> et </option> >>> Un saut de ligne provoquera la disparition du sélecteur sur votre forum.<<< Partie 2 : Partie 3 : IMPORTANT: Ne touchez en aucun cas à la partie 3. Pour information : cette partie contient les fonctions qui permettent à votre script de gérer les cookies, c'est à dire de se souvenir de vos choix à chaque actualisation de la page. Ne modifiez pas cette partie. 2.2 - Personnaliser le script : ~> Maintenant vous allez pouvoir insérer vos thèmes dans cette feuille de style: Il faudra travailler uniquement sur la partie 1 et 2 : 1) Dans la partie 1 Vous pouvez commencer par changer le nom que vous souhaitez donner à votre sélecteur, dans mon exemple le sélecteur s'appelle : "Changer le style" c'est la phrase qui apparaît sur le sélecteur quand vous ne vous en servez pas. Vous pouvez garder cette phrase, ou mettre ce que vous souhaitez : exemple : Choisis ton ambiance / Choisis ton style / Changer de design (Évitez les accents, certains navigateurs ne les liront pas.) Ensuite il faut régler ensemble les parties 1 et 2, pas à pas. La ligne option valeur 1 dans la première partie Code: <option value="valeur1"> Kagamine - Kingyo.Akki </option> correspond à la valeur 1 de la deuxième partie : Code: if (type == 'valeur1') { document.write('<link rel="stylesheet" type="text/css" href="http://themeselect.forumactif.com/143387-ltr.css">'); } ~>Les seules parties que vous devez modifier sont celles là : Modifiez les parties soulignés en Rouge : Image 1 : Mettez le nom du thème que vous souhaitez. Attention : pas de ' Mettez des caractères simples. Le ' provoquera la disparition du sélecteur sur votre page. Image 2 : Ici vous devez insérer l'url (adresse web) qui correspond à la feuille css du thème. (Adresses que vous aviez soigneusement noté et mise de coté sur un bloc note.) ~>Renouvelez l'opération pour chacune de vos valeurs. 2.3 - Pour ajouter une possibilité, ou en enlever une ~>Le sélecteur de l'exemple contient trois thèmes, mais vous pouvez ajoutez des possibilités, en ajoutant des lignes sur le même modèle ou en enlever tout en respectant toutes les consignes données auparavant. #Pour ajouter une nouvelle variable (un thème) : Insérer dans la partie 1, entre la balise de fin de la dernière option et la balise de fin du select : Code: </option> et </select> Code: <option value="valeur4"> Nom de votre thème </option> A insérer dans la partie 2, à la fin de la partie 2 après le } juste avant le début de la partie 3: Code: else if (type == 'valeur4') { document.write('<link rel="stylesheet" type="text/css" href="adresse_de_votre_feuille_css">'); } ~>A chaque fois que vous ajoutez une nouvelle feuille, augmenter le nombre de la valeur de +1 (dans la partie 1 et la partie 2) #Pour enlever une variable (un thème) : Il suffit d'enlever une des "options" de la partie 1 : Code: <option value="valeur3"> Nom du thème 3 </option> ainsi que de retirer le morceau lui correspondant dans la partie 2 Code: else if (type == 'valeur3') { document.write('<link rel="stylesheet" type="text/css" href="adresse_du_thème_3">'); } Important: A ceux qui utilisent des feuilles de styles Hitskin : - Comme vous pourrez le constater, les feuilles de styles ne contiennent pas d'informations pour le logo, et le menu de navigation : Vous réglerez ces paramètres par vos panneau d'administrations : ces réglages seront communs à tous vos thèmes. (Choisissez quelque chose de neutre) -Mettez de préférence le nom que les auteurs ont donné à leur thème, et si possible insérez aussi le nom de l'auteur. Ces feuilles de style sont leurs travaux, ne l'oubliez pas. Attention : pour les noms qui contiennent des apostrophes ' ne les mettez pas, Raccourcissez le nom sans mettre les apostrophes ou autres caractères spéciaux comme # ( ) . / ? ! ; " ' & 2.4 Récupérer l'adresse de votre page html qui contient le script : Une fois les démarches terminées, validez votre page html Retourner à l'administration de vos pages html Copier l'adresse de votre page html Etape 3 : Installer le sélecteur sur mon forum : - Version phpBB3, Invision : templates non modifiable : Il ne vous reste plus qu'à aller insérer le sélecteur, il faut le faire dans la description de votre forum : Panneau d'administration Général Forum Configuration Description du site : Collez ceci : Code: <span id="temsel"></span><script type="text/javascript" src="coller_ici_l'url_de_la_page_html_que_vous_venez_de_créer"></script> - Version phpBB2, punBB : version modifiables par template : -Pour plus de simplicité vous pouvez faire comme les versions phpBB3 et punBB et suivre la démarche expliquée au dessus. ~> Vous avez la possibilité de l'insérer dans les templates. Sous phpBB2 : Pour mettre le selecteur sous la description de votre site : Panneau d'administration Affichage Template Général overall_header Haut de page Modifier : Trouvez : Code: <td align="center" width="100%" valign="middle">                      <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>                      <div class="maintitle">{MAIN_SITENAME}</div>                                            <span class="gen">{SITE_DEscriptION}</span>                   </td> Entre : Code: <span class="gen">{SITE_DEscriptION}</span> et Code: </td> Insérez ce code : Code: <span id="temsel"></span><script type="text/javascript" src="http://themeselect.forumactif.com/css-selecteur-h1.htm"></script> Validez, et n'oubliez pas de publier le template Version punBB : Pour mettre le selecteur sous la description de votre site : Panneau d'administration Affichage Template Général overall_header Haut de page Modifier : Trouvez : Code: <!-- BEGIN switch_desc -->                   <p id="pun-desc">{switch_desc.SITE_DEscriptION}</p>                   <!-- END switch_desc -->                </div>                <div id="pun-head">                   <div id="pun-navlinks">                      <ul class="clearfix">                         <li>{GENERATED_NAV_BAR}</li>                      </ul>                   </div>                </div> Juste après ajoutez votre selecteur : Code: <span id="temsel"></span><script type="text/javascript" src="http://themeselect.forumactif.com/css-selecteur-h1.htm"></script> Validez et n'oubliez pas de publier le template. Vous avez maintenant un sélecteur de thème sur votre forum ! IMPORTANT : Rappel des règles à ne surtout pas oublier : - Ne mettez que des feuilles de style de la même version que celle de votre forum - N'insérez pas de saut de ligne dans la partie 1 du script - N'insérez pas de caractères spéciaux tels que des points d'interrogation ou des apostrophes dans vos noms de thème. ( ; : , ' " ? ! / # & %) - Si vous utilisez une feuille de style d'un thème Hitskin : Ecrivez le nom que lui a donné l'auteur (excepté les caractères spéciaux ; : , ' " ? ! / # & % . ) - Ne touchez pas à la partie 3 du script. - Si vous créez vos propres feuilles de css n'insérez ni caractères spéciaux ( ; : , ' " ? ! / # & . %) ni espaces dans le nom de vos feuilles. - N'insérez pas de caractères spéciaux ou d'espace dans le nom de votre page html Vous pouvez voir le sélecteur de thème qui a servi pour l'exemple sur ce forum : http://themeselect.forumactif.com/forum.htm - Cet outil n'est pas mis à disposition pour que certains puissent user des thèmes des autres sans leur permission. En plus d'être répréhensible pénalement, un tel usage serait irrespectueux. Respectez le travail des autres membres de forumactif : Si un thème vous plaît, contactez l'administrateur/l'auteur du thème pour lui demander la permission de l'utiliser - Ce tutoriel a été réalisé par Irina grâce aux scripts d'Etana et de Sparrow-style, la combinaison des deux scripts a été faite par niahoo Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

[wonder_girl]

Tu importe les deux et puis apres je ne sais pas, il va faloir chercher un peu, je ne suis pas encore a ce stade. Je ne sais pas si tu peu en sauvegarder deux comme ça. Essaye et ensuite dit moi.

[Basil Hawkins]

Non ce n'est pas possible ^^'

[wonder_girl]

Ah dommage

[Hebito Uchiwa]

Je me demandai est il possible de modifier chaque theme comme on peut faire avec l'original ou faut ce contenter des theme selectionner.

car jaimerai changer certain truc sur certain theme de la selection.

Comment fait -on?

[wonder_girl]

Je ne suis pas sur qu'on peu faire ça.

[Basil Hawkins]

En fait si on peut, et d'ailleurs cela se rapproche à ma question.
Il suffit de connaître chaque class utilisé dans le CSS et dans les templates pour modifier ça via le CSS, mais c'est bien là le problème =/, car je ne les connais pas toutes ._.

[Hebito Uchiwa]

Oui c'est ce que je croyais , mais comment avoir les code qui identifie chaque thème comme un thème unique.

Bref , si quelqu'un connait les code css pour modifier les thème dans le selecteur de theme ca serai bien apprécier par tous le monde je croit!

Merci d'avance!

:thanks:

[chef électro]

Il y a vraiment beaucoup plus simple !!!

D'une part, je n'ai pas réussi à installer ce sélecteur, sans comprendre pourquoi. Et ma méthode est plus simple : Vous créez des thèmes temporaires et vous les mettez en lien dans un widget sur chaque page, c'est réglé. Pas besoin de rentrer dans la programmation à ce point.

Exemple sur mon forum :

http://chef-electro.forumpro.fr

[Hebito Uchiwa]

c'est magnifique la dernière astuce , Merci Beaucoup!!!

[Irina]

D'une part, je n'ai pas réussi à installer ce sélecteur, sans comprendre pourquoi. Et ma méthode est plus simple : Vous créez des thèmes temporaires et vous les mettez en lien dans un widget sur chaque page, c'est réglé. Pas besoin de rentrer dans la programmation à ce point.

Bonjour,

C'est en effet une solution, ceci dit avec cette méthode, le choix du thème s'enlève à chaque changement d'option, par exemple si l'on fait une recherche, lorsque l'on poste un message etc etc
c'est bien le problème.

Cordialement,

[wonder_girl]

ah mince c'est nul. ya pas une solution simple et efficace!!

[Hebito Uchiwa]

Oui j'ai constater ce fait moi aussi , il aurai t-il un moyen qu'il reste sur le thème sélectionné ou c'est pas possible ou faut t-il refaire le css de chaque theme via le feuillet?

je sait plus quoi faire je tien absolument a changer certain détail des theme .

[Diabolo34]

c'est compliquer !

[wonder_girl]

C'est sur, mais bon, j'ai trouvé un gamin de 12 ans qui a reussi a le faire :/

[Solidz`]

Bon ben voila au fait je trouve pas ou es mon problème mais bon j'ai bien les liens de mais thème choisi pour changer les couleur sur la nouvel page htlp en prévisualisation cela fonctionne mais pas à l'installation du code de fin snif pouvais vous m'aider

Merci d'avance


Voila j'ai réussi à faire l'installation , mais autre problème j'ai tout les bouton du forum qui ne change pas il reste en couleur de basse cela est il possible de faire changer aussi ?

Merci d'avance

[Isil Calendil]

Bonjour

Je me permets de poser la même question.
Les images des boutons, icones etc... ne semblent pas être décrites dans le CSS qu'on référence par le sélecteur. Si les thèmes sont très différents il s'ensuit un horrible hybride de plusieurs thèmes lorsqu'on change le thème de base du forum.

Comment savoir la façon de TOUT décrire dans sa feuille CSS et est-ce possible de le faire ?

Merci.

[passioncm]

Merci beaucoup pour ce tuto très bien fait, j'ai réussi du premier coup !

[Pokéyugimestre]

C'est bien fait, tellement bien fait que j'ai décider de la bâcler comme je devais aller dîner et j'ai dû sauter des étapes ou faire un truc pas bien pour plein de raisons, car :

• je n'ai pas mis le nom et les auteurs des thèmes car j'avais mis une demi-heures à trouver de jolies sur Histskin et ensuite javais la flemme de les re-rechercher ;
  
• j'ai voulu le faire sur le Forum d'un admis où je suis Admin et donc même s'il est en Phbb2, j'ai dû modifier la description au lieu des templates ;
  
• et la selecteur n'apparait pas sur le Forum, ni aucune description d'ailleurs.
  

Je demande donc votre aide avec bien sûr des screens (que je sais mainteant faire grâce à un autre tuto, encore merci ForumActif ) votre aide en m'excusant d'avoir bâcler ce tuto alors qu'en plus c'était déconseillé dans l'introduction.

Alors... Screen de la page Configuration dans Général ---> Forum du Panneau d'Admin :



et voiçi une capture de l'accueil des pages HTMl :



et un screen de la page d'accueil du Forum sans la description :





voilà, merci d'avance et j'éspère que vous pourrez m'aider...

[hitm@n]

salut tt d'abord merci pour l'astuce c'est magnifique
mon probleme est simple "j'ai pas pu télécharger le code html a partir de free.fr" si quelqu'un peu l'héberger qlq part ça serai sympa
merci a vous

[Yu']

Bonsoir, j'ai fait des thèmes temporaires mais le problème c'est que c'est assez compliqué pour moi de tout capter dans votre explication alors serais-ce possible qu'on puisse m'aider, ça serait vraiment un grand service ^^

[Yu']

Please j'aimerais bien qu'on me réponde

[Pokéyugimestre]

Up!

[wonder_girl]

Bon, je crois que personne ne peut vraiment nous aider sur sa. Moi j'ai laisser tomber.

[Yu']

En plus y'a suffisamment de personnes pour nous aider je comprend pas moi ... C'est un forum pour aider les autres non ? Alors pourquoi ils ne viennent pas

[Irina]

- N'oubliez pas si vous avez des questions ne les posez pas ici : ouvrez un sujet dans la section :
https://forum.forumactif.com/probleme-avec-un-script-un-code-f74/

Bonjour à tous,


Peut être que si vous aviez l'effort de lire le sujet correctement, vous comprendriez pourquoi personne ne répond ici.

Vous êtes dans les ANNONCES, et non pas dans l'entraide !

Merci aussi de lire les règles de notre forum : https://forum.forumactif.com/regles-et-staff-du-forum-f99/regles-generales-du-forum-et-charte-t114085.htm

- La couleur est réservé à la modération, merci de ne pas l'utiliser.


Ensuite les messages comme ça :

Bonsoir, j'ai fait des thèmes temporaires mais le problème c'est que c'est assez compliqué pour moi de tout capter dans votre explication alors serais-ce possible qu'on puisse m'aider, ça serait vraiment un grand service ^^

Vous croyez que ça donne envie de répondre ?

On ne va pas tout vous faire !
Si vous cherchez vraiment à le faire, si au moins vous preniez le temps de lire mes explications, et que vous testiez !
Des dizaines de membres ont réussi à installer ce selecteur sans problèmes, je ne vois pas pourquoi pas vous.

Vous pouvez demander de l'aide, je le comprends. Mais pas attendre simplement que ça tombe du ciel, si vous voulez de l'aide, il faut montrer que vous avez essayé par vous même, que vous avez fait l'effort;


Cordialement,

[Yu']

J"ai pas dit de tout faire mais de m'aider c'est tout et je vois que je suis pas la seule a ne pas comprendre, la preuve d'autre personnes ont posté qu'ils avaient pas compris donc résultat je suis pas la seule a ne pas bien comprendre et puis on est pas des pro cela ne fait pas longtemps qu'on est sur forumactif et nos forum ne sont pas créés depuis très longtemps non plus

[Irina]

J"ai pas dit de tout faire mais de m'aider c'est tout et je vois que je suis pas la seule a ne pas comprendre, la preuve d'autre personnes ont posté qu'ils avaient pas compris donc résultat je suis pas la seule a ne pas bien comprendre et puis on est pas des pro cela ne fait pas longtemps qu'on est sur forumactif et nos forum ne sont pas créés depuis très longtemps non plus

Il n'y a pas besoin d'être un pro, je pense que lire le tuto et essayer, c'est le minimum

Vous parlez de thème temporaire, alors que le tuto ne les évoque même pas une seule fois, on utilise pas les thèmes temporaires.

Ceci dit, ce n'est pas une critique, mais votre message porte à croire que vous n'avez même pas essayé par vous même.
Maintenant, si vous avez essayé, Ouvrez un sujet dans l'entraide pour de l'aide, expliquez où vous en êtes, et ce qui ne fonctionne pas, et je vous aiderais sans problèmes


Cordialement,

[wonder_girl]

Oui elle a raison. Moi j'ai abandonner parce que j'ai plus besoin d'un selecteur de themes.

[Yu']

Voila, j'ai fait un nouveau sujet comme vous l'avez dit, il se trouve ici :
https://forum.forumactif.com/probleme-avec-un-script-un-code-f74/a-propos-du-selecteur-de-theme-t267431.htm

[glam500]

comment fait on pour personnaliser la banniere pour les forums phpbb3 avec le nom du forum a chaque fois que l on choisit un theme?
vu qu elles ne sont pas automatiquement modifiees?