Alors avant de vous donner les codes :
Dans votre PA faite Affichage -> Page d'accueil -> Structure et Hiéarchie et sélectionnez Séparer les Catégories sur l'Index -< Moyen puis validez.
Ensuite dans Images & Couleurs sélectionnez l'onglet couleur et supprimer les couleurs des tables des catégories soit Table Rangée Couleur 1 ,Table Rangée Couleur 2 et surbrillance , Table Rangée Couleur 3 et séparations
Et c'est partie pour les codes
Collez-ce template index-box :
- 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="forumline" width="100%" 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">
<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>
<!-- 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">
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<div class="box"><span class="genmed"><div class="nonew"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>{catrow.forumrow.FORUM_DESC}<div class="lastpost">{catrow.forumrow.LAST_POST}</div><div class="stat">
{catrow.forumrow.TOPICS} Messages
{catrow.forumrow.POSTS} Sujets - Texte changeable</div></span></div>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
<div class="sous_forum">
<span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<span class="ouverture_sousforum">Voir les sous-forum</span>
</div>
</span>
<!-- 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 -->
Voici le css à coller :
- Code:
-
/*Catégories*/
.namefow{
font-size:25px;
text-transform:uppercase;
color:white;
font-family: 'Unica One', cursive;
text-align:center;
position:absolute;
margin-left:420px;
margin-top:-8px;
z-index:4
}
a:hover{
text-decoration:none!important ;
}
.box{
background-color:black;
width:850px;
height:220px;
margin-top:-15px;
border:1px solid white;
border-radius:50px 50px 50px 50px;
margin-left:85px;
padding-bottom:-215px;
}
.cate{
background:url('') top center no-repeat;
width:550px;
height:auto;
margin-left:55px;
margin-top:auto;
margin-bottom:-10px;
}
.nonew{
margin-top:40px;
margin-left:20px;}
.descrimg{
width:450px;
height:100px;
margin-left:150px;
position:relative;
margin-top:-95px;
position:relative;
z-index:2;
overflow:hidden;
padding-bottom:65px;
}
.descrimg:hover{
width:450px;
height:100px;
margin-left:140px;
position:relative;
margin-top:-95px;
position:relative;
opacity:0.1;
-webkit-transition: opacity 1s ease-in-out;/*chrome*/
-moz-transition: opacity 1s ease-in-out;/*mozilla*/
transition: opacity 1s ease-in-out;/*autre navigateur*/
color:white;
}
.stat{
color:white;
margin-left:300px;
text-transform:uppercase;
font-family: 'Unica One', cursive;
font-size:12px;
margin-top:10px;
}
.sforum
{
position: relative;
z-index: 3;
display: block;
height:0;
width:693px;
background:black;
color: #b5b5b5;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
border-radius:10px 10px 0px 0px;
margin-left:132px;
margin-top:1px;
margin-bottom:-1px;
}
.ouverture_sousforum
{
position: relative;
z-index: 2;
display: block;
float: right;
width:700px;
margin-right:105px;
background:black;
color: #b5b5b5;
font-size: 11px;
text-align: center;
padding:-4px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
height:20px;
background:black;
color: #b5b5b5;
padding: 4px;
overflow: auto;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
margin-bottom:-5px;
}
.lastpost{
width:100px;
height:100px;
margin-left:700px;
color:white;
font-size:12px;
text-decoration:none!important;
margin-top:-125px;
background-color:#31613F;
width:100px;
text-indent:5px;
padding-left:5px;
}
.nav img {
width:500px!important;}
Dans les titres de catégorie :
- Code:
-
<div style="margin-top:15px;"><div class="cate"><img src="ADRESSE_DE_L'IMAGE"> </div> </div>
Les titres de forum :
- Code:
-
<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'><div class="namefow"> Titre du forum </div>
Le code à mettre dans les descriptions :
- Code:
-
<div class="descrimg"><img src="http://www.athair.com/wp-content/uploads/2010/12/deathwing.jpg"></div> <div style="color:white;z-index:4;width:450px;height:110px;margin-top:-159px;margin-left:150px"> L'amour est le seul poison qui peut venir à bout de mon coeur. Je te le révèle aujourd'hui car je sais que tu m'aimes et que tu ne me précipiteras pas de l'autre côté du monde. En tout cas ce n'est n'y aujourd'hui n'y demain. Lorem LupsumL'amour est le seul poison qui peut venir à bout de mon coeur. Je te le révèle aujourd'hui car je sais que tu m'aimes et que tu ne me précipiteras pas de l'autre côté du monde. En tout cas ce n'est n'y aujourd'hui n'y demain. Lorem Lupsum</div>