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

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

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

Message par The Godfather le Mar 5 Jan 2010 - 9:26

Rappel du premier message :



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://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 :

Arrow Panneau d'administration en mode Avancé
Arrow Onglet "Modules"
Arrow 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 :

Arrow Une fois les démarches terminées, validez votre page html
Arrow Retourner à l'administration de vos pages html
Arrow 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 :
Arrow Panneau d'administration
Arrow Général
Arrow Forum
Arrow Configuration
Arrow 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 :
Arrow Panneau d'administration
Arrow Affichage
Arrow Template
Arrow Général
Arrow overall_header Haut de page
Arrow Modifier : edit

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 :
Arrow Panneau d'administration
Arrow Affichage
Arrow Template
Arrow Général
Arrow overall_header Haut de page
Arrow Modifier : edit

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 cheers !

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.



The Godfather
Adminactif
Adminactif

Masculin
Messages : 13545
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

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

Message par Yu' le Sam 6 Mar 2010 - 0:21

Ca m'énerve, j'y suis presque mais ça marche pas. Il y a pas quelqu'un pour nous aider ? Beaucoup de personne postent ici mais sanss réponse alors pourquoi avoir fait ce topic si pas beaucoup de personne nous aide ? Je ne vois pas l'utiliter, je dis ça pas pour etre blessante ou pour faire des remarques mais je dis la simple vérité et puis comme ça vous le saurez.

Yu'
***

Féminin
Messages : 113
Inscrit(e) le : 24/02/2010

http://himitsu-rpg.forumactif.com/
Yu' a été remercié(e) par l'auteur de ce sujet.

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

Message par wonder_girl le Sam 6 Mar 2010 - 10:30

Fait un topic ou on peu t'aider, ici c'est juste pour les commentaires.

wonder_girl
***

Féminin
Messages : 127
Inscrit(e) le : 21/12/2009

http://pokemons.forumactif.com/
wonder_girl a été remercié(e) par l'auteur de ce sujet.

le thème ne change pas

Message par punkgamer01 le Sam 6 Mar 2010 - 20:33

bonjours,

j'ai un petit problème avec mon sélecteur de thème. Le problème c'est qu'il apparaît, mais que les thème ne changent pas quand je le test. j'ai même essayer en m'inscrivant comme membres sur mon propre forum. Cela ne fait qu'actualisé la page et cela ne change pas le thème.

Merci de bien vouloir m'aidé à trouver une solution pour que le sélecteur de thème fonctionne comme il faudrait qu'il fonctionne.

punkgamer01
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 25/01/2010

http://boardgame-ped.forumgratuit.org/index.htm
punkgamer01 a été remercié(e) par l'auteur de ce sujet.

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

Message par nafoute le Mar 16 Mar 2010 - 9:28

pfu j ai suivi consciencieusement le tuto (super bien fait d ailleurs) ca fait deux jours que je suis dessus et rien a faire le selecteur n apparait pas!
j ai beau demande a l aide dans le forum code personne ne repond

nafoute
*

Messages : 48
Inscrit(e) le : 11/11/2009

http://mamanaout.Forumactif.com
nafoute a été remercié(e) par l'auteur de ce sujet.

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

Message par exo-6 le Sam 27 Mar 2010 - 12:39

Bonjours,

l'hébergeur http://pmsc.free.fr/ ne fonctionne plus pour les CSS.

Pourriez-vous me conseiller un autre hébergeur, c'est assez urgent.

Merci d'avance Wink .

exo-6
***

Masculin
Messages : 133
Inscrit(e) le : 18/09/2006

http://www.bionifigs.com
exo-6 a été remercié(e) par l'auteur de ce sujet.

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

Message par hd-fred le Mer 31 Mar 2010 - 20:43

Bonjour à tous.

J'ai mis en place le sélecteur de thème sur une plateforme test que le fondateur du forum auquel je participe à mis a la disposition de son staff.
Je suis un des modérateurs de ce forum et je cherche le moyen de déplacer le sélecteur en bas du forum.
Pouvez vous m'orienter ?

D'avance merci

hd-fred
**

