Catégories simples et personnalisables

Présentation

Voici un code de template forumactif afin de modifier l'affichage de vos catégories. Si vous l'utilisez, j'exige que ce crédit apparaisse soit dans votre sujet de crédit soit sur votre PA (ou QEEl si vos crédits y sont) : Apparence Catégories par <a href="http://elia-ls.e-monsite.com/"><img src=http://www.zupimages.net/up/15/24/0kn7.png" /></a> .

Voici à quoi ressemble le code d'aujourd'hui :  


Screen

 

Le code ne prend pas en compte le Titre de la catégorie ("Le Bureau") ni l'image "pas de nouveau message". 

Le code

Le vous donne ici l'intégralité du templat index_box. Si vous avez déjà effectuer des modifications et que vous ne voulez pas les perdres, ne prennez que la seconde table. 


<script src="//use.typekit.net/otl2tpf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<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 --><!-- BEGIN tablehead --><table class="Catégories_e" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td colspan="5" class="titrecat_e">{catrow.tablehead.L_FORUM}</td></tr>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" 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>
        <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
    </tr>
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <tr><td colspan="5"><h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="titrefor_e">
                    <a class="titrefor_e" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
            </h{catrow.forumrow.LEVEL}><td> </tr>    
<tr>
                <!-- BEGIN inc -->
        <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
        <!-- END inc -->
        <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" width="25px">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </td>
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="65%" height="50" class="desc_e">
            
            <span class="desc_e">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </span>
        </td>
        <td class="row3" align="left" valign="middle" height="50" width="10%">
            <span class="ssfor_e"> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        </td>
        <td class="row3" align="center" valign="middle" height="50" width="20%">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
<span class="lastposte_e">{catrow.forumrow.TOPICS} Sujets & {catrow.forumrow.POSTS} Messages </span> <br />
            <span class="lastpost_e">{catrow.forumrow.LAST_POST}</span>
        </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 -->


 

Le CSS :

       /*---- Template Catégorie DEBUT ----*/

table.Catégories_e {   /*-Ce qui concerne le tableau entier, les bordures-*/
Border : none;
border-collapse: collapse}

/*- titre forum DEBUT -*/
a.titrefor_e { /*- Ce qui concerne le titre du forum -*/
opacity : 0.8 ;
text-shadow: 1px 1px 2px #D2E1F2;
transition-property: opacity, text-shadow ;
transition-duration: 1s; /*- Vitesse transition -*/
font-size : 19px ;
font-family: "acta-display",sans-serif;}

a.titrefor_e:hover {  /*- Ce qui concerne le titre du forum au survol-*/
opacity : 1 ;
  text-shadow: none;
transition-property: opacity, text-shadow ;
  transition-duration: 1s; /*- Vitesse transition -*/}
/*- titre forum FIN -*/

.desc_e {
font-size : 11px;
}


.lastposte_e {
font-size : 9px;
}

.lastpost_e {
font-size : 11px;
}
/*---- Template Catégorie FIN ----*/


 

La description du forum 

<div style="padding-left:5px; padding-right:8px;  padding-top:5px;" align="justify">
           Votre description ici !    
</div>

Les titres

Vous n'aurez pas le même titre de forum que moi, c'est normal ! Pour l'avoir voici ce qu'il faut faire : 

  1. S'inscrire/ se connecter sur https://typekit.com/ 
  2. Trouver la police Acta Display de DSType
  3. "Utiliser les polices" -> remplissez les champs (site sur lequel vous allez l'utiliser ...).
  4. Une fois dans la page d'utilisation, mettez : a.titrefor_e et .titrefor_e dans le selecteur (en haut a gauche).
  5. La police est déjà mis dans le CSS.

Pour avoir des titres de catégorie sembable à celui du screen :

  1. Télécharger la police  Times New Yorker par D.o.c.s. (ou la police de votre choix !)
  2. Faire une image où vous écrivez le titre de votre catégorie (sur fond transparent).
  3. Heberger votre image
  4. Mettre <img src="LIEN DE VOTRE IMAGE" /> en guise de titre de votre catégorie.

Pour toute question concernant la personnalisation ou remarque, vous pouvez laisser un commentaire ! Merci.

Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.