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.

-83%
Le deal à ne pas rater :
Batterie externe 26800 mAh à charge rapide
19 € 110 €
Voir le deal

    Catégories blanches et bleues avec avatar du dernier posteur

    Lunayine
    Lunayine
    FémininAge : 22Messages : 55

    le 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
    Allison01
    Allison01
    FémininAge : 35Messages : 218

    le Dim 21 Juin 2015 - 22:34

    Whaouu je suis fan c'est très jolie :love:
    Eshon
    Eshon
    FémininAge : 39Messages : 194

    le Lun 22 Juin 2015 - 0:32

    Merci ! ^^
    Dark Fairy
    Dark Fairy
    FémininAge : 22Messages : 241

    le Lun 22 Juin 2015 - 18:23

    Merci!
    Kimirsu Anko
    Kimirsu Anko
    MasculinAge : 19Messages : 88

    le Mar 23 Juin 2015 - 17:39

    Merci
    sugarbomb
    sugarbomb
    FémininAge : 29Messages : 8

    le Mar 23 Juin 2015 - 21:26

    Merciii^^
    Fame
    Fame
    MasculinAge : 30Messages : 240

    le Mar 23 Juin 2015 - 21:40

    Merci. Very Happy
    Gabriielle
    Gabriielle
    FémininAge : 29Messages : 42

    le Lun 29 Juin 2015 - 1:17

    Merci beaucoup
    poloch
    poloch
    MasculinAge : 26Messages : 109

    le Lun 29 Juin 2015 - 10:50

    merci Very Happy



    Catégories blanches et bleues avec avatar du dernier posteur - Page 2 Sans_t12
    layna
    layna
    FémininAge : 27Messages : 68

    le Mer 1 Juil 2015 - 0:22

    merci
    Redingdom
    Redingdom
    FémininAge : 19Messages : 50

    le Mer 1 Juil 2015 - 14:21

    Merci du partage ^^
    Foxe
    Foxe
    FémininAge : 19Messages : 122

    le Mer 1 Juil 2015 - 15:25

    Wahhh merci c'est super beau *^*



    Catégories blanches et bleues avec avatar du dernier posteur - Page 2 Wet_ha10
    PrincesseÔ
    PrincesseÔ
    FémininAge : 22Messages : 220

    le Mer 1 Juil 2015 - 15:57

    Merci ♥
    Calypso Luciano
    Calypso Luciano
    FémininAge : 29Messages : 333

    le Mer 1 Juil 2015 - 16:09

    merci ^^
    Sleepy
    Sleepy
    MasculinAge : 25Messages : 60

    le Jeu 2 Juil 2015 - 19:18

    Petit passage pour dire que ce codage est vraiment splendide *-*



    Catégories blanches et bleues avec avatar du dernier posteur - Page 2 Sig_ne10
    Rudein
    Rudein
    FémininAge : 23Messages : 87

    le Ven 3 Juil 2015 - 11:19

    merci !
    Psychy
    Psychy
    FémininAge : 25Messages : 144

    le Sam 4 Juil 2015 - 17:20

    Merci je suis curieuse de voir comment on affiche l'avatar ^^



    Catégories blanches et bleues avec avatar du dernier posteur - Page 2 784145signanever
    Kahlan
    Kahlan
    FémininAge : 33Messages : 371

    le Dim 5 Juil 2015 - 10:30

    Merci beaucoup pour ce partage =)
    Abby Reever
    Abby Reever
    FémininAge : 28Messages : 145

    le Dim 5 Juil 2015 - 22:08

    ohhh classe! *-* j'adore!
    Anonymous
    Invité

    le Dim 5 Juil 2015 - 22:14

    Je vais essayer tout ça, merci du partage :3
    Little-Dream
    Little-Dream
    FémininAge : 20Messages : 27

    le Lun 6 Juil 2015 - 10:58

    Merci beaucoup! Very Happy
    сhampi
    сhampi
    FémininAge : 21Messages : 150

    le Lun 6 Juil 2015 - 19:03

    Merciii !
    Err0r
    Err0r
    FémininAge : 26Messages : 134

    le Mar 7 Juil 2015 - 16:34

    classss



    Catégories blanches et bleues avec avatar du dernier posteur - Page 2 150519095409324327
    Afterglow
    Afterglow
    FémininAge : 24Messages : 138

    le Mar 7 Juil 2015 - 18:09

    Très beau code, merci pour le partage :love:



    How do you get up from an all time low?
    Anonymous
    Invité

    le Jeu 9 Juil 2015 - 13:43

    Très sympa, je prend. Merci !
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Jeu 9 Juil 2015 - 18:16

    jolie merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 3 Juin 2020 - 20:26