Catégories. Le bouton nouveau/pas de nouveau message/verrouillé se situe en haut à gauche, à la gauche du nombre de sujets et de messages et tourne au survol. Une image ronde est plus jolie. Les liens des sous-forums apparaissent en survolant la description. Les avatars dans la case "dernier message posté" sont activés.
Aperçu
Cliquez pour voir l'image en taille réelle.
Code
Panneau d'administration >> Affichage >> Templates >> Général >> index_box
HTML:
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 --><!-- BEGIN tablehead --><table class="collapse" width="800px" align="center" border="0" cellspacing="1" cellpadding="0"> <tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> </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"> <!-- ICI LE NOM DE LA CATÉGORIE. --> <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"> </td> </tr> <!-- END cathead -->
<!-- BEGIN forumrow --> <tr> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" > <link href='https://fonts.googleapis.com/css?family=Oswald:700,300|Economica' rel='stylesheet' type='text/css'> <!-- IMAGE OLD/NEW/LOCKED MAIS DANS CETTE VERSION PAS D'IMAGE POUR OLD. --> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="catimg" /> <div class="catnb"> <!-- NOMBRE DE SUJETS PUIS NOMBRE DE MESSAGES. --> <span class="suj">{catrow.forumrow.TOPICS}</span> <span class="msg">{catrow.forumrow.POSTS}</span> <br /> </div> <table class="cat"> <tr> <td class="catn1"> <div> <span class="genmed catlp"> <!-- AFFICHAGE DU DERNIER POST. --> <!-- BEGIN avatar --> <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span><br /> <!-- END avatar --> {catrow.forumrow.LAST_POST} </span> </div> </td> <td class="catn2"> <div class="catname"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <!-- AFFICHAGE DU NOM DU FORUM. --> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </h{catrow.forumrow.LEVEL}> </div> <div class="catbbl"> <!-- LIENS DES SOUS-FORUMS. --> <span class="gensmall catlinks" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ; ')).removeAttr('id'); </script> <span class="catdesc"> <!-- DESCRIPTION DU FORUM. --> <span class="gensmall"> <!-- TRIANGLE SURVOLEZ --> <center><div id="survolezmoi"><span>Survolez</span></div></center><!-- FIN TRIANGLE --> {catrow.forumrow.FORUM_DESC} </span> <span style="text-align: right;"> <!-- ICI LES HABITUELS LIENS TOTALEMENT INUTILES DES MODERATEURS. MAIS ON SAIT JAMAIS SI QUELQU'UN LES VEUT. --> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> </span> </span> </div> </td> </tr> </table></td> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <!-- BEGIN inc --> <div class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></div> <!-- END inc --> <div class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></div> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table> <div class="bascate"> </div> <img src="{SPACER}" alt="" height="5" width="1" /> <!-- END tablefoot --> <!-- END catrow -->
td.catn1 { /* SELECTEUR CELLULE DERNIER POST (RAJOUTER SPAN ET ON SELECTIONNE LE DERNIER POST) */ width: 150px; text-align: center; }
span.lastpost-avatar { float: none !important; }
span.lastpost-avatar img { width: 50px; height: 80px; border-radius: 0; opacity: 0.5; transition: all ease 1s; -moz-transition: all ease 1s; -webkit-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; }
span.lastpost-avatar img:hover { opacity: 1; } td.catn2 { /* SELECTEUR CELLULE NOM DU FORUM + DESC + LINKS */ vertical-align: top; }
.catname { /* SELECTEUR DE LA DIV DU NOM DU FORUM */ text-align: center; } .forumlink { /* SELECTEUR NOM DU FORUM */ font-family: 'Oswald', sans-serif; font-size: 24px; border-bottom: 2px dotted #fff842; font-weight: normal; }
/* TITRES SPAN ET P */ .patitre { font-family: 'Oswald', sans-sérif; font-size: 18px; font-variant: small-caps; color: #000; } .patitre:hover { letter-spacing: 2px; transition: all ease 1s; -moz-transition: all ease 1s; -webkit-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; } /* Fin nouvelles catégories by Joy */
Dernière édition par Joy le Lun 16 Juil - 15:54, édité 7 fois
D'abord merci pour ce joli code ! Il est vraiment très beau et simple. Malheureusement, l'avatar du dernier posteur ne s'affiche pas alors que j'ai correctement copié le code. Serait-il possible de m'aider s'i lte plait ?
Merci d'avance !
Joy FondAdmin narcissique
Messages : 628 Date d'inscription : 06/06/2012 Âge : 25 Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.
Bonsoir ! Désolée, j'ai totalement zappé ce message. Pour afficher l'avatar du dernier posteur, il faut aller dans le panneau d'administration et l'activer. Pour ça, fais comme ce qui suit : Panneau d'administration >> Affichage >> Structure et hiérarchie >> Afficher les avatars dans la colonne « Derniers messages » : Oui. Et normalement, tout est bon !
Bonsoir! Merci pour ton très beau travail! J'ai essayé de mettre ton code pour les catégories de mon forum, mais j'ai un petit soucis, les catégories se trouvent sur la gauche de mon forum au lieu d'être centré... Est ce que tu aurais un solution? Est ce que j'ai oublié de faire quelque chose? Je débute dans le codage... Et aussi, les avatars n'apparaissent pas non plus, et venant de commencer dans le codage et HTML, je ne sais pas encore où modifier ça. :
Merci d'avance pour ta réponse!
Joy FondAdmin narcissique
Messages : 628 Date d'inscription : 06/06/2012 Âge : 25 Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.
Pour les avatars, il faut vérifier dans le panneau d'administration que la case oui pour Afficher les avatars dans la colonne "Derniers messages" est bien cochée. Elle se trouve dans Affichage ► Page d'accueil ►► Structure et hiérarchie.
Par contre, pour les catégories non centrées, j'ai pas d'idée. :doute: C'est toujours centré et ce n'est pas quelque chose que j'ai changé... Désolée. ^^'