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 blanches et bleues avec avatar du dernier posteur

    Partagez
    avatar
    Lunayine
    FémininAge : 21Messages : 55

    le Jeu 12 Mar - 18:34

    Rappel du premier message :


    Bonjour à tous,

    Voici un LS de catégories réalisé en réponse à la demande de .loumpia


    Aperçu - Live - Version : PHBB2


    Quelques petites précisions
    Couleur des liens : #4861A3
    Couleurs des liens au survol : #6274a3
    Image New/No New/Lock : 137*48 px ( redimensionnement auto )
    Avatar du dernier posteur : 100*160 px ( redimensionnement auto )
    Bleu clair correspondant au fond du forum : #d5e7f5 (à mettre dans le PA si vous voulez cette couleur)
    Séparation des liens de sous-forums : ✩
    Les tailles de polices sont celles que vous avez définies dans votre PA ( la moyenne pour les descriptions et la petite pour les liens et message du dernier posteur )
    Pour obtenir la même police pour les titres, allez lire ce sujet

    Attention, si vous avez déjà modifié votre template index_body par le passé, veillez à le sauvegarder quelque part afin de pouvoir le récupérer si vous vous rendez compte que vous souhaitiez garder certaines de vos modifications en plus de ces nouvelles catégories.
    ( Pensez à sauvegarder vos templates modifiés de manière générale )




    Code à ajouter à votre feuille de style CSS (Panneau d'administrateur > Affichage > Images et Couleurs > Couleurs > CSS) :
    Code:
    #categories {
      background:transparent;
      }
      table#categories td {
      background:#FFFFFC;
      }
      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 img.imgnewpost {
      width:137px;
      height:48px;
      }
      table#categories td.newpost {
      border-radius:40px 0px 0px 40px;
      padding-left:10px;
      }
      table#categories td span#nbposts {
      text-transform:uppercase;
      font-size:9px;
      }
    table#categories td span#lastpost {
      height:56px;
      width:127px;
      overflow:visible;
      }
      table#categories td.descriptions {
      border-radius:0px 40px 40px 0px;
      padding-right:10px;
      }
      table#categories div.description {
      padding:5px;
      margin:5px 0px 5px 0px;
      overflow:auto;
      height:80px;
      text-align:justify;
      }
      table#categories div.forumlink {
      text-align:center;
      margin-top:-20px;
      }
      #categories div.forumlink a{
      font-size:20px;
      color:darkblue;
      font-family:'Indie Flower';
      }
      table#categories div#details {
      text-align:center;
      }
      table#categories div.lastpost-avatar {
      height:120px;
      width:80px;
      }
      table#categories div.lastpost-avatar img {
      height:120px;
      width:80px;
      }

    Code à enregistrer dans le template Index_box après avoir effacé son contenu (Panneau d'administration > Affichage > Templates > Général > Index_box Affichage des catégories) :
    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 class="forumline" width="100%" border="0" cellspacing="7" cellpadding="5" id="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">
             <img class="imgnewpost" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                      <span id="lastpost" class="gensmall"><br /><br />{catrow.forumrow.LAST_POST}</span>
          </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" width="100%" class="descriptions">
                      <div class="forumlink"><link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css' /><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />                  <span id="nbposts" class="gensmall"><b>{catrow.forumrow.POSTS}</b> messages dans <b>{catrow.forumrow.TOPICS}</b> sujets</span></div>
                      <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
             <div id="details" class="gensmall">
                              <span id="lienssousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                <script type="text/javascript">
                                  jQuery('#lienssousforums').html(jQuery('#lienssousforums').html().replace(/, /g,' ✩ ')).removeAttr('id');
                                </script>
                              </span>
             </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 --><!-- END catrow --><div style="color: rgba(0,0,0,0.2); font-weight: bold; font-size: 8px; margin-top: -10px; text-align: center;">©015 Catégories by Lunay on <a href="http://www.never-utopia.com/">NU</a></div>

    « Je ne comprends pas, rien ne s'affiche dans la deuxième case ! »
    Vous devez avoir activé l'affichage de l'avatar du dernier posteur dans votre PA si vous souhaitez qu'il s'affiche. Pour ce faire : Panneau d'Administration > Affichage > Page d'accueil > Structure et hiérarchie > Hiérarchie > Afficher les avatars dans la colonne "Derniers messages" : Oui
    De plus, sur cette même page vous devez choisir la hiérarchie niveau moyen sans séparation des catégories, c'est à dire la deuxième option.


    Je rappelle que le copyright est obligatoire et que vous avez la possibilité de demander de l'aide pour personnaliser votre code dans cette partie. De plus, si vous rencontrez un problème avec ce code, cette partie vous permettra de demander de l'aide.


    Un petit merci ou commentaire est toujours le bienvenu ^^


    Dernière édition par Lunayine le Ven 12 Juin - 9:43, édité 2 fois
    avatar
    Equestria
    FémininAge : 21Messages : 118

    le Ven 10 Juil - 2:53

    merci
    avatar
    petit lu
    FémininAge : 26Messages : 177

    le Ven 10 Juil - 9:03

    Merci du partage c'est très joli <3
    avatar
    Pudding Morphina
    FémininAge : 24Messages : 28

    le Ven 10 Juil - 15:25

    ce tutoriel est super, ça fait un p'tit bout de temps que j'en cherchais un comme ça **
    avatar
    Pixye
    FémininAge : 25Messages : 10

    le Ven 10 Juil - 17:17

    Merci ♥
    avatar
    Wanda Maximoff
    FémininAge : 24Messages : 80

    le Ven 10 Juil - 20:20

    C'est magnifique. *-* Merci ! ♥
    avatar
    Flaura
    FémininAge : 15Messages : 152

    le Ven 10 Juil - 20:28

    Merci !
    avatar
    Lilith Aube
    FémininAge : 32Messages : 488

    le Sam 11 Juil - 8:29

    Un grand merci Wink
    avatar
    Lauria
    FémininAge : 17Messages : 39

    le Dim 12 Juil - 16:57

    Merci
    Little--Angel
    FémininAge : 22Messages : 46

    le Dim 12 Juil - 22:41

    Merci Very Happy C'est magnifique :)
    avatar
    .loumpia
    FémininAge : 26Messages : 204

    le Sam 18 Juil - 20:41

    :love:
    avatar
    JEG Elo
    FémininAge : 27Messages : 42

    le Lun 20 Juil - 16:58

    Merci beaucoup pour ta création
    avatar
    luna-chan86
    FémininAge : 29Messages : 193

    le Mar 21 Juil - 17:34

    Merci j'aime beaucoup :)
    avatar
    .cranberry
    FémininAge : 26Messages : 50

    le Sam 25 Juil - 13:22

    J'aime ♥
    avatar
    Kitty Kat.
    FémininAge : 24Messages : 86

    le Lun 27 Juil - 8:42

    J'aime beaucoup !
    avatar
    Liia
    FémininAge : 23Messages : 91

    le Lun 27 Juil - 11:49

    Cool merci x)
    avatar
    Heryon
    FémininAge : 24Messages : 23

    le Lun 27 Juil - 16:19

    Merci beaucoup ~
    avatar
    effyi
    FémininAge : 23Messages : 41

    le Mer 29 Juil - 17:04

    merci beaucoup pour ce magnifique tuto !
    avatar
    DarkMasamune
    FémininAge : 26Messages : 57

    le Jeu 30 Juil - 16:32

    C'est super classe! Merci :)
    avatar
    Little-myrt
    FémininAge : 20Messages : 41

    le Dim 2 Aoû - 23:55

    Merci, c'est vraiment joli !
    avatar
    Kelalin
    FémininAge : 26Messages : 1958

    le Lun 3 Aoû - 9:08

    Merci pour le partage ! ヽ(;▽;)ノ
    avatar
    Istina
    FémininAge : 24Messages : 111

    le Lun 3 Aoû - 20:01

    Merci :)
    avatar
    EAVENN
    FémininAge : 22Messages : 162

    le Mar 4 Aoû - 12:13

    merci
    Quinnie
    MasculinAge : 22Messages : 54

    le Mar 4 Aoû - 19:30

    Merci du partage *-*
    avatar
    pawnee
    FémininAge : 29Messages : 21

    le Mer 5 Aoû - 1:22

    j'aime beaucoup ! merci !
    avatar
    petit lu
    FémininAge : 26Messages : 177

    le Mer 5 Aoû - 9:17

    Merci du partage le code est vraiment magnifique ♥
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Oct - 15:36