AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -38%
Ecran PC gaming 23,8″ – ACER KG241Y P3bip ...
Voir le deal
99.99 €

    (Onyx) Installation d'onglets.

    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Dim 19 Mar 2017 - 17:56

    Aide pour une installation d'onglets



    Bonjour,

    Je cherche depuis un moment le moyen d'installer des onglets sur un certain forum dans le but d'aérer la page et de pouvoir répartir les catégories qui, sinon, forment un long défilé. Je suis tombé sur ce tutoriel, très propre, très bien expliqué, mais qui toutefois ne précise pas ce qui semble aller de soi pour beaucoup : les changements personnels à faire dans le code ensuite. Je ne comprends pas notamment ce que je dois ajouter dans la feuille CSS, où ajouter les liens des images, tout ça.

    Lien : http://chacunsonpays.forumgratuit.org/

    J'aimerais que le menu ainsi constitué comporte :
    * Onglet 1 - Accueil : la page d'accueil + la catégorie "Nous rejoindre"
    * Onglet 2 - Agora : la catégorie "Communautaire" + la catégorie "Autour du jeu"
    * Onglet 3 - Jeu : la catégorie "Version traditionnelle" + la catégorie "Version longue" + la catégorie "Mini-Version"
    * Onglet 4 - Documents : la catégorie "Documentation" (actuellement un forum de "Autour du jeu") + la catégorie "Archives"
    * Onglet 5 - Bureau : la catégorie "Assemblée Nationale" (actuellement forum de "Communautaire") + les catégories invisibles du Bureau

    Je vous remercie d'avance si vous passez par là et me répondez Very Happy


    Schéma(s) et Eléments


    Schémas : /
    Tailles des éléments : J'ai pour le moment tenté de faire des brouillons sommaires pour les images mais souhaitais me concentrer sur le code avant les images (nous avons quelques graphistes mais peu de codeurs). Le menu serait en tous les cas dans la même teinte que les catégories (gris légèrement transparent) et de même taille, situé au-dessous de la barre de navigation).
    Effets voulus : Le menu aura, je l'espère, un effet de survol (les couleurs d'un onglet change en passant la souris au-dessus) et un effet de sélection (les couleurs de l'onglet sélectionné changent). Ses bords seront arrondis.
    Version de votre forum : PHPBB3
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 21 Mar 2017 - 17:26

    Salut!

    Ça tombe pas mal plus dans la section "Éléments de forum" donc je vais me permettre de déplacer ce sujet lorsque tu auras lu ce message.

    Alors le tutoriel dont tu parles ne s'applique pas vraiment à ta situation pour la simple raison que tes onglets comprennent plusieurs catégories, ce qui est relativement différent. Du coup, c'est sûr qu'il va devoir être modifier en profondeur (je parle du javascript), voir entièrement refait.

    J'ai quelques petites idées de comment faire, mais j'aurais tout d'abord besoin de connaître le nom des catégories. Là, il nous manque "les catégories invisibles du Bureau" de ton dernier onglet.

    Edit : En fait, Nihil a déjà travaillé sur ça alors je vais aller épluché ses vieux sujets, ça va m'aider ^^
    Edit2 : Eh finalement non, je pense que ce sera plus facile si je commence à neuf.


    Dernière édition par Onyx le Mar 21 Mar 2017 - 18:09, édité 1 fois



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Mar 21 Mar 2017 - 17:56

    Tout s'explique, merci beaucoup Onyx (et de ton message, et de chercher comment faire) ! :)
    Les catégories du Bureau seraient, en plus de la catégorie "Assemblée Nationale" : "Coin des Esthètes", "Sénat", "Modération", "Administration". J'ai par ailleurs oublié de mentionner la catégorie "Corbeille", qui serait dans le deuxième onglet.

    N'hésite pas si tu as le moindre besoin d'information supplémentaire à me les demander, à tout moment, ici, par MP, sur Discord !
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 23 Mar 2017 - 1:55

    Salut!

    J'ai recrée un javascript (pas mal moins efficient et qui ferait probablement facepalmer certains, mais au moins il marche) alors le principal est fait!

    Il manque juste l'esthétique, donc tu voulais quoi déjà?

    Edit : Problème! Le code fonctionne en comparant les noms des catégories pour les faire apparaître. Or, tu as 2 Administration comme catégorie. Ça te dérangerais de donner un nom différent à une de ces 2 catégories?
    Edit 2 : Ce serait possible d'avoir ton CSS?



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Jeu 23 Mar 2017 - 13:55

    Merci encore Onyx ! Wink

    Concernant les deux catégories "Administration" je ne vois pas de quoi tu parles, même après avoir vérifié mes messages précédents. Es-tu sûre qu'il y en a une autre que la dernière catégorie du "Bureau" ?

    Concernant le CSS :


    Concernant l'esthétique je voulais quelque chose de très simple se mêlant aux teintes des catégories & forums : en haut, à l'horizontal, avec des rectangles gris clairs, avec la même police que le reste (Verdana) Very Happy
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 23 Mar 2017 - 14:39

    Bouh!

    Tu as totalement raison, c'était moi qui avait déjà une catégorie Administration sur mon forum-test... :faint:

    Bref, j'y vais, je vais essayer de te faire quelque chose qui matche le reste de ton forum ^^

    Edit : Le resultat est à cet endroit.



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Jeu 23 Mar 2017 - 20:51

    C'est superbe ! Parfaitement comme je l'imaginais ! cheers

    Serait-il juste possible de faire en sorte que les rectangles des onglets aient tous la même longueur - on me dit psychorigide sur certains détails ?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 23 Mar 2017 - 21:27

    Comme ça?

    http://forum-test-onyx6.forumactif.com/



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Jeu 23 Mar 2017 - 21:34

    Exactement Very Happy
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 24 Mar 2017 - 1:18

    Perfect ~

    Alors voilà les codes ~

    Premièrement, dans le template overhall_header, il faut trouver ce bout de code :
    Code:
          <!-- BEGIN switch_ticker_new -->
          <div id="fa_ticker_blockD" style="margin-top:4px;">
             <div class="module">
                <div class="inner">
                   <span class="corners-top"><span></span></span>
                      <div id="fa_ticker_container">
                         <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                            <!-- BEGIN ticker_row -->
                            <li>{switch_ticker.ticker_row.ELEMENT}</li>
                            <!-- END ticker_row -->
                         </ul>
                      </div>
                   <span class="corners-bottom"><span></span></span>
                </div>
             </div>
          </div>
          <!-- END switch_ticker_new -->

    Et rajouter ceci juste avant :
    Code:
      <div class="cate_onglet_bloc">
              <div class="cate_onglet cate_onglet_actif">Accueil</div>
              <div class="cate_onglet">Agora</div>
              <div class="cate_onglet">Jeu</div>
              <div class="cate_onglet">Documents</div>
              <div class="cate_onglet">Bureau</div>
      </div>



    Ensuite, dans le template Index_Box, il faut remplacer ce bout de code :
    Code:
    <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="forabg">
             <div class="inner"><span class="corners-top"><span></span></span>
             <ul class="topiclist">
                <li class="header">
                   <dl class="icon">
                      <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                      <dd class="topics">{L_TOPICS}</dd>
                      <dd class="posts">{L_POSTS}</dd>
                      <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
                   </dl>
                </li>
             </ul>
             <ul class="topiclist forums">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
                <li class="row">
                   <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                      <dd class="dterm">
                         <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                            <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                            </h{catrow.forumrow.LEVEL}>
                            <br />
                            {catrow.forumrow.FORUM_DESC}

                            <!-- 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}
                            <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                         </div>
                      </dd>
                      <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                      <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                      <dd class="lastpost">
                         <!-- BEGIN ads -->
                         <span class="AD_LastPA">
                                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                    <span class="AD_LastInfos">
                                        <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                        {catrow.forumrow.ads.DATE}<br />
                                        {catrow.forumrow.ads.LOCATION}
                                    </span>
                         </span>
                                <!-- END ads -->
                         
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->

                         <span>
                         <!-- BEGIN switch_topic_title -->
                         <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                         <!-- END switch_topic_title -->
                         {catrow.forumrow.USER_LAST_POST}
                         </span>
                      </dd>
                   </dl>
                </li>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
                </ul>

             <span class="corners-bottom"><span></span></span></div>
          </div>
       <!-- END tablefoot -->
    <!-- END catrow -->

    Par ce bout de code :
    Code:
    <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="forabg forum_cate cate_showed">
             <div class="inner"><span class="corners-top"><span></span></span>
             <ul class="topiclist">
                <li class="header">
                   <dl class="icon">
                      <dd class="dterm"><div class="table-title cate_name">{catrow.tablehead.L_FORUM}</div></dd>
                      <dd class="topics">{L_TOPICS}</dd>
                      <dd class="posts">{L_POSTS}</dd>
                      <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
                   </dl>
                </li>
             </ul>
             <ul class="topiclist forums">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
                <li class="row">
                   <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                      <dd class="dterm">
                         <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                            <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                            </h{catrow.forumrow.LEVEL}>
                            <br />
                            {catrow.forumrow.FORUM_DESC}

                            <!-- 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}
                            <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                         </div>
                      </dd>
                      <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                      <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                      <dd class="lastpost">
                         <!-- BEGIN ads -->
                         <span class="AD_LastPA">
                                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                    <span class="AD_LastInfos">
                                        <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                        {catrow.forumrow.ads.DATE}<br />
                                        {catrow.forumrow.ads.LOCATION}
                                    </span>
                         </span>
                                <!-- END ads -->
                         
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->

                         <span>
                         <!-- BEGIN switch_topic_title -->
                         <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                         <!-- END switch_topic_title -->
                         {catrow.forumrow.USER_LAST_POST}
                         </span>
                      </dd>
                   </dl>
                </li>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
                </ul>

             <span class="corners-bottom"><span></span></span></div>
          </div>
       <!-- END tablefoot -->
    <!-- END catrow -->
    <div class="forabg forum_cate_none">
      <div class="inner">
        <span class="corners-top"><span></span></span>
          <ul class="topiclist forums">
            <li class="row">
              Vous n'avez accès à aucune catégorie de cette section.
            </li>
          </ul>
        <span class="corners-bottom"><span></span></span>
      </div>
    </div>




    Dans le template Index_Body, remplaces ceci :
    Code:
    <!-- BEGIN message_admin_index -->
       <div class="panel introduction">
          <div class="inner"><span class="corners-top"><span></span></span>
       <!-- BEGIN message_admin_titre -->
          <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
       <!-- END message_admin_titre -->

       <!-- BEGIN message_admin_txt -->
          <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
       <!-- END message_admin_txt -->
          <span class="corners-bottom"><span></span></span></div>
       </div>
    <!-- END message_admin_index -->

    Par cela :
    Code:
    <!-- BEGIN message_admin_index -->
       <div class="panel introduction forum_pa_cate cate_showed">
          <div class="inner"><span class="corners-top"><span></span></span>
       <!-- BEGIN message_admin_titre -->
          <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
       <!-- END message_admin_titre -->

       <!-- BEGIN message_admin_txt -->
          <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
       <!-- END message_admin_txt -->
          <span class="corners-bottom"><span></span></span></div>
       </div>
    <!-- END message_admin_index -->



    Voilà le CSS :
    Code:
    /*Trucs invisible, pas touche*/
    .forum_cate, .forum_pa_cate, .forum_cate_none {
      display: none;
    }
    /*Afficher les catégories choisies, pas touche*/
    .cate_showed {
      display: block;
    }

    /*Bloc des onglets*/
    .cate_onglet_bloc {
      border-radius: 30px;
      text-align: center;
    }
    /*Onglet*/
    .cate_onglet {
      display: inline-block;
      font-size: 18px;
      width: 120px;
      margin: 15px 10px 0px 10px;
      padding: 10px 15px 10px 15px;
      font-family: verdana;
      background: #F2F2F2;
      color: #757575;
      border: 4px solid #595959;
    }
    /*Survol onglet*/
    .cate_onglet:hover {
      background: #dfdfdf;
      cursor: pointer;
    }
    /*Onglet actif*/
    .cate_onglet_actif {
      background: #a3a3a3;
      color: #ffffff;
      font-weight: bold;
    }
    /*Survol onglet actif*/
    .cate_onglet_actif:hover {
      background: #a3a3a3;
      cursor: default;
    }
    /*Mise en forme du pas de catégorie*/
    .forum_cate_none .row {
      padding: 10px;
      font-size: 12px;
      font-family: Verdana;
      color: #555555;
      text-align: center;
    }



    Et enfin, le javascript à mettre dans les javascripts en placement "Sur l'index" :
    Code:
    $(function(){
      var nomonglet;

      /*Montre les onglets sur l'index les onglets*/
      $('.forum_onglet_bloc').css('display', 'block');
     
      /*Cache tout*/
      $('.forum_cate').removeClass('cate_showed');
      $('.forum_pa_cate').removeClass('cate_showed');
     
      /*Fait apparaître la catégorie Nous rejoindre et la PA de base*/
      $('.forum_pa_cate').addClass('cate_showed');
      $('.cate_name:contains("Nous rejoindre")').closest('.forum_cate').addClass('cate_showed');

     
        /*Quand on clique sur un onglet*/
      $('.cate_onglet').click(function(){
     
        /*On cache tout*/
        $('.forum_cate_none').css('display', 'none');
        $('.forum_cate').removeClass('cate_showed');
        $('.forum_pa_cate').removeClass('cate_showed');
        $('.cate_onglet').removeClass('cate_onglet_actif');
       
        /*Nom de l'onglet*/
        nomonglet = $(this).text();

        /*Si l'onglet est Accueil on fait apparaître Nous rejoindre et la PA*/
        if (nomonglet == "Accueil") {
          $(this).addClass('cate_onglet_actif');
          $('.forum_pa_cate').addClass('cate_showed');
          $('.cate_name:contains("Nous rejoindre")').closest('.forum_cate').addClass('cate_showed');
        }
       
        /*Si l'onglet est Agora on fait apparaître Communautaire et Autour du jeu*/
        else if (nomonglet == "Agora") {
          $(this).addClass('cate_onglet_actif');
          $('.cate_name:contains("Communautaire")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Autour du jeu")').closest('.forum_cate').addClass('cate_showed');
          if ($('.cate_showed').length < 1) {
            $('.forum_cate_none').css('display', 'block');
          }
        }

        /*Si l'onglet est Jeu on fait apparaître Version traditionnelle, Version longue et Mini-Version*/
        else if (nomonglet == "Jeu") {
          $(this).addClass('cate_onglet_actif');
          $('.cate_name:contains("Version traditionnelle")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Version longue")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Mini-Version")').closest('.forum_cate').addClass('cate_showed');
          if ($('.cate_showed').length < 1) {
            $('.forum_cate_none').css('display', 'block');
          }
        }

        /*Si l'onglet est Documents on fait apparaître Documentation et Archives*/
        else if (nomonglet == "Documents") {
          $(this).addClass('cate_onglet_actif');
          $('.cate_name:contains("Documentation")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Archives")').closest('.forum_cate').addClass('cate_showed');
          if ($('.cate_showed').length < 1) {
            $('.forum_cate_none').css('display', 'block');
          }
        }

        /*Si l'onglet est Bureau on fait apparaître Assemblée Nationale*/
        else if (nomonglet == "Bureau") {
          $(this).addClass('cate_onglet_actif');
          $('.cate_name:contains("Assemblée Nationale")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Coin des Esthètes")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Sénat")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Modération")').closest('.forum_cate').addClass('cate_showed');
          $('.cate_name:contains("Administration")').closest('.forum_cate').addClass('cate_showed');
          if ($('.cate_showed').length < 1) {
            $('.forum_cate_none').css('display', 'block');
          }
        }
       
      });
    });



    Dis-moi si ça va bien ^^



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Ven 24 Mar 2017 - 2:11

    Merci encore pour tout ce travail Onyx, c'est super Very Happy
    N'étant pas fondateur, je vais transmettre tout ceci; je t'informe au plus vite !
    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Mer 29 Mar 2017 - 12:22

    Bonjour Onyx,

    Nous avons pu essayer : malheureusement la largeur des catégories / forums a été aggrandie par le changement. Pire encore, après avoir remis les Templates en place, l'ancien CSS et supprimé le Javascript, ce changement de taille reste toujours et je n'ai aucune idée de comment le remettre. C'était le seul souci de taille, mais je me retrouve un peu démuni Wink
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 29 Mar 2017 - 14:40

    Wow O_O

    C'est bizarre parce que je n'avais rien qui touchait à la taille, que cela soit dans le javascript, le CSS ou les templates... Tu es bien avec phpBB3, right?

    Tu peux me passer le CSS complet du forum?
    Et les templates?
    Aussi, est-ce qu'il y a d'autres javascripts sur le forum présentement?

    Edit : De ce que je vois avec l'inspecteur d'éléments, il y a des espaces qui se sont crées d'eux-mêmes dans les templates. Cela arrive parfois quand FA fait des mises à jour en même temps que vous faites des modifications et autres. Je vais aller fouiller dans les templates une fois que vous me les aurez passés pour voir ça ^^



    • Revenir en haut
    avatar
    Corvo
    MasculinAge : 30Messages : 32

    Mer 29 Mar 2017 - 22:01

    Je confirme, phpBB3 Wink

    Le CSS je t'ai tout passé.
    Les Templates je te les donnerai que j'y aurai de nouveau accès.
    Il y a d'autres codes Javascript, oui (je ne sais pas à quoi ils renvoient) : "Sauvegarde des posts en cours", "Catégorie rétractable", "Règlement", "Avatar du membre ayant posté en dernier sur l'index du forum".
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 29 Mar 2017 - 23:35

    Ok, j'attends les templates du coup ^^



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 4:28