AccueilDernières imagesRechercherS'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 :
Cartes Pokémon 151 : où trouver le ...
Voir le deal

    Catégories en 4 cases

    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    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.
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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 ^^



    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Lun 23 Jan 2017 - 1:00

    Merci pour le partage ! :)
    Anonymous
    Invité

    Lun 23 Jan 2017 - 16:25

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

    Mer 15 Fév 2017 - 1:16

    Jolie :)
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Mer 15 Fév 2017 - 17:40

    Merci ! ^^
    ptite_perle
    ptite_perle
    FémininAge : 60Messages : 127

    Mer 5 Avr 2017 - 17:57

    Merci pour ce partage



    categories - Catégories en 4 cases Signature
    ptite_perle
    ptite_perle
    FémininAge : 60Messages : 127

    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



    categories - Catégories en 4 cases Signature
    Kokola
    Kokola
    FémininAge : 29Messages : 23

    Sam 13 Jan 2018 - 12:24

    Merci pour le partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2024 - 17:35