Masculin
Messages : 68
Inscrit(e) le : 18/03/2010

http://www.forum-generationmobiles.net/
hd-fred a été remercié(e) par l'auteur de ce sujet.

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

Message par Boblepongee le Mer 31 Mar 2010 - 21:23

Tu peux héberger sur archive host!

Boblepongee
**

Messages : 50
Inscrit(e) le : 26/12/2009

http://espacepub.forumactif.com
Boblepongee a été remercié(e) par l'auteur de ce sujet.

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

Message par hd-fred le Mer 31 Mar 2010 - 22:02

Techniquement oui, mais le compte "archive host" appartient au fondateur, il le mets à dispo pour son staff.
As tu essayé sur une pages perso free ?
@ toute

hd-fred
**

Masculin
Messages : 68
Inscrit(e) le : 18/03/2010

http://www.forum-generationmobiles.net/
hd-fred a été remercié(e) par l'auteur de ce sujet.

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

Message par hd-fred le Sam 3 Avr 2010 - 23:09

Bonsoir, excusez mon insistance je rencontre des soucis d'affichage d'images non natif du css de base. J'ai identifié leur ID dans le html de mon forum mais cela ne change rien au selecteur.
Je pense avoir fais des erreurs sur la construction de la structure de mon css mais je ne sais pas les identifier.

Si il y a quelqu'un pour me filer un coup de main ce serais très appréciable
d'avance merci

hd-fred
**

Masculin
Messages : 68
Inscrit(e) le : 18/03/2010

http://www.forum-generationmobiles.net/
hd-fred a été remercié(e) par l'auteur de ce sujet.

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

Message par Irina le Dim 4 Avr 2010 - 10:22

@hd-fred a écrit:Bonsoir, excusez mon insistance je rencontre des soucis d'affichage d'images non natif du css de base. J'ai identifié leur ID dans le html de mon forum mais cela ne change rien au selecteur.
Je pense avoir fais des erreurs sur la construction de la structure de mon css mais je ne sais pas les identifier.

Si il y a quelqu'un pour me filer un coup de main ce serais très appréciable
d'avance merci

Bonjour,

Merci d'ouvrir un sujet, dans l'entraide : Problème avec un script, en précisant, adresse du forum, problème rencontré etc etc, avec des détails, et capture d'écran si possible.

La section ANNONCE n'est pas faite pour l'entraide



Cordialement, Smile

Irina
+ Hyperactif +

Féminin
Messages : 6848
Inscrit(e) le : 16/07/2009

http://forum.forumactif.com
Irina a été remercié(e) par l'auteur de ce sujet.

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

Message par mouneem le Lun 30 Aoû 2010 - 3:33

Je crois que ont utilisent Cette Fonction en créer une nouvelle page pour L'accueil ,Mois j'aimerais savoir si c'est possible de créer un chois de thème pour le forum Dans une Liste déroulante ou bien des case a coché mais sons créer une nouvelle page

mouneem
**

Messages : 73
Inscrit(e) le : 26/11/2009

http://ss-enligne.com
mouneem a été remercié(e) par l'auteur de ce sujet.

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

Message par FFF le Jeu 2 Sep 2010 - 15:24

Merci beaucoup pour le tutoriel il m'a beaucoup aidé ( enfin j'ai quand même mis des heures à me taper la tête contre mon bureau pour que les codes soient bien installer^^)

Mais je voulais savoir si il y avait une possibilité pour que TOUT le design change, la bannière et les boutons compris ?

merci d'avance

FFF
***

Féminin
Messages : 198
Inscrit(e) le : 04/08/2009

http://frenchficsfanart.forumactif.com/
FFF a été remercié(e) par l'auteur de ce sujet.

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

Message par Tuck's le Ven 3 Déc 2010 - 13:57

La script à été détruit par free, y à il possibilité qu'il me soit envoyé? Merci d'avance.

Tuck's
Nouveau membre

Messages : 8
Inscrit(e) le : 10/11/2010

http://www.world-of-animations.org/forum.htm
Tuck's a été remercié(e) par l'auteur de ce sujet.

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum