Onglets d'options

[SweetGumiho]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sorceleur.jdrforum.com/

Description du problème

Bonjour / Bonsoir,

J'essaye d'apprendre le codage dans le but d'alléger le plus possible le design des forums Forumactif en phpBB2 et d'optimiser leurs fonctionnalités. Dans cet optique j'aimerais créer des onglets d'options de la même manière que l'onglet "Plus !" existe sur les forums et dans les sujets.

Cela consisterait donc à avoir trois types d'onglets : "Options" (PA), "Options du forum" (forums) et "Options du sujet" (sujets).

1► Sur la page d'accueil, l'onglet "Options" regrouperait les fonctionnalités suivantes :
- Voir les nouveaux messages depuis votre dernière visite
- Voir ses messages
- Voir les messages sans réponses
- Marquer tous les forums comme lus
- Sujets actifs du jour
- Top 20 des posteurs du jour
- Top 20 des posteurs du forum
- Supprimer les cookies du forum

2► Sur le même principe, l'onglet "Options du forum" regrouperait les fonctionnalités suivantes pour les forums et sous-forums (le Plus !" disparaîtrait donc) :
- Voir les nouveaux messages depuis votre dernière visite
- Voir ses messages
- Voir les messages sans réponses
- Marquer tous les sujets comme lus
- Surveiller les sujets de ce forum / Arrêter de surveiller les sujets de ce forum
- Copier l'adresse BBCode de la page
- Imprimer cette page
- Modérer ce forum

3► Et enfin, dans les sujets, le "Plus !" serait remplacé par "Options du sujet" et ajouter à ses fonctionnalités "Surveiller ce sujet / Arrêter de surveiller ce sujet" avant "Ajouter à ses favoris". Le forum Never Utopia a réussi à effectuer la chose suivante mais leur codeur est malheureusement injoignable.

Après quelques recherches je pense avoir compris que :
- Pour mon onglet "Options" sur l'index je ne touche que index_body.
- Pour mon onglet "Options du forum", viewforum_body.
- Pour mon onglet "Options du sujet", viewtopic_body.

Je vais d'abord me concentrer sur l'onglet de l'index qui m'a l'air d'être le plus compliqué à mettre en oeuvre puisqu'il n'y a rien pour l'instant. Une liste en div suffirait mais je ne sais pas trop comment m'y prendre ensuite avec le JS.

Voici ce que j'ai réussi à prendre en inspectant les éléments des onglets d'options sur N'U :
- Sur les sous-forums :

Code:

<div id="forummenu-options" class="popmenubutton"><a href="javascript:void(0);" onclick="togglePopUpMenu('forummenu-options_menu');">Options du forum</a></div>
<ul id="forummenu-options_menu" class="popupmenu" style="position: absolute; top: 30px; right: 8px; z-index: 10000; display: none;"><li class="popupmenu-category">Options du forum</li><li class="popupmenu-item"><a href="/f1-reglement-annonces?mark=topics">Marquer tous les sujets comme lus</a></li><li class="popupmenu-item last"><a href="/f1-reglement-annonces?watch=forum">Surveiller les sujets de ce forum</a></li></ul>


- Dans les sujets :

Code:

<div id="topicmenu-options" class="popmenubutton"><script type="text/javascript">//<![CDATA[
var url_favourite = '/search?add_favourite=26796&amp;search_id=favouritesearch';var url_newposts = '/search?search_id=newposts&amp;search_where=f176';var url_egosearch = '/search?search_id=egosearch&amp;search_where=f176';var url_unanswered = '/search?search_id=unanswered&amp;search_where=f176';var url_watchsearch = '/search?search_id=watchsearch&amp;search_where=f176';var url_tellfriend = '/tell_friend.forum?t=26796';insert_plus_menu_new('f176&amp;t=26796','', true, '<a href="/t26796-menu-deroulant?watch=topic">Surveiller les réponses de ce sujet</a>');//]]></script><a rel="nofollow" href="javascript:showhide(document.getElementById('plus_menu'))">Plus !</a><br><div class="overview row3" id="plus_menu" style="display:none;position:absolute;width:400px;margin-top:8px;z-index:1;"><p class="title-overview row2"><strong>Plus !</strong></p><p class="left-overview"><strong><a rel="nofollow" href="/search?search_id=newposts&amp;search_where=f176">Voir les nouveaux messages depuis votre dernière visite</a><br><a rel="nofollow" href="/search?search_id=egosearch&amp;search_where=f176">Voir ses messages</a><br><a rel="nofollow" href="/search?search_id=unanswered&amp;search_where=f176">Voir les messages sans réponses</a><br><a rel="nofollow" href="/search?search_id=watchsearch&amp;search_where=f176">Sujets surveillés</a></strong></p><hr class="dashed"><p class="left-overview"><strong><a href="/t26796-menu-deroulant?watch=topic">Surveiller les réponses de ce sujet</a><br><a rel="nofollow" href="/search?add_favourite=26796&amp;search_id=favouritesearch">Ajouter à ses favoris</a><br><a rel="nofollow" href="http://www.never-utopia.com/t26796-menu-deroulant" onclick="link_bbcode();return false">Copier l'adresse BBCode de la page</a><br><a rel="nofollow" href="javascript:void(0);" onclick="window.print();return false">Imprimer cette page</a></strong></p></div></div>

Serait-il possible que vous m'expliquiez ces codes et pourquoi dans le premier par exemple je ne trouve pas : Sujets surveillés, etc.
Et ce qu'est le : search_id=watchsearch&search_where=f176';var url_tellfriend = '/tell_friend.forum?

Merci d'avance pour votre aide !

[Feuilla']

Bonjour,
ceci pourrait sûrement aider en adaptant :
https://forum.forumactif.com/t314485-installation-d-un-menu-deroulant
Bonne journée !

[SweetGumiho]

Oui, OK, mais je ne suis pas codeuse aussi je n'ai aucune idée du code se rattachant à chaque fonctionnalité et comment les placer correctement... :/

EDIT : J'ai bien créé mon menu vertical dans une page HTML mais je ne sais pas comment le placer, l'insérer pour que cela fasse comme le fameux "Plus !"

Code:

<div id="menu">
<dl>
<dt>Replier</dt>
</dl>
 
<dl>
<dt>Options</dt>
<dd  style="display:none;">
<ul>
<li><a href="http://sorceleur.jdrforum.com/search?search_id=newposts">Voir les nouveaux messages depuis votre dernière visite</a></li>
<li><a href="http://sorceleur.jdrforum.com/search?search_id=egosearch">Voir ses messages</a></li>
<li><a href="http://sorceleur.jdrforum.com/search?search_id=unanswered">Voir les messages sans réponses</a></li>
<li><a href="http://sorceleur.jdrforum.com/search?search_id=activetopics">Sujets actifs du jour</a></li>
<li><a href="http://sorceleur.jdrforum.com/memberlist?mode=today_posters">Top 20 des posteurs du jour</a></li>
<li><a href="http://sorceleur.jdrforum.com/memberlist?mode=overall_posters">Top 20 des posteurs du forum</a></li>
<li><a href="http://sorceleur.jdrforum.com/?mark=forums">Marquer tous les forums comme lus</a></li>
<li><a href="http://sorceleur.jdrforum.com/?mode=delete_cookies">Supprimer les cookies du forum</a></li>
</ul>
</dd> 
</dl>
</div>

[Feuilla']

Re,
le code est à placer dans un widget par exemple, ou sur la message de page d'accueil comme dit dans l' .
Pour le widget : Panneau d'administration (avancé) → Modules → Portail & Widgets → Gestion des widgets du forum.
Pour le message sur la page d'accueil : Panneau d'administration (avancé) → Affichage → Page d'accueil → Généralités.
Normalement tout devrait marcher ainsi, en collant le code actuellement contenu dans la page HTML.
Bonne journée !

[SweetGumiho]

Bon, le code du tutoriel ne fonctionne pas au clic apparemment mais de toute façon ce n'est pas ce que je souhaite car je voudrais quelque chose dans le corps même du forum, en haut à droite, là où se trouvent actuellement "Voir les nouveaux messages depuis votre dernière visite", "Voir ses messages", et "Voir les messages sans réponses", pas dans le message d'accueil ou aux positions des widgets. :/

EDIT : Histoire d'avancer le travail, j'ai commencé par tout rassembler dans mon template index_box.

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><br />
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span><br />
         <!-- END switch_user_logged_in -->
         <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
         <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
         <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a><br />
<!-- BEGIN switch_delete_cookies -->
         <span class="gensmall"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               </span>
         <!-- END switch_delete_cookies -->
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

EDIT 2 : Je viens de me rendre compte qu'en fait la fonctionnalité "Supprimer les cookies du forum" n'apparaissait pas. Comment je l'ai placer ne marche pas.

[SweetGumiho]

Je n'ai toujours pas de réponse concernant ce problème.

[SweetGumiho]

Je recherche toujours quelqu'un pour m'aider à faire ça et m'explique pour que je puisse tout bien comprendre ! ^^

[SweetGumiho]

Après quelques recherches je pense avoir compris que :

- Pour mon onglet "Options" sur l'index je ne touche que index_body.
- Pour mon onglet "Options du forum", viewforum_body.
- Pour mon onglet "Options du sujet", viewtopic_body.

Je vais d'abord me concentrer sur l'onglet de l'index.

Merci d'avance !

[SweetGumiho]

Je ne suis pas à l'aise avec le JS, est-ce que quelqu'un pour qui c'est le cas pourrait m'aider avec ce problème ? Merci.

[SweetGumiho]

J'ai bien avancé pour le menu d'options dans l'index, il y a seulement quelques petits bugs et mises en forme à résoudre. En revanche il me reste les menus d'options suivants :
- dans les forums & sous-forums
- sur les sujets.

Merci d'avance pour votre aide.