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

Autopassion.net le site dédié à l'automobile créé par ses utilisateurs

    Catégories en onglets et arrondis

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 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.



    avatar
    ShamRock
    FémininAge : 24Messages : 38

    le Jeu 4 Sep 2014 - 9:58

    Merci ~
    misakii
    FémininAge : 21Messages : 37

    le Jeu 4 Sep 2014 - 16:11

    Merci beaucoup
    ! Very Happy
    avatar
    Akemi Kura
    MasculinAge : 28Messages : 6

    le Sam 6 Sep 2014 - 18:27

    Merci du partage *w*
    avatar
    Susu-chan
    FémininAge : 28Messages : 78

    le Mer 10 Sep 2014 - 22:30

    Merci beaucoup =)
    avatar
    Ju' de fruits
    FémininAge : 25Messages : 82

    le Mer 10 Sep 2014 - 23:08

    Merci pour le partage !



    avatar
    Dark Dream
    FémininAge : 26Messages : 79

    le Jeu 11 Sep 2014 - 13:40

    yeah merci ♥
    avatar
    Angy38
    FémininAge : 48Messages : 231

    le Jeu 11 Sep 2014 - 17:00

    Merci !



    avatar
    Raween
    FémininAge : 26Messages : 112

    le Jeu 11 Sep 2014 - 19:01

    Merci beaucoup ^^
    avatar
    Laora || Peter
    FémininAge : 27Messages : 182

    le Jeu 11 Sep 2014 - 19:58

    Thanks you ♥



    avatar
    Riruka Nocturne
    FémininAge : 26Messages : 27

    le Sam 13 Sep 2014 - 12:31

    Oh sympa et efficace ! Merci
    avatar
    ( Lou' )
    FémininAge : 23Messages : 108

    le Sam 13 Sep 2014 - 20:19

    Merci **
    avatar
    Yooachte
    FémininAge : 26Messages : 54

    le Dim 14 Sep 2014 - 3:26

    Merci beaucoup !
    avatar
    Boou
    FémininAge : 26Messages : 50

    le Dim 14 Sep 2014 - 3:50

    Merci ! c:
    avatar
    Immortal
    FémininAge : 32Messages : 631

    le Dim 14 Sep 2014 - 18:08

    Merciiiiiiiiiiiiiiiiiiiiiiiiii ^^




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    avatar
    Tony`s
    MasculinAge : 27Messages : 64

    le Lun 15 Sep 2014 - 0:06

    merci bravo !!
    avatar
    Roromiya
    FémininAge : 101Messages : 111

    le Mar 16 Sep 2014 - 16:02

    Jveu voir e_e



    avatar
    Milka
    FémininAge : 30Messages : 112

    le Mer 17 Sep 2014 - 14:49

    Thanks ♥
    avatar
    Carpe.Diem
    FémininAge : 20Messages : 7

    le Jeu 18 Sep 2014 - 2:26

    Meerciiii!!!!
    avatar
    Apollo Justice
    MasculinAge : 22Messages : 1166

    le Jeu 18 Sep 2014 - 11:42

    Merci !




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    avatar
    Syndara
    FémininAge : 26Messages : 51

    le Ven 19 Sep 2014 - 15:41

    C'est tres beau. Merci ♥
    avatar
    picka234
    Age : 53Messages : 440

    le Ven 19 Sep 2014 - 16:37

    merci
    avatar
    Camy
    FémininAge : 18Messages : 63

    le Sam 20 Sep 2014 - 17:36

    Elles sont magnifiques !



    Le poro de service ^^
    avatar
    oceansoul
    FémininAge : 28Messages : 22

    le Dim 21 Sep 2014 - 10:49

    Merki :love:
    avatar
    Xelha
    FémininAge : 25Messages : 112

    le Dim 21 Sep 2014 - 12:22

    Merci



    avatar
    Shaolan
    MasculinAge : 27Messages : 107

    le Mar 30 Sep 2014 - 23:58

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 18:08