Forum d'aide aux administrateurs de forums
AccueilPortailCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

 

Spoiler façon FAQ

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Auteur Message
final-blond
Modérateur administrateur
avatar

Féminin
Localisation : Dans une équation qui me chavire.
Emploi/loisirs : Dépasser les bornes des limites d'un tuto.
Nombre de messages : 127
Date d'inscription : 21/02/2009
Réputation : 0
Points : 62

MessageSujet: Spoiler façon FAQ
Jeu 2 Avr - 2:33

Après me faire envahir la boîte mp du fdf pour ce tuto, autant le laisser en astuce un peu partout. :D



Tuto pour créer un système de spoiler façon la FAQ - HTML -
Dans un widget, le message d'accueil, une page html, description d'un forum


  • Tout d'abord copier-coller simplement tel quel dans un premier temps, histoire de se familiariser avec les tables.
    Ensuite rien n'empêche de personnaliser ce tuto, ou juste de le personnaliser avec les balises standards du html.
  • Le tout a été divisé en parties bien distinctes, à vous de remplir les titres, le contenu, d'aligner, de colorer, même de mettre des couleurs ou des images en fond des tables.
    Code:
    <script src="/js_58/collapsible_faq.js"></script>

    <table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 1</span></td>
    </tr>
    <tr>
    <td class="row1" valign="top">
    <div onclick="return CFAQ.display('faq_a_1', false);" style="width: 100%; cursor: pointer; cursor: hand;">
    <span class="gen">
    <a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_1', true);" onfocus="this.blur();">
    <b>TITRE CHAPITRE 1.1</b>
    </span>
    </div>
    <div id="faq_a_1" style="display: none;">
    <table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td valign="top"><span class="postbody">CONTENU 1.1<br />
    </span></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>

    <tr>
    <td class="row2" valign="top">
    <div onclick="return CFAQ.display('faq_a_2', false);" style="width: 100%; cursor: pointer; cursor: hand;">
    <span class="gen">
    <a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_2', true);" onfocus="this.blur();">
    <b>TITRE CHAPITRE 1.2</b>
    </span>
    </div>
    <div id="faq_a_2" style="display: none;">
    <table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td valign="top"><span class="postbody">CONTENU 1.2<br />
    </span></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table><br clear="all" />

    <table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 2</span></td>
    </tr>
    <tr>
    <td class="row1" valign="top">
    <div onclick="return CFAQ.display('faq_a_3', false);" style="width: 100%; cursor: pointer; cursor: hand;">
    <span class="gen">
    <a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_3', true);" onfocus="this.blur();">
    <b>TITRE CHAPITRE 2.1</b>
    </span>
    </div>
    <div id="faq_a_3" style="display: none;">
    <table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td valign="top"><span class="postbody">CONTENU 2.1<br />
    </span></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>

    <tr>
    <td class="row2" valign="top">
    <div onclick="return CFAQ.display('faq_a_4', false);" style="width: 100%; cursor: pointer; cursor: hand;">
    <span class="gen">
    <a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_4', true);" onfocus="this.blur();">
    <b>TITRE CHAPITRE 2.2</b>
    </span>
    </div>
    <div id="faq_a_4" style="display: none;">
    <table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
    <tr>
    <td valign="top"><span class="postbody">CONTENU 2.2<br />
    </span></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table><br clear="all" />

  • Le principe est simple :
    - c'est un tableau sous forme de catégorie
    - contenant des tables sous formes de chapitres
    - qui contiennent le contenu sous formes contenus (texte, image, etc)
  • Dans l'exemple il y a deux catégories contenant deux chapitres (tables) qui contiennes deux contenus (textes, images, ou les deux).
  • Pour les plus avancés, et même pour les moyens (j'y suis bien arrivée), vous pouvez nuancer les couleurs des tables en alternance, bref, plein de possibilités.
  • Petite astuce : copier-coller tel quel le code dans une page HTML afin de pouvoir travailler avec la personnalisation en utilisant (et abusant) de la prévisualisation.
  • Dans un post ou dans une catégorie, ça ne marche pas.


Bien du plaisir.


PS : j'espère avoir tout bien fait dans les règles, hein ?


Dernière édition par final-blond le Ven 3 Avr - 19:43, édité 1 fois (Raison : Correction de la numérotation des tables)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://futilitiz-city.forumactif.com/index.htm
final-blond
Modérateur administrateur
avatar

Féminin
Localisation : Dans une équation qui me chavire.
Emploi/loisirs : Dépasser les bornes des limites d'un tuto.
Nombre de messages : 127
Date d'inscription : 21/02/2009
Réputation : 0
Points : 62

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:03

ProgVal a écrit:
J'ai rajouté un slash à l'URL de la première ligne.
Ok.

ProgVal a écrit:
il faut donc modifier le script pour chaque forum.
Ok, et on le modifie comment ?



Merci by the way.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://futilitiz-city.forumactif.com/index.htm
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:06

Mettre le nom du fichier JS du forum.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
final-blond
Modérateur administrateur
avatar

Féminin
Localisation : Dans une équation qui me chavire.
Emploi/loisirs : Dépasser les bornes des limites d'un tuto.
Nombre de messages : 127
Date d'inscription : 21/02/2009
Réputation : 0
Points : 62

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:14

ProgVal a écrit:
Mettre le nom du fichier JS du forum.
C'est du goutte à goutte, mais au moins j'aurais bien compris après... :D

Où je trouve le nom du fichier JS du forum ProgVal ?

Ensuite je reposterai le tuto avec les modifs et les explications, d'acc ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://futilitiz-city.forumactif.com/index.htm
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:19

Grosso-modo, lorsque tu est sur le forum, tu fais un clic-droit, puis tu clique sur "Code-source de la page". Dans le code source, tu cherches .js . Juste à gauche, il y a un petit numéro, que tu mets à la plac de celui qui est à la première ligne de tout script.

Nettoyage du sujet

_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
final-blond
Modérateur administrateur
avatar

Féminin
Localisation : Dans une équation qui me chavire.
Emploi/loisirs : Dépasser les bornes des limites d'un tuto.
Nombre de messages : 127
Date d'inscription : 21/02/2009
Réputation : 0
Points : 62

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:30

ProgVal a écrit:
tu cherches .js Juste à gauche, il y a un petit numéro, que tu mets à la plac de celui qui est à la première ligne de tout script.
Ok, c'est le #58 c'est ça ?
Mais j'ai regardé sur trois forum différents et c'est toujours 58 :scratch:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://futilitiz-city.forumactif.com/index.htm
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 14:39

Oui, mais dès que FA fait une petite mise à jour de ce fichier, celui-ci change de nom.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
final-blond
Modérateur administrateur
avatar

Féminin
Localisation : Dans une équation qui me chavire.
Emploi/loisirs : Dépasser les bornes des limites d'un tuto.
Nombre de messages : 127
Date d'inscription : 21/02/2009
Réputation : 0
Points : 62

MessageSujet: Re: Spoiler façon FAQ
Ven 3 Avr - 19:45

Tout d'abord, pour ceux qui auraient déjà copier le script, plus haut, il est juste mais par pure coïncidence et il vaut mieux le rendre conforme (comme je viens de le faire avec celui plus haut), si vous voulez vous y retrouvez plus tard avec un autre de ces tableaux.
C'est en fait un point logique, de numération des tables qui constituent ce script.

  • Il y a trois fois faq_a_X par table (X = le numéro de la table).
    Ce numéro ne peut pas être le même d'une table à l'autre (plus, je crois bien sur la même page), mais il doit être le même sur les trois paramètres de la même table.
    Ici, il y a 4 ouvertures, et donc ça se termine par 4.
    Si vous voulez insérer un autre tableau, il faudra commencer en continuant avec 5 (ou autre).
  • L'autre point, est le numéro du script (tout au début du tuto).
    Vérifiez bien que c'est aussi le 58 comme pour FA.
    Pour ça, vous prenez le code source d'une page de votre forum (par le clic droit ou Ctrl + U avec MF) et cherchez .js juste à gauche vous aurez le numéro.

  • Il faut être très concentré sur les fermetures des balises !
    Sinon vous pouvez planter le tout.


Voilà, là c'est exhaustif.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://futilitiz-city.forumactif.com/index.htm
Contenu sponsorisé



MessageSujet: Re: Spoiler façon FAQ

Revenir en haut Aller en bas

Spoiler façon FAQ

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
Les admins de forums :: Listes de problèmes/solutions :: Trucs et astuces -
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit