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.


    Catégories en 4 cases

    Partagez
    avatar
    Nemalus
    FémininAge : 20Messages : 358

    le Dim 28 Aoû 2016 - 18:05




    Catégories réalisées suite à la demande de .Loumpia.
    Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait sous phpBB2.

    Voici un aperçu :

    lien direct : www

    Remplacer l'intégralité du template index-box par :
    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 --><table width="100%" border="0" cellspacing="7" cellpadding="5" class="categories">
      <!-- BEGIN cathead -->
      <tr>
          <td class="{catrow.cathead.CLASS_CAT}" colspan="3" 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>
      </tr>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <tr>
          <td class="newpost" align="center" valign="middle">
            <span class="lastpost" class="gensmall">{catrow.forumrow.LAST_POST}<br/><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span></span><div class="details" class="gensmall"></div>
                              </td>                <td align="center" valign="middle">
                <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                    </td>
          <td valign="top" class="descriptions">
            <div class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
      <br/>
            <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center>
           
                  </td>
              <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></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 --><!-- END catrow -->

    Dans la feuille de style (CSS) ajouter le code :
    Code:
    .categories {
      margin: auto;
      width: 880px;
      background:transparent;
      }
      table.categories td a {
      color:#4861A3;
      transition:color linear 0.2s;
      -webkit-transition:color linear 0.2s;
      }
      table.categories td a:hover {
      color:#6274a3;
      transition:color linear 0.2s;
      -webkit-transition:color linear 0.2s;
      }
      table.categories td.newpost {
      border-radius:30px 30px 30px 30px;
      padding-left:10px;
      background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
      border: 3px solid #EA9EE0;
      height:105px;
      width:200px;
      }
      table.categories td span.lastpost {
      height:56px;
      width:127px;
      overflow:visible;
      }
      table.categories td.descriptions {
      border-radius:40px 40px 40px 40px;
      padding-right:10px;
      width:450px;
      background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
      border: 3px solid #EA9EE0;
      height:105px;
      }
      table.categories div.description {
      padding:5px;
      margin:5px 0px 5px 0px;
      overflow:auto;
      height:40px;
      text-align:justify;
      }
      table.categories div.forumlink {
      text-align:center;
      }
      .categories div.forumlink a{
      font-size:20px;
      color:pink;
      font-family:'Cookie';
      }
      table.categories div.details {
      text-align:center;
      }
      table.categories div.lastpost-avatar {
      height:105px;
      width:75px;
      background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
      border: 3px solid #EA9EE0;
      }
      table.categories div.lastpost-avatar img {
      height:105px;
      width:75px;
      padding: auto;
      margin: auto;
      }



    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
    Onyx
    FémininAge : 24Messages : 3132

    le Jeu 22 Déc 2016 - 6:21

    Salut!

    Ce coup-ci, il y avait quelques petites corrections que j'ai du effectué. Une balise était mal fermée dans la première colone. Aussi, (et c'est important), tu ne dois jamais utiliser de "id" pour un élément qui se répète dans la même page. Puisqu'il peut y avoir plusieurs catégories, tu dois utiliser seulement des "class", pas des "id".

    Sinon, c'est bon, donc je valide ce LS Wink

    Merci d partage ^^



    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Lun 23 Jan 2017 - 1:00

    Merci pour le partage ! :)
    avatar
    Kelalin
    FémininAge : 25Messages : 1890

    le Lun 23 Jan 2017 - 16:25

    Merci pour le partage !
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Mer 15 Fév 2017 - 1:16

    Jolie :)
    avatar
    Lakia
    FémininAge : 19Messages : 104

    le Mer 15 Fév 2017 - 17:40

    Merci ! ^^
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mer 5 Avr 2017 - 17:57

    Merci pour ce partage



    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mer 5 Avr 2017 - 18:13

    Coucou

    J'ai un petit problème les avatar ne s'affiche pas, ni les icônes verrouiller, ou news messages

    Merci



    avatar
    Kokola
    FémininAge : 24Messages : 23

    le Sam 13 Jan 2018 - 12:24

    Merci pour le partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 5:51