Catégories

Sam 22 Juil - 15:29
Bonjour :) Voilà, comme j'adore totalement ce que vous faites, je viens vers vous pour un petit code de catégorie ^^


Largeur maximale : Tout est indiqué sur le schéma :)
Hauteur maximale : Pareil, tout y est indiqué.
Schéma : Vous avez tout ici, autant la maquette que la maquette avec indication que les triangles, l'avatar, etc. http://imgur.com/a/DtymC
Éléments : Normalement tout est bien indiqué, mais si vous avez besoin de plus d'information, n'hésitez pas à me le dire :)
Images : Il y a tout plus haut ^^
Animations : En survolant l'image de l'avatar, je souhaiterais que celui-ci deviennent légèrement noir et blanc, mais sans l'être totalement. J'ai seulement oublié de l'indiquer, mais la couleur de date+heure c'est du gris.
Informations supplémentaires : Je souhaiterais également que les forums se positionnent côte à côte deux par deux (ou trois par trois).


Voilà, merci d'avance :3
Revenir en haut Aller en bas
Dim 23 Juil - 11:05
Bonjour,

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

Code:
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<table width="800px" border="0" cellspacing="0" 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>
    <div class="mdlCAT"><br clear="all" /><!-- END tablehead -->

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

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto 0; width:800px; padding:15px 0; text-align:center;
background:lightblue; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase; font-family:Arial;
color:white; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px; text-align:center;
background:#CCC; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
float:left; margin-left:60px; margin-bottom:40px;
width:300px; height:380px;
background:#8EBAEC; /* MODIFIABLE */
font-family:Arial; text-align:center;
}
.FRM:nth-of-type(even) {
margin-left:85px;
}
/* BLOC TITRE FORUM */
.tleFRM {
margin-left:-35px; width:375px; height:35px; padding-top:15px; background-size:375px 50px;
text-align:center; font-size:14px; font-family:Courgette;
background:url(http://i.imgur.com/WCAYjXr.png); /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
margin-top:15px;
color:white !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
position:absolute; margin-left:-5px; margin-top:10px; font-family:Courgette;
color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; margin-left:10px; margin-top:45px; width:115px;
font-size:10px; color:grey; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
position:absolute; margin-top:-20px; margin-left:-55px; width:115px;
text-align:center; font-family:Courgette; font-size:12px;
color:white; /* MODIFIABLE */
}
.lmsgFRM a.gensmall {
margin-top:-30px;
}
.lmsgFRM a.last-post-icon {
margin-top:5px; margin-left:5px;
}
/* BLOC DESCRIPTION & SOUS-FORUMS */
.boxFRM {
position:absolute; margin-top:10px; margin-left:150px;
width:170px; padding:15px 0;
background:#4875A8; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
margin:0 auto 5px; width:135px; height:120px; padding:5px; overflow:hidden;
font-size:11px; text-align:justify;
border-top:1px dotted white; border-bottom:1px dotted white; color:white; /* MODIFIABLE */
}
.descFRM:hover {
overflow-y:auto;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
margin:auto; width:160px; height:80px; overflow:hidden;
font-family:Courgette;
}
.sfFRM:hover {
overflow-y:auto;
}
/* SOUS-FORUMS */
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
position:absolute; margin-top:80px; margin-left:-55px;
width:174px; height:285px;
background:url(https://img15.hostingpics.net/pics/482415Crop.png); /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
.avaFRM div {
position:absolute; z-index:3; margin-left:40px; margin-top:30px;
width:130px; height:230px; overflow:hidden;
background:black; /* MODIFIABLE */
}
.avaFRM img{
height:230px; transition:all 0.55s ease; -webkit-transition:all 0.55s ease;
}
.FRM:hover .avaFRM img{
filter:grayscale(0.5); -webkit-filter:grayscale(0.5);
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
position:absolute; margin-top:320px; margin-left:165px; font-family:Courgette;
color:white; /* MODIFIABLE */
}
Revenir en haut Aller en bas
Dim 23 Juil - 17:14
Ooooh c'est totalement parfait, merci Mlle Skaemp :D ♥
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum