commande catégories

Sam 6 Fév - 17:03
Largeur maximale : 800px,
Hauteur maximale : Si aucune = auto
Schéma :
Éléments : image entre nombres des messages et sujet : Image sur passage titre :  
Images : Image haut
Animations : Glissement sur contexte catégorie,  glissement image sur le titre des catégorie et changement de couleur au passage de la souris, opacité sur l'iamge du posteur au passage de la souris, et changement de couleur sur le texte des sous forum

Informations supplémentaires :couleur voulue : Titre :#f3775b Titre au passage de la souris : #72b3a0 bordure rgba(255,182,193,0.5) fond : transparent merci beaucoup pour votre aide en espérant que je ne vous en demande pas trop
Revenir en haut Aller en bas
Dim 7 Fév - 0:04

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"><!-- END tablehead -->

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

Partie CSS :
Code:
/* HAUT CATEGORIES */
.topCAT {
margin:auto;
width:800px; height:100px; border-radius:35px 35px 0 0;
background:url(http://img15.hostingpics.net/pics/580786Bann.png); /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
text-align:center; padding:1px 0;
}
.tleCAT h2{
font-size:32px; text-transform:uppercase;
font-family:Arial; color:#f3775b; /* MODIFIABLE */
}
/* MILIEU CATEGORIES */
.mdlCAT {
margin:auto; margin-bottom:15px;
width:800px; padding:10px 0; border-radius:0 0 35px 35px;
background:rgba(250,250,250,0.3); /* MODIFIABLE */
}
/* BLOC FORUMS */
.blocFRM{
width:800px; margin:auto; text-align:center;
}
/* TITRE FORUM */
.tleFRM {
margin:auto; margin-bottom:10px;
width:750px; padding-bottom:5px;
font-family:Arial; text-align:left; font-size:22px; text-transform:uppercase; letter-spacing:5px;
border-bottom:5px dotted rgba(255,182,193,0.5); /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.tleFRM a{
display:inline-block;
color:#f3775b !important; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* IMAGE TITRE FORUM */
.imgTLEF {
display:inline-block; margin-right:10px;
width:20px; height:20px;
background:url(http://img11.hostingpics.net/pics/726416icon3.png);
opacity:0; transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TITRE FORUM */
.tleFRM:hover {
padding-left:35px; width:715px;
border-color:#72b3a0; /* MODIFIABLE */
}
.tleFRM:hover a{
color:#72b3a0 !important; /* MODIFIABLE */
}
.tleFRM:hover .imgTLEF {
opacity:1;
}
/* BLOC DERNIER MESSAGE / AVATAR DERNIER POSTEUR / DESCRIPTION / SOUS-FORUMS */
.FRM {
margin:auto; margin-bottom:15px;
width:750px;
}
/* BLOC DESCRIPTION FORUM */
#descFRM {
display:inline-block;
width:400px; height:100px; overflow:hidden;
}
#descFRM div {
position:relative;
width:400px; height:100px; overflow:hidden;
}
/* DESCRIPTION FORUM */
.descFRM{
width:390px !important; height:90px !important; padding:5px !important; overflow:auto !important;
font-size:10px; text-align:justify;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
position:absolute; z-index:5; margin-left:-200px;
width:400px; height:100px;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
#descFRM:hover img {
transform:translateX(-400px); -webkit-transform:translateX(-400px);
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; margin:0 20px;
width:150px; height:90px; padding:5px; overflow:auto;
background:rgba(250,250,250,0.5);  /* MODIFIABLE */
}
/* LIEN SOUS-FORUMS */
.sfFRM a{
text-transform:uppercase; color:#f3775b !important; /* MODIFIABLE */
}
/* SURVOL LIEN SOUS-FORUMS */
.sfFRM a:hover {
color:#72b3a0 !important; /* MODIFIABLE */
}
/* BLOC AVATAR DERNIER POSTEUR / DERNIER MESSAGE FORUM / NOMBRE SUJETS & MESSAGES / ICÔNES FORUM */
.boxFRM {
display:inline-block; vertical-align:top;
}
/* BLOC AVATAR DERNIER POSTEUR / DERNIER MESSAGE FORUM */
#avaFRM {
margin-bottom:5px;
width:150px; height:75px;
background:rgba(250,250,250,0.6);  /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute;
width:140px; height:60px; padding:10px 5px 5px;
text-align:center; font-size:10px;
background-color:rgba(250,250,250,0.9); color:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease;
}
.lmsgFRM:hover {
opacity:1;
}
/* AVATAR DERNIER POSTEUR */
.avaFRM {
width:150px; height:75px; overflow:hidden;
}
.avaFRM img {
width:150px;
}
/* NOMBRE SUJETS ET MESSAGES FORUM */
.nbFRM {
display:inline-block; vertical-align:top; margin-right:5px;
width:125px; height:17px; padding-top:3px; font-size:10px;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM{
display:inline-block; vertical-align:top;
width:20px; height:20px;
}

Encadrer le texte descriptif des balises suivantes :
Code:
<div class="descFRM"> Texte descriptif </div>


Vous souhaitant évidemment une agréable soirée.
Revenir en haut Aller en bas
Dim 7 Fév - 12:27
Wouah vous avez été rapide c'est tout juste magnifique merci beaucoup
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum