Je suis super ravie et flattée que ça te plaise ! Voici donc les codes, dis-moi si tu souhaites plus d'informations, j'ai tout de même essayé de mettre des noms de class assez explicites, donc si tu t'y connais un minimum, tu devrais pouvoir facilement te repérer. :)
/!\ Avant tout, vérifie bien dans ton panneau d'administration que lorsque tu vas dans Affichage > Page d'accueil > Structure et hiérarchie, tu sois bien en mode "Séparer les catégories sur l'index : Moyen". Puis, sur la même page, plus en bas, tu peux mettre la longueur du titre du sujet affiché à 24 caractères.
Template
index_box entier (
Page d'accueil - 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 -->
<!-- BEGIN tablehead -->
<table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
<div class="cat_haut"></div><div class="cat_milieu">
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="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">
<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 -->
<table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>
<tr class="forum_ligne1">
<td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</td>
</tr>
<tr class="forum_ligne2">
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="forum_description" valign="top">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</td>
<td class="forum_dernmess" align="center" valign="top">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
<div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</td>
</tr>
</td></tr></table>
<!-- 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 -->
<div class="cat_marge_bas"></div>
</table>
</div>
<div class="cat_bas"></div>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
<!-- END catrow -->
Code à coller et à modifier dans la
description d'un forum (contient les blocs de l'image, de la description et des liens personnalisables pour pouvoir les modifier indépendamment pour chaque forum) :
- Code:
<table style="width: 100%; max-height:100px; margin-bottom: -12px;" cellpadding="0" cellspacing="0" border="0" border-spacing="0" valign="middle">
<tbody>
<tr>
<td class="descr_img">
<img alt="Image de description" src="http://nsm08.casimages.com/img/2015/04/16//15041606025519468513176454.png" />
</td>
<td class="descr_texte">
<div class="descr_texte_contenu">
<div>
<span class="d_texte_special">Lorem Ipsum</span>Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.
</div>
</div>
</td>
<td class="descr_liens">
<div><!-- ne pas mettre plus de 4 liens -->
<a href="URL DU LIEN">Lien 1</a><br />
<a href="URL DU LIEN">Lien 2</a><br />
<a href="URL DU LIEN">Lien 3</a><br />
<a href="URL DU LIEN">Lien 4</a><br />
</div>
</td>
</tr>
</tbody>
</table>
CSS à coller dans la feuille de style du forum :
- Code:
/********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/
/* _____ Reglages de base _____ */
a { text-decoration: none; }
a:hover { text-decoration: none !important; }
/* _____ Fonds categories en images _____ */
.cat_haut
{
background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
width: 852px;
height: 20px;
margin: auto;
margin-top: 50px; /* espacement entre chaque categorie */
}
.cat_milieu
{
background: url('http://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
width: 800px;
margin: auto;
padding: 0 26px 0 26px;
}
.cat_bas
{
background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
width: 852px;
height: 29px;
margin: auto;
}
/* _____ Mise en forme titre de la catégorie _____ */
.secondarytitle
{
width: 800px;
height 80px;
line-height: 80px;
background : url('http://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
border-bottom: 9px solid #fff;
}
.secondarytitle h2
{
color: rgba(213,215,242, 0.5);
font-size: 40px;
text-transform: uppercase;
font-weight: normal;
font-family: 'Times New Roman', serif;
text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
}
/* reglages pour selection */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
/* _____ Mise en forme titre du forum _____ */
.forums
{
width: 800px;
padding: 0 10px 0 10px;
background: #fff;
}
.forumlink_block
{
height: 25px;
line-height: 25px;
background: #edeff8;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.forumlink a
{
font-size: 20px;
color: rgba(213,215,242, 0.5);
font-weight: normal;
font-family: 'Times New Roman', serif;
text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
display: inline-block;
position: relative;
left: 90px;
top: 10px;
}
/* _____ Mise en forme forum _____ */
.forum_ligne2
{
background: #f7f7f9;
max-height: 100px;
}
/* Description (image + textes + liens) */
.forum_description /* conteneur */
{
margin: 0;
padding: 0;
width: 80%;
padding: 5px;
height: 90px;
overflow: hidden;
}
.descr_img img /* image perso */
{
width: 75px;
height: 90px;
}
.descr_texte /* colonne texte */
{
padding-left: 5px;
}
.descr_texte .descr_texte_contenu /* conteneur texte */
{
padding: 2px;
width: 410px;
background: #fff;
margin: 0;
}
.descr_texte .descr_texte_contenu div /* texte */
{
padding: 5px;
border: solid 1px #ced2de;
height: 74px;
overflow: auto;
font-size: 16px;
color: #b3b3b3;
text-align: justify;
}
.d_texte_special /* texte special du debut */
{
font-size: 18px;
font-weight: bold;
}
.d_texte_special::after /* mettre point apres texte special */
{
content: " . ";
font-size: 20px;
font-weight: 900;
}
.descr_liens /* colonne liens persos */
{
padding-left: 5px;
}
.descr_liens div /* conteneur liens persos */
{
background: #fff;
width: 98px;
height: 90px;
text-align: center;
line-height: 23px;
}
.descr_liens div a /* liens persos */
{
display: inline-block;
height: 25%;
font-size: 16px;
color: #b3b3b3;
}
.descr_liens div a::before /* mettre point avant lien perso */
{
content: ". ";
font-weight: 700;
}
/* Dernier message du forum */
.forum_dernmess {
margin: 0;
padding: 5px 5px 0 0;
width: 20%;
height: 90px;
}
.forum_dernmess img {
width: 168px;
height: 45px;
}
.dernmess_contenu
{
width: 100%;
height: 40px;
background: #fff;
padding-top: 5px;
}
.dernmess_contenu img
{
display: none;
}
.dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
{
line-height: 0.9em;
font-size: 13px;
color: #b3b3b3;
}
.dernmess_contenu .gensmall a
{
color: #838cb2;
}
/* _____ Marge interieure bas categories _____ */
.cat_marge_bas
{
width: 800px;
height: 10px;
margin: auto;
background: #fff;
}
/********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/
Voilà, donc si tu as bien suivi, tu auras compris que j'ai du mettre la majorité des éléments dans la description des forums afin que tu puisses modifier le contenu en fonction du forum. ^^
Note aussi que j'ai (ré-)hébergé toutes les images sur mon compte casimages (fonds ombragés des catégories, fond marbré du titre des catégories) , elles ne sont pas prêtes de s'envoler, mais si tu préfères avoir la main dessus, ré-héberge les ! Tu peux modifier les images new/old/lock directement via le gestionnaire d'images du panneau d'administration de FA, comme tu as l'habitude de le faire. :)