Modification catégories.

Lun 28 Mar - 19:19
Bonjour Skaemp ! Je viens vers vous pour demander si il était possible de modifier cette catégorie-ci ? http://www.aht.li/2851055/TCAT32.png

Ce n'est rien de bien compliqué, j'aimerais simplement si possible, et espérant être assez clair dans mes explications, pouvoir insérer une "illustration". J'aimerais si possible, cacher la zone "texte texte texte texte" d'une image afin que le rendu puisse être comme ceci, bien évidement ce n'est qu'un exemple. J'aimerais ci possible lorsqu'on passe sur le "triangle" en bas de la description, pouvoir laisser l'affichage des sous-catégories.

http://image.noelshack.com/fichiers/2016/13/1459185446-pizap-com14591854023411.jpg

Vous souhaitant une agréable journée.
Revenir en haut Aller en bas
Mar 29 Mar - 4:56
Bonjour,

Remplacer l'intégralité du template index_box par :

Code:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
    <table width="900px" 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 -->
    <!-- END cathead -->
   
    <!-- BEGIN forumrow -->
      <div class="blocFRM"><div class="FRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div><div class="boxFRM"><div class="nbFRM"><p><b>{catrow.forumrow.TOPICS}</b><br/>sujets</p></div><div class="nbFRM nbIIFRM"><p><b>{catrow.forumrow.POSTS}</b><br/>messages</p></div></div></div><div id="descFRM"><div class="boxDESC">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM"><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</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 -->
 </div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* HAUT CATEGORIES */
.topCAT {
margin:auto; width:900px; height:55px; padding-top:40px;
background:#d8e698; border-bottom:5px solid #cad78e; /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
text-align:right; padding-right:35px;
}
.tleCAT h2{
margin:0; font-size:36px; text-transform:uppercase; font-style:italic; letter-spacing:2px;
font-family:Fjalla One; color:white; text-shadow:1px 1px 0 rgba(0,0,0,0.1); /* MODIFIABLE */
}
/* CONTENU CATEGORIES */
.mdlCAT {
margin:auto; margin-bottom:15px;
width:898px; height:auto; padding-bottom:35px; border-top:none; border:1px solid;
background:white; border-color:#d8e698; /* MODIFIABLE */
}
/* BLOC FORUM */
.blocFRM{
width:900px; margin:auto; text-align:center;
}
/* BLOC ICÔNES / TITRE / DERNIER MESSAGE / NOMBRE SUJETS & MESSAGES FORUM */
.FRM {
display:inline-block; vertical-align:top; margin:35px 25px 0;
width:400px;
}
/* BORDURE ICÔNES FORUM */
.imgFRM {
display:inline-block; vertical-align:middle;
width:50px; height:50px; padding:5px; border:1px solid;
border-color:#efefef; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:middle; margin-left:35px;
}
/* TITRE FORUM */
.tleFRM {
margin-bottom:10px; width:175px;
text-align:center; font-size:18px; text-transform:uppercase; letter-spacing:1px;
}
.tleFRM a{
font-family:Fjalla One;  color:#d8e698 !important; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
font-size:10px;
color:black; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
text-transform:uppercase;
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
width:86px; height:76px; padding:2px; overflow:hidden;
text-transform:uppercase; font-size:11px;
background:#efefef; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* BORDURE NOMBRE SUJETS FORUM */
.nbFRM p{
margin:0; height:59px; padding-top:15px; border:1px solid;
border-color:white; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
margin-top:20px;
background:#efefef; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* BORDURE NOMBRE MESSAGES FORUM */
.nbIIFRM p{
border-color:white; /* MODIFIABLE */
}
/* TAILLE NOMBRES NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM b {
font-size:14px;
}
/* BLOC DESCRIPTION & SOUS-FORUMS */
#descFRM {
display:inline-block; margin-top:35px; margin-right:25px;
width:400px; height:178px; overflow:hidden; border:1px solid;
background:#cad78e; border-color:#d8e698; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE & DESCRIPTION FORUM */
.boxDESC{
margin:auto; margin-top:19px;
width:360px; height:138px; overflow:hidden; border:1px solid;
background:white; border-color:#d8e698;  /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img{
position:absolute; z-index:2; margin-left:-180px;
width:360px; height:138px;
}
/* DESCRIPTION FORUM */
.descFRM{
position:relative; z-index:3;
width:350px; height:128px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:white; color:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.65s ease; -webkit-transition:opacity 0.65s ease;
}
.descFRM:hover {
opacity:1;
}
/* TRIANGLE SOUS-FORUMS */
.sfFRM {
margin-left:190px; margin-top:1px;
width:0; height:0; border-style:solid; border-width:0 10px 17.3px 10px; border-color:transparent;
border-bottom-color:white; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM div{
position:absolute; z-index:5; margin-top:-140px; margin-left:-180px;
width:350px; height:128px; padding:5px; overflow:auto;
background:white; /* MODIFIABLE */
opacity:0; transform:scale(0); -webkit-transform:scale(0);
transition:all 0.45s ease-in-out; -webkit-transition:all 0.45s ease-in-out;
}
.sfFRM:hover div{
opacity:1; transform:scale(1); -webkit-transform:scale(1);
}
/* LIEN SOUS-FORUM */
.sfFRM a{
font-size:16px; font-family:Fjalla One; text-transform:uppercase; color:#d8e698 !important; /* MODIFIABLE */
}

Taille des images descriptives : 360*140
Revenir en haut Aller en bas
Dim 3 Avr - 11:57
Cela marche parfaitement ! Un grand merci à vous !

Bonne journée également.
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum