Le deal à ne pas rater :
Elden Ring Shadow Of The Erdtree édition Collector : où le ...
Voir le deal

Modification catégories

Modification catégories Empty Jeu 14 Juil - 20:50
Bonsoir Skaemp !

Je me suis permis de piocher un de vos code "catégories" que je trouve très beau et j'ai essayé de le modifier à ma sauce mais ça coince....

J'aimerais savoir s'il vous est possible de le modifier en prenant en compte mes souhaits ? :)

Déjà je vous donne les codes (déjà un peu modifiés)
CSS -
Code:
/**CATÉGORIES SKAEMP**/
/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:5px auto 15px; width:960px; padding:20px 0; text-align:center;
background:#fbb690; color: white; text-transform: lowercase;
font-size: 20px; font-family: serif; /* MODIFIABLE */
}

/* BLOC FORUM */
.FRM {
margin:auto; margin-bottom:10px;
width:960px; height:250px; text-align:center;
}
/* BLOCS POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:top;
}
.boxFRMII {
display:inline-block; vertical-align:top; margin:0 5px;
width:230px;
}
/* BLOC TITRE FORUM */
.tleFRM {
position:relative; margin-left: -40px; width:455px; height:35px; padding-top:15px; border-bottom: 1px solid #efefef;
text-align:center; text-transform:uppercase; font-size:18px; font-family:Arial;
background:white; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
color:#fe88b7 !important;  /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
position:relative; display:inline-block; margin-top:20px; margin-left: -50px; margin-right:15px;
width:230px; height:170px; padding:5px; overflow:auto;
background:white; border: 1px solid #efefef; color:grey; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
/* IMAGES DESCRIPTIVES */
.descFRM img {
position:absolute; z-index:3; margin-left:405px; margin-top:-70px;
width:230px; height:100px;
transition:all 0.55s; -webkit-transition:all 0.55s;
}
.descFRM img:hover {
opacity:0;
}
/* AVATAR DERNIER POSTEUR FORUM */
#avaFRM {
display:inline-block; position: relative; margin-top:-65px;
width:180px; height:140px; overflow:hidden;
background:white; border: 1px solid #efefef; /* MODIFIABLE */
}
#avaFRM img {
width:180px; filter:grayscale(1); -webkit-filter:grayscale(1);
}
/* ICÔNES FORUM */
.imgFRM {
margin-bottom:15px;
width:230px; height:100px;
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
display:inline-block; vertical-align:top;
width:110px; height:65px; padding-top:25px;
font-size:24px; text-transform:uppercase; text-align:center;
background:black; color:white; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbFRMII {
display:inline-block; vertical-align:top; margin-left:10px;
width:110px; height:65px; padding-top:25px;
font-size:24px; text-transform:uppercase; text-align:center;
background:#64B3AC; color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; margin-top:-25px; margin-left:215px;
width:415px; height:15px; padding:5px; overflow:auto;
background:white; border: 1px solid #efefef; color:black; /* MODIFIABLE */
font-size:11px; text-align:center; text-transform:uppercase;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:135px; height:240px; padding:5px 5px 0; overflow:auto;
background:grey; /* MODIFIABLE */
text-align:center; line-height:0px; color:rgba(0,0,0,0);
}
/* LIEN SOUS-FORUM */
.sfFRM a{
display:block; margin-bottom:5px; padding:5px;
text-transform:uppercase; text-align:center; font-size:10px; line-height:14px;
background:white; color:grey; /* MODIFIABLE */
}
/**CATÉGORIES FIN**/

TEMPLATES -
Code:
<table width="800px" 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="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
   
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div id="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><script type="text/javascript">$('.lmsgFRM').each(function(){$(this).html($(this).html().replace(/<br>/g,'<span style="display:inline-block; padding:0 3px;"> </span>'));});</script></div><div class="boxFRMII"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="nbFRM">{catrow.forumrow.TOPICS}</div><div class="nbFRMII">{catrow.forumrow.POSTS}</div></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
    <!-- END forumrow -->
   
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Comme vous pouvez le voir sur le forum test -> http://poulpepoulpepoulpe.brulant.net/
Rien n'est réellement aligné...

Voici un screen retouché avec quelques indications : https://2img.net/r/hpimg15/pics/642516ScreenShot20160714at204431.png

Le bonus d'afficher l'avatar du dernier posteur est supprimé, je ne tiens pas à le garder ahah o/

Et donc à son emplacement figurerait l'image descriptive -> mais j'aimerais qu'elle ne soit pas collée au rebord 1px efefef là, j'aimerais qu'il y ait un petit padding Like a Star @ heaven

Voilà... En espérant avoir été assez clair et en espérant également ne pas trop vous en demander... ^^

Merci beaucoup et bonne soirée !!
cat Like a Star @ heaven Like a Star @ heaven
Revenir en haut Aller en bas
Modification catégories Empty Ven 15 Juil - 4:52
Bonjour,

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

Code:
<table width="960px" 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="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
 
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="boxDESC"></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><script type="text/javascript">$('.lmsgFRM').each(function(){$(this).html($(this).html().replace(/<br>/g,'<span style="display:inline-block; padding:0 3px;"> </span>'));});</script></div><div class="boxFRMII"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="nbFRM">{catrow.forumrow.TOPICS}</div><div class="nbFRMII">{catrow.forumrow.POSTS}</div></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
    <!-- END forumrow -->
 
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/**CATÉGORIES SKAEMP**/
/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:5px auto 15px; width:960px; padding:20px 0; text-align:center;
background:#fbb690; /* MODIFIABLE */
}
.tleCAT h2{
margin:0;
color:white; text-transform:lowercase; font-size:20px; font-family:serif; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:auto; margin-bottom:10px;
width:960px; height:235px; text-align:center;
}
/* BLOCS POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:top;
}
.boxFRMII {
display:inline-block; vertical-align:top; margin:0 5px;
width:230px;
}
/* BLOC TITRE FORUM */
.tleFRM {
width:560px; height:35px; padding-top:15px; border-bottom: 1px solid #efefef;
text-align:center; text-transform:uppercase; font-size:18px; font-family:Arial;
background:white; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
color:#fe88b7 !important;  /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block; vertical-align:top; margin-top:5px; margin-right:5px;
width:350px; height:163px; padding:5px; overflow:auto;
background:white; border: 1px solid #efefef; color:grey; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
/* IMAGE DESCRIPTIVE */
.descFRM img {
position:absolute; z-index:3; margin-left:367px; margin-top:-1px;
width:180px; height:135px;
transition:all 0.55s; -webkit-transition:all 0.55s;
}
/* BLOC IMAGE DESCRIPTIVE */
.boxDESC {
display:inline-block; vertical-align:top; margin-top:5px;
width:190px; height:143px; overflow:hidden;
background:white; border:1px solid #efefef; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM {
margin-bottom:5px;
width:230px; height:100px;
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
display:inline-block; vertical-align:top;
width:113px; height:65px; padding-top:31px;
font-size:24px; text-transform:uppercase; text-align:center;
background:black; color:white; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbFRMII {
display:inline-block; vertical-align:top; margin-left:5px;
width:112px; height:65px; padding-top:31px;
font-size:24px; text-transform:uppercase; text-align:center;
background:#64B3AC; color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; margin-top:-25px; margin-left:367px;
width:416px; height:13px; padding:5px; overflow:auto;
background:white; border:1px solid #efefef; color:black; /* MODIFIABLE */
font-size:11px; text-align:center; text-transform:uppercase;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:150px; height:226px; padding:5px 5px 0; overflow:auto;
background:grey; /* MODIFIABLE */
text-align:center; line-height:0px; color:rgba(0,0,0,0);
}
/* LIEN SOUS-FORUM */
.sfFRM a{
display:block; margin-bottom:5px; padding:5px;
text-transform:uppercase; text-align:center; font-size:10px; line-height:14px;
background:white; color:grey; /* MODIFIABLE */
}
/**CATÉGORIES FIN**/
Revenir en haut Aller en bas
Modification catégories Empty Ven 15 Juil - 19:09
Bonjour,

Tout est parfait, ça marche du tonnerre, merci beaucoup !!!
Bonne journée à vous What a Face Like a Star @ heaven cat
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum