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 : -50%
-50% Baskets Nike Dunk Low
Voir le deal
64.99 €

    Catégories onglets - descriptions déroulantes

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 16 Juil 2014 - 21:54




    Catégories en onglets - descriptions déroulantes


    Voici un petit LS de catégories en onglets avec la descriptions des forums qui apparaissent en déroulant quand on survole l'image que j'ai fait pour la demande de Shuna et pour lequel j'ai utilisé ce tuto pour les onglets.

    Pour l'aperçu, c'est juste ici : https://2img.net/r/hpimg4/pics/934353Sanstitre2.png

    Ce code est en quatre parties.
    • Tout d'abord, nous allons installer le système d'onglets dans le template et voir comment mettre le nombre d'onglets que vous souhaitez.
    • Ensuite, nous allons activer le système d'onglets en mettant installant un code javascript.
    • Puis, nous allons mettre en forme les catégories à l'aide du CSS.
    • Finalement, nous allons mettre un code dans les descriptions de forums pour qu'il se déroule au survol de l'image (comme avec le design de super-héros de N-U).

    - Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
    - La version du forum est PHPBB2.

    Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



    1. Onglets des catégories (Template Index_Box)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BOX

    Puis, on va entièrement remplacer le template "Index_Box" par ceci :
    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>
     </td>
     </tr>
    </table>

    <center><div id="cate_tout"><div id="conteneur_onglets">
    <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
     <td class="ongleto" ><div>Onglet 1</div></td>
     <td class="ongleto"><div>Onglet 2</div></td>
     <td class="ongleto"><div>Onglet 3</div></td>
     <td class="ongleto"><div>Onglet 4</div></td>
     <td class="ongleto"><div>Onglet 5</div></td>
     <td class="ongleto"><div>Onglet 6</div></td>
     <td class="ongleto" style="border-right: none;"><div>Onglet 7</div></td>
    </tr></table>
    </div>
    <div id="conteneur_categories">
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="categorie"><table width="100%" border="0" cellspacing="0" cellpadding="0">
     <!-- END tablehead -->
     <!-- BEGIN cathead -->
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     <tr><td><table class="forum_bloc" width="100%" cellspacing="0" cellpadding="0"><tr>
     <td rowspan="2" class="forum_img_new" 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="forum_forumlink" valign="top">
     <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    </td>
     <td rowspan="2" class="forum_desc" align="center" valign="middle">
     {catrow.forumrow.FORUM_DESC}
     </td></tr><tr>
     <td class="forum_sous" valign="bottom">
     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
     </td>
     </tr></table></td></tr>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    </table></div>
    <!-- END tablefoot --><!-- END catrow -->
      </div></div></center>

    Il y a 7 catégories dans ce code et il m'en faut juste 5...
    Comment on fait pour rajouter des onglets?
    Ou en supprimer?
    Et d'ailleurs, comment on change leurs noms?

    Heureusement, ce n'est pas pas trop compliqué. On va commencer par retrouver la section des onglets dans le template, à savoir ce bout de code :
    Code:
    <div id="conteneur_onglets">
    <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
     <td class="ongleto" ><div>Onglet 1</div></td>
     <td class="ongleto"><div>Onglet 2</div></td>
     <td class="ongleto"><div>Onglet 3</div></td>
     <td class="ongleto"><div>Onglet 4</div></td>
     <td class="ongleto"><div>Onglet 5</div></td>
     <td class="ongleto"><div>Onglet 6</div></td>
     <td class="ongleto" style="border-right: none;"><div>Onglet 7</div></td>
    </tr></table>
    </div>

    C'est assez explicite, non?

    Vous pouvez voir que j'ai 7 catégories, donc 7 onglets. À vous de supprimer ou d'ajouter le nombre d'onglets que vous souhaitez.

    Il faut juste faire attention à un petit détail, à savoir que le dernier onglet a un style un peu différent. En effet, vous constaterez que mon dernier onglet a un « style="border-right: none;" ». Il faudrait faire attention à garder cette particularité du dernier onglet.

    Pour ce qui est de renommer un onglet pour le titre de votre catégorie, il suffit de remplacer la partie "Onglet #" par le nom que vous voulez.




    2. Activer les onglets (Javascript)


    Ensuite, pour que les onglets fonctionnent, il va falloir aller installer un petit javascript.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES CODES JAVASCRIPT

    Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.

    • Ensuite, on clique sur "Créer un nouveau Javascript"
    • On choisit un nom, comme "Catégories en onglets" par exemple.
    • On choisit le placement "Sur l'index"
    • Enfin, on met le javascript suivant et on enregistre :

    Code:
    $('document').ready(function()
       {
      if($('.categorie').size() > 1)
        {
          $('#conteneur_onglets').css( 'display' , 'block' );
          $('#conteneur_onglets .ongleto').click(function()
          {
             change_categorie( $('.ongleto', '#conteneur_onglets').index( this ) )
          });
          
          $('.ongleto:eq(0)').click();
    }
       });

       function change_categorie( index )
       {
          if( $('.categorie:eq(' + index + ')').size() != 0 )
          {
             $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

            
             $('.categorie').css( 'display' , 'none' );
             $('.categorie:eq(' + index + ')').fadeIn( 500 );
            
             $('.ongleto.actif').removeClass('actif');
             $('.ongleto:eq('+ index +')').addClass('actif');
          }
          else alert('Vous ne pouvez pas accéder à cette catégorie');
       }



    3. Mise en forme (CSS)


    Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /****************************************** DÉBUT CATÉGORIES ******************************************/

    /* Contient les catégories ET les conglets*/
    #cate_tout {
      background: #D8DBE6;
      text-align: center;
      color: #000000;
      font-family: New Times Roman;
      font-size: 13px;
      border: 8px double #1B2836;
      border-bottom: 7px double #1B2836;
      width: 700px;   /* Largeur des catégories*/
    }

    /* Contient les onglets */
    #conteneur_onglets {
      display: none;
      text-align: center;
      border-bottom: double 8px #1B2836;
    }
      
    /* Onglets */
    .ongleto {
      cursor: pointer;
      height: 50px;
      text-align: center;
      color: #26394d;
      background-color: #D8DBE6;
      border-right: solid 1px #1B2836;
      font-family: monotype corsiva;
      font-size: 20px;
      text-shadow: 0 0 1px black;
    }
    /* Onglet Actif */
    .actif {
      background: #353E47;
      cursor: default;
      color: #D8DBE6;
      text-shadow: 0 0 1px white;
    }

    /* Bloc qui entoure chaque catégorie */  
    .categorie {
    }

    /* Bloc qui entoure chaque forum */
    .forum_bloc {
      border-bottom: solid 1px #1B2836;
    }

    /* Bloc de l'image New Old Lock */
    .forum_img_new {
      width: 75px;
      height: 75px;
      padding: 2px;
    }
    /* Image New Old Lock */
    .forum_img_new img {
      width: 75px;
      height: 75px;
    }

    /* Bloc du titre du forum */
    .forum_forumlink {
      padding: 2px;
    }
    /* Titre du forum */
    .forumlink {
      margin-top: 5px;
      font-family: monotype corsiva;
      font-size: 28px;
      color: #143252!important;
      text-shadow: 0px 0px 2px #000000;
      letter-spacing: 0px;
      transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    /* Titre du forum Survolé*/
    .forumlink:hover {
      letter-spacing: 1px;
      text-decoration: none!important;
    }

    /* Bloc des sous-forums */
    .forum_sous {
      height: 25px;
      padding: 2px;
    }

    /* Bloc de l'image de forum et description */
    .forum_desc {
      width: 200px;
      height: 75px;
      padding: 2px;
    }
    /* Infobulle des descriptions des forums */
    .desc_infobulle {
      position: relative;
      margin: auto;
    }
    /* Image de forum */
    .desc_infobulle img {
      width: 200px;
      height: 75px;
      margin-bottom: -16px;
      z-index: 2;
    }
    /* Descriptions cachées des forums */
    .desc_desc {
      font-family: Times new roman;
      font-style: italic;
      font-size: 13px;
      position: absolute;
      color: #D8DBE6;
      top: 0px;
      right: 200px;
      width: 0px;
      height: 71px;
      padding: 0px;
      padding-bottom: 3px;
      padding-top: 3px;
      overflow: auto;
      text-align: justify;
      background-color: #2e3133;
      z-index: 1;
      transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    /* Descriptions visibles des forums */
    .desc_infobulle:hover .desc_desc {
      width: 400px;
      height: 69px;
      padding: 3px;
    }

    /****************************************** FIN CATÉGORIES ******************************************/



    4. Descriptions déroulantes au survol de l'image


    C'est bien beau, mais il nous manque toujours les descriptions des forums qui se déroule au passage de l'image du forum. Du coup, on va aller l'ajouter ^^

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > GÉNÉRAL
    > > > FORUM
    > > > > CATÉGORIES ET FORUMS

    Puis, vous aller pouvoir mettre ce code à la place de vos descriptions de forum. L'image de chaque forum peut être modifiée et la description en elle-même va à la place du charabia en latin :
    Code:
    <div class="desc_infobulle">
     <img alt="Survolez-moi ~" src="Url de l'image" />
     <div class="desc_desc">
     Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.
     </div>
    </div>

    C'est tout!

    À plus !


    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Onyx le Jeu 31 Mai 2018 - 2:08, édité 4 fois
    Anonymous
    Invité

    Mar 22 Juil 2014 - 18:24

    Parfait et hyper complet, merci Onyx *-*
    Kinjiro
    Kinjiro
    MasculinAge : 25Messages : 80

    Mer 23 Juil 2014 - 15:18

    Merci.



    Catégories onglets - descriptions déroulantes Signau11
    Raven Sumire
    Raven Sumire
    FémininAge : 30Messages : 43

    Jeu 24 Juil 2014 - 22:40

    Merci :3
    Zoé
    Zoé
    FémininAge : 24Messages : 189

    Ven 25 Juil 2014 - 14:44

    merci o:



    Catégories onglets - descriptions déroulantes 274643signaaaa
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Sam 26 Juil 2014 - 15:19

    Un très grand Merci :) .



    Patricia :)
    Cupcake-11
    Cupcake-11
    FémininAge : 26Messages : 31

    Dim 27 Juil 2014 - 12:52

    Merci bien
    Ohkawa
    Ohkawa
    FémininAge : 26Messages : 14

    Dim 27 Juil 2014 - 13:54

    Merci ! Ce code est sympa !



    Catégories onglets - descriptions déroulantes Sign_l11
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Dim 27 Juil 2014 - 21:21

    j'aime bien merci
    Dadash_Pearl
    Dadash_Pearl
    FémininAge : 32Messages : 40

    Lun 28 Juil 2014 - 15:04

    Merciii \o/
    Layla4
    Layla4
    FémininAge : 24Messages : 149

    Mar 29 Juil 2014 - 12:22

    Merci du partage !
    Demoniall
    Demoniall
    FémininAge : 23Messages : 74

    Mar 29 Juil 2014 - 16:10

    Superbe, merci !
    Benox
    Benox
    MasculinAge : 26Messages : 93

    Jeu 7 Aoû 2014 - 22:36

    merci

    Ysamar
    Ysamar
    FémininAge : 44Messages : 37

    Ven 8 Aoû 2014 - 11:12

    merci
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Mer 13 Aoû 2014 - 11:05

    Merci o/



    Just want to be yours.
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 206

    Mar 19 Aoû 2014 - 21:29

    Merci ^^
    Filou
    Filou
    FémininAge : 32Messages : 162

    Sam 23 Aoû 2014 - 20:37

    Codage sympa ^^
    Tyra'
    Tyra'
    MasculinAge : 28Messages : 87

    Lun 25 Aoû 2014 - 9:10

    Merci



    Catégories onglets - descriptions déroulantes Sans_t11
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Lun 25 Aoû 2014 - 20:24

    C'est Sympa, merci !
    Databar
    Databar
    MasculinAge : 30Messages : 142

    Mar 26 Aoû 2014 - 18:43

    merci
    Irissia87
    Irissia87
    FémininAge : 36Messages : 124

    Jeu 28 Aoû 2014 - 12:44

    merci!
    LilyPanda
    LilyPanda
    FémininAge : 27Messages : 10

    Ven 29 Aoû 2014 - 22:59

    Merci beaucoup beaucoup beaucoup !!! Very Happy
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Mar 2 Sep 2014 - 10:25

    Merci
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Mer 3 Sep 2014 - 9:42

    Très jolie
    The_Scream
    The_Scream
    FémininAge : 29Messages : 43

    Mer 3 Sep 2014 - 14:16

    Merciiiii !



    ~That's the hell said no ~

    Catégories onglets - descriptions déroulantes Dragoncopie
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:37