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 : -20%
Xiaomi Poco X3 Pro (256 Go) à 240€
Voir le deal
240 €

    Catégories blanches et bleues avec avatar du dernier posteur

    Lunayine
    Lunayine
    FémininAge : 23Messages : 55

    Jeu 12 Mar 2015 - 19: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 2015 - 11:43, édité 2 fois
    mijako
    mijako
    FémininAge : 29Messages : 83

    Dim 1 Jan 2017 - 8:03

    merci~~
    packcraft
    packcraft
    MasculinAge : 34Messages : 3

    Mar 3 Jan 2017 - 21:39

    merci !
    Titia
    Titia
    FémininAge : 29Messages : 63

    Lun 9 Jan 2017 - 13:57

    Merci du partage, très jolie code



    Catégories blanches et bleues avec avatar du dernier posteur - Page 11 Pica1ctmp
    Erydrin
    Erydrin
    FémininAge : 27Messages : 69

    Dim 12 Mar 2017 - 12:41

    Merci !
    Jane Bingum
    Jane Bingum
    FémininAge : 23Messages : 83

    Mar 21 Mar 2017 - 18:18

    merci!
    Dearborn
    Dearborn
    FémininAge : 27Messages : 112

    Mer 22 Mar 2017 - 23:24

    Merci!
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 27Messages : 45

    Ven 24 Mar 2017 - 18:03

    Merci ♥ ♥ ♥



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    charlint
    charlint
    FémininAge : 21Messages : 30

    Dim 26 Mar 2017 - 20:59

    merci
    Aaw.
    Aaw.
    FémininAge : 24Messages : 29

    Lun 27 Mar 2017 - 12:37

    Merciii !
    Raween
    Raween
    FémininAge : 29Messages : 112

    Lun 27 Mar 2017 - 13:17

    merci beaucoup :)
    HellJoa
    HellJoa
    FémininAge : 28Messages : 23

    Mar 4 Avr 2017 - 11:15

    Merci beaucoup pour ce partage !
    Melle Lena
    Melle Lena
    FémininAge : 46Messages : 308

    Mar 4 Avr 2017 - 14:00

    Des catégories Epurées et jolies, merci.
    Kai Parker
    Kai Parker
    FémininAge : 23Messages : 154

    Lun 24 Avr 2017 - 11:49

    Merci !

    Balty
    Balty
    FémininAge : 18Messages : 5

    Mer 26 Avr 2017 - 19:01

    Merci c'est super *-*
    Borghignol
    Borghignol
    MasculinAge : 31Messages : 1

    Lun 1 Mai 2017 - 20:14

    Merci beaucoup!
    Ornicar
    Ornicar
    MasculinAge : 25Messages : 37

    Lun 8 Mai 2017 - 14:45

    Merci
    Wolfy
    Wolfy
    MasculinAge : 22Messages : 1

    Sam 13 Mai 2017 - 3:01

    Merci Beaucoup!
    MadSushi
    MadSushi
    FémininAge : 25Messages : 25

    Lun 15 Mai 2017 - 12:03

    Merci :)
    Wonderwall
    Wonderwall
    FémininAge : 26Messages : 20

    Lun 22 Mai 2017 - 20:45

    Merci !
    alsayed
    alsayed
    MasculinAge : 47Messages : 75

    Sam 27 Mai 2017 - 11:47

    Merci
    Anonymous
    Invité

    Lun 3 Juil 2017 - 22:01

    merci
    abysean
    abysean
    MasculinAge : 26Messages : 33

    Lun 10 Juil 2017 - 14:28

    Merci beaucoup x)
    ludoloveisa
    ludoloveisa
    MasculinAge : 33Messages : 63

    Dim 16 Juil 2017 - 22:08

    Merci du partage
    John:
    John:
    MasculinAge : 28Messages : 56

    Dim 16 Juil 2017 - 22:25

    J'aime beaucoup! Merci
    Cassisse
    Cassisse
    FémininAge : 28Messages : 127

    Mer 19 Juil 2017 - 14:56

    Merciii c'est super Mignon !!!!!
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juil 2021 - 12:56