Le deal à ne pas rater :
Display Star Wars Unlimited Ombres de la Galaxie : où l’acheter ?
Voir le deal

Partagez

Codes caté

Admin
AdminAdmin
Messages : 25
Date d'inscription : 20/05/2014
https://maru-test.kanak.fr
MessageSujet: Codes caté  Codes caté EmptySam 31 Mai - 16:56

Je garde ici le message de notre aimable dame qui a réalisé le code des caté, au cas où on aurait besoin :


NyoTheNeko a écrit:
Oh alors je l'ai retiré, pas de problème! =D

Voici donc le code du template index_box: attention, je le donne 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>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
              <td>
                <div class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</div>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <div class="catte_titre">
              <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}>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
          <div class="sous_forum_contour">
            <div class="title_forum">
              <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </span>
              </h{catrow.forumrow.LEVEL}>
            </div>
      <div class="contour_description">
              <img class="img_cate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              <div class="decription">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              </div>
            </div>
            <div class="forum_liens">
              <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            </div>
            <div class="position_last_mess">
              <div class="dernier_mess">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </div>
            </div>
          </div>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
                          </td>
              </tr>
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Je pense que tu l'auras deviné, l'image de droite est nulle autre que l'image de description! =D Du coup, il te suffit de mettre ce code-ci dans chacune des descriptions de catégories pour avoir l'effet voulu:

Code:
    <img src="http://image.noelshack.com/fichiers/2014/22/1401461234-show-youa-fewthangs02.png" />
    <h3>
      Titre Quelconque -
    </h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet erat ac arcu hendrerit posuere. Donec eu justo vulputate, ultrices quam non, cursus dolor. Nam vitae ornare nulla. Vestibulum sit amet diam mi. Cras quis erat et purus lobortis consectetur. Morbi dui tortor, consectetur scelerisque diam non, sagittis commodo est. Suspendisse ultrices nibh id lobortis aliquet. Phasellus faucibus quam vitae bibendum blandit. Sed tristique nec lacus id tempus. Donec ornare, orci sed sagittis laoreet, tellus quam ornare nisl, in pretium nibh odio vitae neque. Praesent sit amet lectus vehicula, ornare justo in, pulvinar nisl. Nunc ligula lectus, sagittis at vehicula eget, laoreet id odio. Quisque a cursus neque. Nullam non semper lectus. Suspendisse ut neque purus. Etiam in iaculis ligula.
    </p>

Donc attention: p pour la description, un h3 pour le titre et l'image bien sûr! ^^

Et voici enfin le CSS:

Code:
    /*********** DÉBUT CATÉS ***********/
    /* Couleur de fond d'intérieur du forum À retirer si vous avez prévu autre chose. */
    .bodyline {
      background-color: #DCE4E1;
    }

    /* Entoure les sousforums: va permettre de positionner les hoses de façon absolue plus tard. */
    .sous_forum_contour {
      position: relative;
      height: 230px;
      width: auto;
      padding: 30px;
    }

    /* Permet de retirer les bords et la couleur de fond de base. */
    .forumline {
        background: none;
        border: none;
    }

    /* Mise en forme du titre de catégorie */
    .secondarytitle h2 {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 18pt;
      color: black;
      font-weight: bold;
    }

    /* Mise en forme du titre de forum */
    .title_forum {
      width: 490px;
      text-align: right;
      margin-bottom: 10px;
    }

    /* Permet d'avoir la bonne couleur de lien */
    .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited {
      color: black;
      font-size: 14pt;
      font-weight: bold;
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Titre du forum au passage de la souris */
    .title_forum .forumlink a:hover {
      color: #51A8AC;
      letter-spacing: 3px;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Crée la petite barre bleue qui suit le titre du forum */
    .title_forum:after {
      content:"";
      display: inline-block;
      height: 1px;
      width: 100px;
      margin: 5px;
      /* Couleur de la barre */
      background-color: #51A8AC;
      /* Permet de lui donner une ombre */
      box-shadow: 2px 2px 1px black;
    }

    /* Permet d'avoirle carré blanc qui entoure la description */
    .contour_description {
      overflow: visible;
      width: 455px;
      height: 140px;
      padding: 20px;
      /* Couleur puis bordure de l'élément */
      background-color: #FFFFFF;
      border: 1px solid #51A8AC;
    }

    /* Permet de placer la description correctement. */
    .decription {
      width: 340px;
      height: 100px;
      display: inline-block;
      vertical-align: top;
    }

    /* Mise en forme de la description */
    .decription p {
      width: 340px;
      height: 50px;
      padding: 5px;
      overflow: auto;
      /* Couleur du texte */
      color: grey;
      margin: 0px;
      /* Police du texte puis sa taille */
      font-family: 'Times New Roman';
      font-size: 10pt;
      text-align: justify;
      /* Permet de donner une ombre au texte */
      text-shadow: 1px 1px 1px grey;
    }

    /* Mise en forme du titre dans la description */
    .decription h3 {
      font-weight:normal;
      margin: 0px;
      margin-left: 20px;
      text-shadow: 1px 1px 1px grey;
    }

    /* Permet de placer l'image de catégorie à droite. */
    .decription img {
      position: absolute;
      right: 60px;
      bottom: 47px;
    }

    /* Place les liens de sous-forums */
    .forum_liens {
      position: absolute;
      bottom: 90px;
      left: 160px;
      width: 376px;
      height: 16px;
      padding: 2px;
      /* Couleur de fond des liens */
      background-color: #51A8AC;
      overflow: auto;
    }

    /* Permet de donner leur couleur aux liens de sous-forums */
    .forum_liens a, .forum_liens a:link, .forum_liens a:visited, .forum_liens a:hover {
      color: white;
      text-decoration: none !important;
    }

    /* Positionnement du dernier message */
    .position_last_mess {
      position: absolute;
      bottom: 20px;
      left: 300px;
      text-align: center;
      font-size: 9pt;
    }

    /* Mise en forme du dernier message */
    .dernier_mess {
      width: 175px;
      height: 40px;
      padding: 5px;
      /* Couleur de fond */
      background-color: #C6C8DC;
      /* Alignement du texte */
      text-align: right;
      /* Permet de donner au texte une ombre. */
      text-shadow: 1px 1px 1px grey;
    }
   
    /*********** FIN CATÉS ***********/

Tout est bien commenté, donc j'espère que ça ira ^^

Sinon, bien sûr, ma boîte à MP est toujours ouverte! ^w^ Par contre, fais attention, parce que je serais absente deux mois (juillet-septembre) cet été, et je ne suis pas sûre si j'aurais internet. Dans ce cas, vérifie les absences et poste dans les problèmes ici à la place Wink

Et si c'est terminé, il suffit de mettre le vue et terminé! <3

Codes caté

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Modéoheim-