Catégories background

/** CATÉGORIES & SOUS-FORUMS - DÉBUT **/

 /* class de la catégorie */
.f_categorie {
    padding: 0 0 0 5px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    margin: 15px 0 10px 0;
    height: 20px;
    line-height: 0px;
    letter-spacing: 1px;
}

 /* texte de la catégorie */
.f_categorie h2 {
    color: black;
    font-size: 30px;
    font-family: Georgia;
    font-weight: 100;
    margin-top: 50px;
}

 /* applique un effet aux sous-sous-forums ayant un nouveau message */
.gensmall.ff_new {font-weight: bold;padding-left: 4px}

 /* les liens des sous-sous-forums */
.f_links a {
    display: block;
    text-align: justify;
    font-family: Tahoma;
    font-size: 9px;
    padding: 0px 0 1px 1px;
    text-transform: uppercase;
}
.f_links {font-size: 0}

 /* cacher les images des liens - ne pas enlever de préférence */
.f_links img {height: 0;width: 0}

 /* class contour des liens des sous-sous-forums */
.f_right {
    display: inline-block;
    width: 200px;
    float: right;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 144px;
    padding: 5px;
    background-color: white;
    text-align: right;
}

 /* cadre blanc de la description */
.f_cadre {
    background-color: rgba(300,300,300,0.75);
    padding: 5px;
}

 /* texte de la description - à modifier à vos risques.. et péril. mwahaha. */
.f_content {
    display: inline-block;
    width: 425px;
    padding: 10px 10px 10px 20px;
    height: 134px;
    margin-top: -10px;
    background-image: linear-gradient(90deg,transparent,#DFDFDF,#DFDFDF,#DFDFDF,#DFDFDF);
    margin-left: -20%;
    position: relative;
}

 /* illustration de la description - taille image = 340x154px*/
.f_sfi {
    float: left;
    margin-right: 10px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0.75;
}

 /* description du sous-forum */
.f_desc {
    height: 155px;
    width: 696px;
    font-family: Calibri;
    font-size: 14px;
    padding: 10px;
    text-align: justify;
    color: #3A3A3A;
}

 /* class de la date */
.f_lp span {
    font-size: 14px;
    color: #2A2A2A;
    font-family: Calibri;
}

 /* class de limage menant vers le dernier message */
.f_lp .last-post-icon {
    position: absolute;
    right: 3px;
    bottom: 3px;
    opacity: 0.75;
}

 /* class du lien menant vers le dernier message */
.f_lp a[href^="/t"] {
    color: #232323;
    font-size: 13px;
    font-weight: bold;
    font-family: Arial;
    text-transform: uppercase;
}

 /* class contourant lavatar de lauteur du dernier post */
.f_lpa {
    display: inline-block;
    float: left;
    padding-right: 5px;
    width: 55px;
    height: 55px;
    overflow: hidden;
    margin-top: -2px;
}

 /* lavatar de lauteur du dernier post */
.f_lpa img {
    width: 55px;
    height: auto;
}


 /* class regroupant toutes les infos du dernier post */
.f_lp {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background-image: linear-gradient(90deg,transparent,rgba(300,300,300,0.6),rgba(300,300,300,0.7));
    height: 65px;
    width: 40%;
    text-align: right;
    padding-right: 2%; }

 /* css apporté à la banderole lorsquil y a un nouveau message */
.f_line.f_new {
background-color: #2AB3CD;
background-image: url(http://i.imgur.com/TaXWsDT.png);
background-repeat: no-repeat }

 /* cacher les images old et new - à retirer si vous souhaitez voir l image old */
.f_folder img[title="Pas de nouveaux messages"] {display: none}
.f_folder img[title="Nouveaux messages"] {height: 0;width: 0}

 /* statistiques du sous-forum */
.f_stats {
    display: inline-block;
    vertical-align: super;
    padding: 1px 5px 2px 5px;
    font-size: 13px;
    color: white;
    font-weight: bold;
    background-color: rgba(0,0,0,0.08);
    margin-left: 5px;
}

 /* le titre du sous-forum */
.f_forumlink a {
display: inline-block;
color: white !important;
font-family: Oswald;
text-transform: uppercase;
font-size: 23px;
letter-spacing: 1px;
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
line-height: 45px;
padding-left: 5px }

 /* alignements sur la banderole - à ne pas toucher */
.f_lpb {width: 250px;padding-top: 2%}
.f_forumlink {display: inline-block}
.f_folder {display: inline-block}

 /* la banderole du haut */
.f_line {
background-color: #5c8a93;
height: 45px;
padding: 10px;
position: relative }

 /* la class regroupant tout le sous-forum */
.f_ {
background-color: #dfdfdf;
height: 219px;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
width: 930px;
position: relative }

/** CATÉGORIES & SOUS-FORUMS - FIN **/

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="f_categorie">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead --> <!-- END cathead -->

<!-- BEGIN forumrow -->
<div class="f_">

<div class="f_line">
  <div
 class="f_forumlink"><a
href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="f_stats">{catrow.forumrow.POSTS} M | {catrow.forumrow.TOPICS} S</div>
  <div
 class="f_folder"><img
title="{catrow.forumrow.L_FORUM_FOLDER_ALT}"
src="{catrow.forumrow.FORUM_FOLDER_IMG}"
alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
  <div class="f_lp"><div align="right"><div class="f_lpb">
  <!--
 BEGIN avatar --><div
class="f_lpa">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!--
 END avatar -->
    <span>{catrow.forumrow.LAST_POST}</span></div></div></div>
</div>
 
<div class="f_desc">{catrow.forumrow.FORUM_DESC}</div>
<div class="f_right"><div class="f_links">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>

</div>
<!-- END forumrow -->
<!-- BEGIN catfoot --> <!-- END catfoot -->
<!-- BEGIN tablefoot --> <!-- END tablefoot -->
<!-- END catrow -->


<script>
$(function() {
  $('img[title="Nouveaux messages"]').parent().parent().addClass('f_new');
});
</script>

<script>
$(function() {
  $('.f_links img[title="Nouveaux messages"]').parent().next().addClass('ff_new');
});
</script>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div class="f_sfi1">
 <img src="image" />
</div>
<div class="f_content"><div class="f_cadre">
 Suspendisse
 libero enim, <strong>ornare nec tellus quis</strong>,
feugiat dapibus neque. Praesent laoreet sapien sollicitudin ultricies
luctus. Suspendisse libero enim, ornare nec tellus quis, feugiat dapibus
 neque. Praesent laoreet sapien sollicitudin ultricies luctus.
Suspendisse libero enim, ornare nec tellus quis, feugiat dapibus neque.
Praesent laoreet sapien sollicitudin ultricies luctus.
</div></div>