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.

Le Deal du moment : -50%
Bracelet connecté Xiaomi Mi Band 4C à ...
Voir le deal
14.99 €

    Catégories en un bloc

    NyoTheNeko
    NyoTheNeko
    FémininAge : 27Messages : 5686

    Mar 1 Juil 2014 - 0:20

    Rappel du premier message :



    Catégories



    Ceci est un code de catégories crée suite à la Demande de Risa, ici.

    Pour phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    Les effets et images


    Le carré noir tout à gauche est l'image de nouveaux/pas de nouveaux messages et est en 75px de largeur et 90px de hauteur.
    Le second carré noir (légèrement transparent) est l'image de description de catégories et est en 130px de largeur et 70px de hauteur. Vous pouvez également le mettre en 90px de hauteur (pour qu'il soit de la même hauteur que le reste) mais vous devrez alors changer quelque peu sa position dans le CSS (cf. indications plus bas). Au passage de la souris, l'image va d'une opacité de 70% à 100%.
    Il y a un overflow: auto aussi bien sur la description que sur la liste des sous-forums. Cependant, sur certains navigateurs, la barre ne se voit pas pour les sous-forums (notamment Firefox).
    Tous les liens ont un effet au passage de la souris (le texte s'allonge et change de couleur).
    L'écriture spéciale utilisée est Nothing You Could Do. Vous retrouvez son link juste au-dessus de BEGIN catrow. Vous pouvez la changer/retirer, mais pensez alors à retirer ou changer chacune de ses apparitions dans le CSS (sous la forme de font-family: 'Nothing You Could Do')!

    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :
    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=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <table class="contour_cate">
      <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>
          <div class="nom_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="contour_forum">
            <div class="position_image">
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
            <div class="position_description">
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              <div class="liste_ss_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            </div>
            <div class="position_dernier_mess">
              <span class="nb_sujet_message">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span><br/>
              <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div>
          </div>
        </td>
      </tr>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Code HTML à placer dans chaque description de catégories :
    Code:
    <img src="http://i39.servimg.com/u/f39/09/03/38/36/cats10.png" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac mollis metus. Praesent non diam lacus. Aliquam erat volutpat. Praesent accumsan lorem sit amet aliquam consequat. Ut consequat, magna sit amet feugiat placerat, augue neque commodo diam, id mollis eros mauris pharetra leo. Duis consectetur mauris sapien, vitae luctus dui blandit nec. Duis vulputate accumsan semper. Fusce pulvinar elementum faucibus. Vestibulum sit amet accumsan ligula. Donec sit amet blandit erat, at tincidunt leo. Cras bibendum placerat commodo. Aenean sit amet risus vulputate nulla posuere euismod. Morbi et erat dictum, sollicitudin elit eget, consequat nisl. <br /><br />Quisque non lorem vel odio accumsan tempus ut vitae felis. Nulla ut tellus nec erat lacinia tincidunt vel a dui. Duis cursus aliquam nisi. In leo orci, faucibus vitae sapien non, faucibus varius dui. Sed cursus mauris et augue hendrerit molestie. Vivamus ut accumsan tellus. Nullam nec nisi eget diam congue tempus sit amet malesuada risus. Donec sodales, ipsum non porttitor consequat, massa tortor pellentesque metus, nec lobortis sem nulla vitae tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus tempor sem leo. Donec adipiscing leo vitae lorem pulvinar iaculis. Integer facilisis est in erat suscipit, eget ullamcorper sem molestie. Nullam neque tortor, semper ac diam quis, elementum hendrerit dui. Sed porta sapien ac ipsum egestas auctor.
    </p>

    Le CSS:
    Code:
    /********** DÉBUT CATÉGORIES **********/
    /* Entoure chaque catégorie */
    .contour_cate {
      /* Sa largeur */
      width: 800px;
      margin: auto;
      /* Couleur de fond */
      background-color: #CFBCD0;
      /* Espace entre chaque catégorie */
      margin-bottom: 10px;
    }

    /* Mise en place du titre de catégorie */
    .secondarytitle {
      width: 100%;
      text-align: center;
      /* Création du trait sous le titre */
      border-bottom: 3px solid #F0ECE0;
      box-shadow: 1px 0 #CFBCD0, -1px 0 #CFBCD0, 0 1px 2px grey;
    }

    /* Mise en forme du titre de catégorie */
    .secondarytitle h2 {
      /* Couleur */
      color: #F0ECE0;
      text-shadow: 1px 1px 2px grey;
      /* Police et taille */
      font-family: 'Nothing You Could Do';
      font-size: 50pt;
    }

    /* Div invisible qui entour chque forum */
    .contour_forum {
      width: auto;
      /* Sa hauteur */
      height: 90px;
      padding: 5px;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
    }

    /* Mise en place du titre de forum */
    .nom_forum {
      width: 70%;
      margin: auto;
      margin-top: 10px;
    }

    /* Mise en forme de titre de forum */
    a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
      /* Retire le gras et le emt en italique */
      font-weight: normal;
      font-style: italic;
      /* Couleur et taille */
      color: #EDECE8;
      font-size: 15pt;
      /* Préparation pour l'effet au hover */
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Titre de forum au passage de la souris */
    a.forumlink:hover {
      /* Couleur */
      color: #8A807F;
      /* On fait qu'il ne se sousligne pas */
      text-decoration: none !important;
      /* Effet */
      letter-spacing: 3px;
      transition: all ease 1s;
    }
     
    /* Positionnement de l'image nouveau/pas de nouveau message/verrouillé */
    .position_image {
      display: inline-block;
      vertical-align: top;
    }

    /* Positionnement de la description & liens vers les sous-forums */
    .position_description {
      /* Obligatoire pour mettre l'image en dehors du cadre */
      position: relative;
      display: inline-block;
      vertical-align: top;
      /* Taille du bloc */
      width: 350px;
      height: 85px;
      padding-top: 5px;
      /* La marge correspond à 20px + la largeur de l'image de description */
      margin-left: 155px;
      /* Couleur du texte puis  */
      color: #8A807F;
      background-color: #DAD6CA;
    }

    /* Positionnement de l'image de description par rapport à cette dernière */
    .position_description img {
      position: absolute;
      /* La valeur du top est à modifier selon la hauteur de l'image. Si la hauteur de l'image = la hauteur de la description, mettre top: 0px; Le left correspond à la taille de l'image + 10px de marge */
      top: 10px;
      left: -140px;
      /* Effet de transparence sur l'image. Ici elle st à 70% */
      opacity: 0.7;
      transition: all ease 1s;
    }

    /* Image de description au hover */
    .position_description img:hover {
      /* Effet: l'image passe à une opacité de 1 */
      opacity: 1;
      transition: all ease 1s;
    }

    /* Mise en forme du texte de description */
    .position_description p {
      /* Taille */
      width: 320px;
      height: 45px;
      padding: 5px;
      margin: auto;
      /* Couleur et alignement du texte */
      color: #8a807f;
      text-align: justify;
      overflow: auto;
    }

    /* Mise en forme de la liste des sousforums */
    .liste_ss_forum {
      /* Taille */
      width: 330px;
      height: 20px;
      margin: auto;
      margin-top: -10px;
      overflow: auto;
      text-align: justify;
    }

    /* Mise en forme des liens de la liste */
    .liste_ss_forum a {
      /* On retire le souslignement */
      text-decoration: none !important;
      /* Police taille puis couleur */
      font-family: 'Nothing You Could Do';
      font-size: 11pt;
      color: #BAA1C1;
      /* Préparation de l'effet */
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Liens de la liste au passage de la souris */
    .liste_ss_forum a:hover {
      /* Pas de souslignement */
      text-decoration: none !important;
      /* Couleur */
      color: #8A807F;
      /* Effet */
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Positionnement et mise en forme du dernier message */
    .position_dernier_mess {
      display: inline-block;
      vertical-align: top;
      /* Taille */
      width: 140px;
      height: 80px;
      padding: 5px;
      margin-left: 15px;
      /* Couleur du texte */
      color: #8A807F;
      text-align: center;
      /* Couleur de fond */
      background-color: #DAD6CA;
    }

    /* Mise en forme de X sujets - X messages */
    .nb_sujet_message {
      display: inline-block;
      /* Police et taille */
      font-family: 'Nothing You Could Do';
      font-size: 10pt;
      margin-bottom: 10px;
    }

    /* Mise en forme du lien vers le dernier sujet */
    .position_dernier_mess .gensmall a,.position_dernier_mess .gensmall a:link, .position_dernier_mess .gensmall a:active, .position_dernier_mess .gensmall a:visited {
      /* Retirer le souslignement, couleur puis préparation de l'effet */
      text-decoration: none !important;
      color: #BAA1C1;
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Mise en forme du lien vers le dernier sujet au passage de la souris */
    .position_dernier_mess .gensmall a:hover {
      /* Retirer le souslignement, couleur puis effet */
      text-decoration: none !important;
      color: #8A807F;
      letter-spacing: 1px;
      transition: all ease 1s;
    }
    /********** FIN CATÉGORIES **********/

    Pour mettre l'image de description à 90px et bien la placer


    Le code correspondant est celui-ci et vous verrez que tout est déjà indique dans le CSS::
    Code:

    /* Positionnement de l'image de description par rapport à cette dernière */
    .position_description img {
      position: absolute;
      /* La valeur du top est à modifier selon la hauteur de l'image. Si la hauteur de l'image = la hauteur de la description, mettre top: 0px; Le left correspond à la taille de l'image + 10px de marge */
      top: 10px;
      left: -140px;
      /* Effet de transparence sur l'image. Ici elle st à 70% */
      opacity: 0.7;
      transition: all ease 1s;
    }

    Cependant, pour être plus claire, voilà ce qui est à mettre exactement, si seul la hauteur de cette image change:
    Code:

    /* Positionnement de l'image de description par rapport à cette dernière */
    .position_description img {
      position: absolute;
      top: 0px;
      left: -140px;
      /* Effet de transparence sur l'image. Ici elle st à 70% */
      opacity: 0.7;
      transition: all ease 1s;
    }

    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.



    Solitude
    Solitude
    FémininAge : 46Messages : 292

    Mer 10 Déc 2014 - 15:18

    Merci beaucoup



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Catégories en un bloc - Page 3 Sign510
    Doctor Who
    Doctor Who
    MasculinAge : 28Messages : 160

    Jeu 18 Déc 2014 - 21:00

    Merci beaucoup ♥





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    Anonymous
    Invité

    Ven 19 Déc 2014 - 19:28

    Merci !
    Xenala
    Xenala
    FémininAge : 38Messages : 28

    Ven 26 Déc 2014 - 17:53

    Merci ^^
    Agnïeszka
    Agnïeszka
    FémininAge : 26Messages : 42

    Ven 9 Jan 2015 - 22:47

    merci
    Brookinette
    Brookinette
    FémininAge : 28Messages : 46

    Lun 12 Jan 2015 - 13:30

    J'aime beaucoup très beau travail :)
    Akina-chan
    Akina-chan
    FémininAge : 27Messages : 140

    Mer 28 Jan 2015 - 21:15

    J'adore ! Merci <3
    Junior.
    Junior.
    FémininAge : 24Messages : 78

    Mar 17 Fév 2015 - 2:59

    Merci ! **
    Paradéo
    Paradéo
    FémininAge : 23Messages : 21

    Mar 17 Fév 2015 - 11:55

    AWESOME ! *^*
    .lovely
    .lovely
    FémininAge : 24Messages : 54

    Mar 17 Fév 2015 - 18:21

    j'adore, merci
    sabritheducks_79
    sabritheducks_79
    FémininAge : 34Messages : 89

    Mar 24 Fév 2015 - 21:08

    C'est ce que je recherchais !!! parfait !!
    Girly
    Girly
    FémininAge : 23Messages : 116

    Mar 3 Mar 2015 - 18:39

    merci
    Azuriel
    Azuriel
    FémininAge : 26Messages : 129

    Mer 4 Mar 2015 - 13:44

    Merci ^^
    Aspartame
    Aspartame
    FémininAge : 27Messages : 6

    Mer 4 Mar 2015 - 20:02

    Merciiiiiii cheers
    Morphine.
    Morphine.
    FémininAge : 30Messages : 41

    Sam 14 Mar 2015 - 21:16

    Merci beaucoup **



    Catégories en un bloc - Page 3 30st6
    Raven Sumire
    Raven Sumire
    FémininAge : 27Messages : 43

    Dim 15 Mar 2015 - 22:47

    Merci beaucoup :3
    Selmacke
    Selmacke
    FémininAge : 31Messages : 100

    Lun 16 Mar 2015 - 14:46

    Merci à toi :)
    Dacina moe
    Dacina moe
    FémininAge : 43Messages : 171

    Jeu 19 Mar 2015 - 14:59

    Super, merci pour ce template
    Minze
    Minze
    FémininAge : 27Messages : 39

    Dim 29 Mar 2015 - 1:11

    merci
    Pooni
    Pooni
    FémininAge : 23Messages : 39

    Dim 5 Avr 2015 - 19:19

    Un rendu simple mais facilement personnalisable : C'est parfait.
    Merci à toi !
    Miku
    Miku
    MasculinAge : 28Messages : 70

    Sam 11 Avr 2015 - 18:25

    Merci !
    Tit_Kiwi
    Tit_Kiwi
    FémininAge : 29Messages : 26

    Ven 24 Avr 2015 - 15:12

    Merci pour ce code :heart:
    Acédie
    Acédie
    FémininAge : 22Messages : 91

    Ven 24 Avr 2015 - 15:34

    merci !
    Yasashi
    Yasashi
    FémininAge : 25Messages : 73

    Ven 24 Avr 2015 - 20:37

    Markiii !
    Reece.
    Reece.
    FémininAge : 21Messages : 34

    Mer 20 Mai 2015 - 15:27

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juil 2021 - 13:20