Sélecteur de thème

[Etana]

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 : http://pmsc.free.fr/ 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 Spoiler: Première étape : - Donnez un nom à votre page html. - Les deux options proposées doivent être cochées : NON Spoiler: Deuxième étape : Insérez le code suivant dans votre page html : [ Cliquez ici pour avoir le script à copier dans votre page ] Le code est divisé en trois parties : Partie 1 : Spoiler: 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 : Spoiler: Partie 3 : Spoiler: 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.) Spoiler: 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à : Spoiler: 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 Spoiler: 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'adresse_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_new 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><br />                      <div class="maintitle">{MAIN_SITENAME}</div>                      <br />                      <span class="gen">{SITE_DEscriptION}</span>                   </td> Entre : Code: <span class="gen">{SITE_DEscriptION}</span> et Code: </td> Insérez ce code : Code: <br /><br /> <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_new 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.