AccueilRechercherS'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.


    Catégories en onglets et arrondis

    NyoTheNeko
    NyoTheNeko
    FémininAge : 25Messages : 5018

    le Mar 10 Juin 2014 - 23:55

    Rappel du premier message :



    Catégories



    Ceci est un code de catégories crée suite à la Demande de swagg, ici et réutilise le tuto de vic_le_faucheur, que vous trouverez ici.

    CSS3 & HTML5 ▬ Ce que ça donne


    Les sous-forums défilent. Il y a des effets sur les titres de catégories et des forums.

    Dimension des images


    L'image de nouveau, pas de nouveau ou verrouillé est en 140px*40px.
    L'image de description de catégorie est en 100px*70px.
    Leur arrondis sont fait depuis le CSS.
    Vous pouvez modifier la police des titres en changeant le link présent dans le code (ou en le retirant) et en changeant toutes les occurrences de la police (ici Dancing Script) dans le CSS.

    Le Code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Ceci est tout le template! /!\ :
    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>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    <div id="conteneur_onglets_cate">
      <div class="onglet_cate">Nom onglet 1</div>
      <div class="onglet_cate">Nom onglet 2</div>
      <div class="onglet_cate">Nom onglet 3</div>
      <div class="onglet_cate">Nom onglet 4</div>
      <div class="onglet_cate">Nom onglet 5</div>
    </div>
    <div id="conteneur_cate"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
              <td>
          <div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
              </td>
       </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>
              <td>
          <!-- BEGIN inc -->
          <!-- END inc -->
                <div class="titre_forum">
                  <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}>
                </div>
                <div class="conteneur_forum">
                  <div class="description_forum">
                    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                  </div>
                  <div class="conteneur_stats">
                    <img class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    <div class="stats">
                      {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                    </div>
                    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div>
                  <div class="conteneur_liens_ss_forums">
                    <marquee onmouseover="this.stop();" onmouseout="this.start();">
             <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                    </marquee>
                  </div>
                </div>
              </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 -->
      </div><!-- END catrow --></div>

    Petite précision: les noms des onglets pour les catégories sont à mettre DANS le template, c'est cette partie (c'est aussi ce link qui permet de changer la police d'écriture!):
    Code:
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    <div id="conteneur_onglets_cate">
      <div class="onglet_cate">Nom onglet 1</div>
      <div class="onglet_cate">Nom onglet 2</div>
      <div class="onglet_cate">Nom onglet 3</div>
      <div class="onglet_cate">Nom onglet 4</div>
      <div class="onglet_cate">Nom onglet 5</div>
    </div>

    Dans les Descriptions de Catégories, mettez ceci:
    Code:
    <img src="http://i39.servimg.com/u/f39/09/03/38/36/untitl10.png" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis turpis augue, vel eleifend massa rutrum eget. Nam interdum convallis lacus, a convallis est egestas in. Aenean accumsan vel neque id auctor. Morbi lobortis arcu ante, eu rhoncus orci ullamcorper at. Duis mollis felis magna, at condimentum urna posuere id. Aliquam lacus neque, ornare eu aliquet in, ultricies non felis. Quisque ultricies lacus a lacus ornare hendrerit. Vestibulum laoreet sollicitudin odio vitae lobortis. Maecenas nisl justo, dignissim non rutrum non, commodo non nunc. Sed volutpat ac massa nec volutpat. Vestibulum porta elementum sapien non ultrices. Duis elementum nisi vel velit pharetra luctus. Sed vel neque tristique, congue diam quis, pretium nisl. Vivamus convallis sed nunc at tincidunt. Donec sed quam at nisi sodales faucibus sed sed metus. Suspendisse id mauris nunc. Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.
    </p>

    CSS:
    Code:
    /********* DÉBUT CATÉGORIES ***********/
    /* Mise en place du conteneur d'onglets */
    #conteneur_onglets_cate {
      /* Taille (largeur et hauteur) */
      width: 90%;
      height: 25px;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 30px;
      overflow: visible;
      /* Couleur de fond */
      background-color: rgba(178, 178, 178, 0.8);
      display: none;
      text-align: center;
    }

    /* Mise en forme des noms d'onglets */
    #conteneur_onglets_cate div {
      display: inline-block;
      verctical-align: bottom;
      position: relative;
      bottom: 25px;
      margin: 10px;
      /* Couleur */
      color: #3C4A55;
      font-size: 16pt;
      /* Police d'écriture */
      font-family: 'Dancing Script';
      transition: all ease 1s;
    }

    /* Effet au passage de la souris sur les noms d'onglets */
    #conteneur_onglets_cate div:hover {
      color: #43586B;
      transition: all ease 1s;
    }
     
    /* CSS pour les onglets */
    .onglet_cate {
      cursor: pointer;
    }

    /* CSS pour retirer le contour de catégories */
    .categorie .forumline {
      border: 0px solid;
    }

    /* Mise en pace du titre de catégorie */
    .secondarytitle {
      width: 100%;
      text-align: center;
    }

    /* Mise en forme du titre de catégorie */
    .secondarytitle h2 {
      color: #3C4A55;
      font-size: 20pt;
      font-family: 'Dancing Script';
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Effet au passage de la souris sur le titre de catégorie */
    .secondarytitle h2:hover {
      letter-spacing: 3px;
      transition: all ease 1s;
    }

    /* Mise en forme du titre de sous-forum 8position) */
    .titre_forum {
      width: 90%;
      margin: auto;
      margin-bottom: -10px;
      text-align: left;
    }

    /* Mise ne forme du lien de sous-forum */
    a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
      /* Couleur, taille et police */
      color: #141A28;
      font-size: 16pt;
      font-family: 'Dancing Script';
      /* Mise ne place de l'effet */
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Effet au passage de la souris sur les liens de sous-forum */
    a.forumlink:hover {
      color: #45576B;
      text-decoration: none !important;
      letter-spacing: 2px;
      transition: all ease 1s;
    }

    /* Contour des sous-forums */
    .conteneur_forum {
      width: 730px;
      margin: auto;
      padding: 10px;
      border-radius: 20px;
      /* Couleur de fond */
      background-color: rgba(178, 178, 178, 0.8);
    }

    /* Countour de la description de sous-froums */
    .description_forum {
      display: inline-block;
      vertical-align: top;
      /* Taille */
      width: 440px;
      height: 80px;
      padding: 10px;
      margin: 5px;
      margin-left: 60px;
      border-radius: 10px;
      /* Couleur de fond */
      background-color: #E6E3DE;
      overflow: hidden;
    }

    /* Position de l'image dans la description */
    .description_forum img {
      float: left;
      margin-right: 10px;
      border-radius: 5px;
    }

    /* Mise en forme du texte dans la description */
    .description_forum p {
      width: 320px;
      height: 70px;
      margin: 0px;
      overflow: auto;
      /* Couleur du texte */
      color: #43586B;
      text-align: justify;
    }

    /* Conteneur des statistiques et dernier message */
    .conteneur_stats {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      /* Taille */
      width: 140px;
      height: 90px;
      padding-bottom: 10px;
      margin: 5px;
      overflow: hidden;
      border-radius: 10px;
      /* Couleur de fond */
      background-color: #E6E3DE;
    }

    /* Arrondi sur l'image de nouveau/pas de nouveaux/verrouillé */
    .conteneur_stats .folder_img {
      border-radius: 10px;
    }

    /* Mise en forme de X messages dans X sujets */
    .conteneur_stats .stats {
      text-align: center;
      /* Couleur */
      color: #43586B;
      font-size: 8pt;
      font-family: 'Dancing Script';
    }

    /* Mise en forme du lien du dernier sujet */
    .conteneur_stats .gensmall a {
      color: #3C4A55;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Effet au hover */
    .conteneur_stats .gensmall a:hover {
      color: #B2B2B2;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Conteneur des liens déflants du sous-forum */
    .conteneur_liens_ss_forums {
      /* Taille */
      width: 610px;
      height: 15px;
      padding-top: 5px;
      margin: auto;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 10px;
      /* Couleur de fond */
      background-color: #E6E3DE;
    }

    /* Mise en forme des liens vers les sous-forums */
    .conteneur_liens_ss_forums a {
      color: #3C4A55;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Effet au Hover */
    .conteneur_liens_ss_forums a:hover {
      color: #B2B2B2;
      text-decoration: none !important;
      transition: all ease 1s;
    }
    /********* FIN CATÉGORIES ***********/

    Le code Javascript (cf tuto de vic_le_faucheur) à mettre dans  Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript et tu coches "Sur l'index"!
    Code:
    $('document').ready(function()
          {
          if($('.categorie').size() > 1)
            {
              $('#conteneur_onglets_cate').css( 'display' , 'block' );
              $('#conteneur_onglets_cate .onglet_cate').click(function()
              {
                change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
              });
            
             $('.onglet_cate:eq(0)').click();
        }
          });

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

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

    N'hésitez pas à aller remercier vic aussi pour son travail sur son Tuto!

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    mace
    mace
    MasculinAge : 29Messages : 15

    le Ven 20 Fév 2015 - 23:38

    Merci, je vais essayer.
    FlipFlap
    FlipFlap
    FémininAge : 36Messages : 59

    le Sam 21 Fév 2015 - 17:53

    Merci en espérant que je vais m'en sortir xD
    Féréole
    Féréole
    FémininAge : 32Messages : 55

    le Lun 23 Fév 2015 - 12:14

    Merci !(:
    Shadaan
    Shadaan
    FémininAge : 27Messages : 80

    le Lun 23 Fév 2015 - 13:59

    Génial ! Merci <3



    Catégories en onglets et arrondis - Page 12 897455signnu
    Kortyx
    Kortyx
    MasculinAge : 29Messages : 81

    le Lun 23 Fév 2015 - 14:15

    Simple mais jolie. J'aime bien, merci !
    Chadot
    Chadot
    FémininAge : 31Messages : 176

    le Mar 24 Fév 2015 - 22:04

    Je vais tester de suite, merci
    Anonymous
    Invité

    le Mar 24 Fév 2015 - 23:42

    Merci du partage.
    Glow
    Glow
    FémininAge : 19Messages : 93

    le Mer 25 Fév 2015 - 1:48

    Cool, merci !
    Kokoa
    Kokoa
    FémininAge : 20Messages : 57

    le Mer 25 Fév 2015 - 19:51

    Merci ! :)



    Catégories en onglets et arrondis - Page 12 Cheerleader_by_CookiemagiK

    « Tous cet espace pour moi ? Fallait pas ! »
    Vee
    Vee
    FémininAge : 20Messages : 24

    le Jeu 26 Fév 2015 - 20:39

    merci
    AyaseNeko
    AyaseNeko
    FémininAge : 23Messages : 55

    le Ven 27 Fév 2015 - 17:27

    mercii
    Théine
    Théine
    MasculinAge : 38Messages : 24

    le Sam 7 Mar 2015 - 6:02

    merci
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 33Messages : 84

    le Lun 9 Mar 2015 - 13:29

    Merci ^^



    .
    Angie H.-Carter
    Angie H.-Carter
    FémininAge : 36Messages : 718

    le Lun 9 Mar 2015 - 18:40

    merci j'adhère trop ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    Caine Lornan
    Caine Lornan
    MasculinAge : 38Messages : 78

    le Lun 9 Mar 2015 - 20:09

    Thanks
    Koki
    Koki
    FémininAge : 28Messages : 43

    le Lun 9 Mar 2015 - 21:39

    merci !
    mikalus
    mikalus
    MasculinAge : 48Messages : 92

    le Jeu 12 Mar 2015 - 15:00

    Gracie mille...



    Catégories en onglets et arrondis - Page 12 766500banpub
    Maag
    Maag
    FémininAge : 20Messages : 31

    le Sam 14 Mar 2015 - 16:01

    Super beau merci~
    Alyz
    Alyz
    MasculinAge : 26Messages : 15

    le Sam 14 Mar 2015 - 16:46

    merci
    pixelman
    pixelman
    FémininAge : 39Messages : 241

    le Dim 15 Mar 2015 - 11:12

    Merci ^^




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Morrigan
    Morrigan
    FémininAge : 26Messages : 22

    le Dim 15 Mar 2015 - 18:36

    Je fais aussi ma curieuse par ici! Merci beaucoup ♥
    Ellen Lesley
    Ellen Lesley
    FémininAge : 105Messages : 76

    le Lun 16 Mar 2015 - 20:44

    Merci ! J'aime beaucoup cet effet
    Bloody Horizon
    Bloody Horizon
    FémininAge : 22Messages : 25

    le Mar 17 Mar 2015 - 19:51

    Ouah merci *-*
    Yukiji
    Yukiji
    MasculinAge : 19Messages : 115

    le Lun 23 Mar 2015 - 21:28

    Merci ~



    (c) sygea
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 39Messages : 82

    le Lun 23 Mar 2015 - 22:01

    Génial! Quel gain de place ! Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Sam 19 Oct 2019 - 8:38