Une realisation de categorie.

Ven 5 Fév - 23:54
Bien le bonsoir :D

je viens vers vous pour une demande de templates, il me semble que dans la partie note des commandes c'est pour le moment disponible. Bien entendu si ce n'est pas possible vous pouvez tres bien annuler cette demande.

   Largeur maximale : 800px
   Hauteur maximale : Si aucune = auto
   Schéma : http://i68.servimg.com/u/f68/19/20/54/28/untitl11.png
   Éléments : alors ce serait une sorte de 4 tableau en y inserant les informations du posteur, suivit a coté de son avatar. Pour les deux derniers ce serait l'information de la categorie et bien entendu le dernier tableau serait une image qui au moment ou l'on passe par dessus les sous forums apparaissent.
   Images : Nous avons deja les images fournies :)
bas de categorie
http://i.imgur.com/4aHr1d5.png
haut de categorie
http://i.imgur.com/m1p9GRV.png
image sous forums
http://i.imgur.com/9uogbLT.png

bouton nouveau message pour forum et categorie
http://i.imgur.com/PUxOfcf.png
bouton ancien message pour forum et categorie
http://i.imgur.com/LqkViGP.png
   Animations : Glissement
   Informations supplémentaires : Voila j'espere que vous avez toutes les informations necessaire et qu'il sera possible de realiser cette commande.
Revenir en haut Aller en bas
Sam 6 Fév - 3:18

Remplacer l'intégralité du code par celui-ci :
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 -->
    <div class="topCAT"><div class="tleCAT">{catrow.tablehead.L_FORUM}</div></div>
    <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span><!-- END tablehead -->

     <!-- BEGIN cathead -->
    <div class="topCAT"></div>
     <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    <div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="FRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="nbFRM">{catrow.forumrow.TOPICS} S. || {catrow.forumrow.POSTS} M.</div></div><div id="avaFRM"><!-- BEGIN avatar --><div class="avaFRM">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar --></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM"><div><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div></div>  
     <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <span style="display:block; height:1px; clear:both;"></span></div>
    <div class="btmCAT"></div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* HAUT CATEGORIES */
.topCAT {
margin:auto; width:800px; height:100px;
background:url(http://i.imgur.com/m1p9GRV.png); /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
text-align:center;
}
.tleCAT h2{
padding-top:15px; font-size:32px; text-transform:uppercase; letter-spacing:3px;
font-family:Arial; color:white; /* MODIFIABLE */
}
/* MILIEU CATEGORIES */
.mdlCAT {
margin:auto; width:800px;
background:#2f293d; /* MODIFIABLE */
}
/* BAS CATEGORIES */
.btmCAT {
margin:auto; width:800px; height:100px;
background:url(http://i.imgur.com/4aHr1d5.png); /* MODIFIABLE */
}
/* BLOC FORUM */
.blocFRM{
width:800px; margin:auto; text-align:center;
}
/* TITRE FORUM */
.tleFRM {
margin-left:35px; margin-bottom:5px;
text-transform:uppercase; text-align:left;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.tleFRM a{
color:white !important; /* MODIFIABLE */
}
/* SURVOL TITRE FORUM */
.tleFRM:hover {
margin-left:65px; font-weight:bold;
}
/* BLOC DERNIER MESSAGE / AVATAR DERNIER POSTEUR / DESCRIPTION / SOUS-FORUMS */
.FRM {
margin:auto; margin-bottom:15px;
width:730px; height:100px; padding:15px;
background:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top;
width:155px; height:90px; padding:5px;
text-align:center; font-size:10px;
background:rgba(250,250,250,0.6); border:2px solid rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM{
margin:2px auto;
width:150px; height:35px;
}
/* NOMBRE SUJETS ET MESSAGES FORUM */
.nbFRM {
font-size:9px;
}
/* BLOC AVATAR DERNIER POSTEUR */
#avaFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:50px; height:100px;
background:#ccc; border:2px solid rgba(250,250,250,0.3); /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR */
.avaFRM {
width:50px; height:100px; overflow:hidden;
}
.avaFRM img {
width:50px; height:100px;
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block;
width:295px; height:90px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
background:rgba(250,250,250,0.3); border:2px solid rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; margin-left:10px;
width:160px; height:100px; overflow:hidden;
background:url(http://i.imgur.com/9uogbLT.png); border:2px solid rgba(250,250,250,0.3); /* MODIFIABLE */
}
.sfFRM div {
position:relative;
width:160px; height:100px; overflow:hidden;
}
/* CONTENU SOUS-FORUMS */
.sfFRM div div{
width:150px; height:90px; padding:5px; overflow:auto;
text-align:left; font-size:11px;
background:#191919; /* MODIFIABLE */
transform:translateX(160px); -webkit-transform:translateX(160px);
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
.sfFRM:hover div div{
transform:translateX(0px); -webkit-transform:translateX(0px);
}

Vous souhaitant un excellent week-end.
Revenir en haut Aller en bas
Sam 6 Fév - 17:49
Holala I love you

merci infiniment! Elle est magnifique je suis fan de ce que vous avez fait! merci beaucoup!
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum