Le CSS :
- Code:
/* ---------- CATEGORIE ---------- */
/* Corps Catégorie */
.corCAT {
width:800px;
background-color:white;
margin-right:auto;
margin-left:auto;
}
/* Titre Catégorie */
.titCAT {
text-align:right;
margin-bottom:10px;
}
.titCAT h2 {
margin-top:20px;
font-family:'Oleo Script',cursive;
font-size:30px;
color:pink;
float:right;
width:80%;
}
.titCAT img {
margin-top:12.5px;
float:right;
width:10%;
}
/* Corps Forum */
.corFO {
margin-right:auto;
margin-left:auto;
width:780px;
border:2px solid lightpink;
height:auto;
border-radius:30px;
border-top:none!important;
padding:10px;
position:relative;
}
/* New - No New - Lock */
.newFO {
width:100px;
height:100px;
float:left;
display:inline-block;
margin-left:30px;
}
/* Bloc titre - description */
.cortidesFO {
float:left;
width:40%;
margin-right:20px!important;
}
.titFO {
margin-left:15px;
margin-bottom:10px;
}
.titFO a {
font-family:Arial;
font-size:18px;
font-weight:bold;
color:black;
transition:all 0.5s ease;
}
.titFO a:hover {
color:lightpink;
}
.descFO {
margin-left:15px;
width:100%;
height:60px;
}
.descFO p {
width:inherit;
overflow:auto;
height:60px;
font-family:Arial;
font-size:12px;
color:black;
text-align:justify;
}
/* Sous-forums */
.sforFO {
float:left;
width:30%;
height:100px;
overflow-y:auto;
margin-left:2%;
}
.sforFO ul {
list-style-type:none!important;
}
.sforFO ul li {
list-style-type:none!important;
}
/* LIENS SOUS-FORUMS */
.sforFO a {
display:block; margin:auto; padding:2px 0;
line-height:18px; text-align:center; text-transform:uppercase; font-size:12px;
background:lightpink; color:white !important; /* MODIFIABLE */
border:1px solid white;
transition:all 0.65s linear;
}
.sforFO div a:hover {
color:lightpink!important;
background-color:white;
border:1px solid lightpink;
}
/* MESSAGES + SUJETS */
.messuj {float:left;
width:7%;padding:5px;
padding-top:20px;}
.messuj p {
font-family:arial;
text-align:center;
color:darkgrey;
font-weight:bold;
line-height:25px;
}
/* ---------- FIN CATEGORIE ---------- */
Le code dans le template index_box :
- Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet"/>
<div class="corCAT">
<div class="titCAT">
<img src="https://zupimages.net/up/18/10/uxrp.png"/>
<h2>
{catrow.tablehead.L_FORUM}
</h2>
<div class="clear"></div>
</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="corFO">
<div class="newFO">
<span class="status clearfix" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
</span>
</div>
<div class="cortidesFO">
<div class="titFO">
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
</div>
<div class="descFO">
<p class="forum-desc">{catrow.forumrow.FORUM_DESC}</p>
</div>
</div>
<div class="sforFO">
<div id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
</script>
</div>
<div class="messuj"><p>S : {catrow.forumrow.TOPICS}<br/>M : {catrow.forumrow.POSTS}</p></div>
<div class="clear"></div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<br />
<!-- END tablefoot -->
</div>
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
<ul>
<!-- BEGIN switch_delete_cookies -->
<li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
<!-- END switch_delete_cookies -->
<!-- BEGIN switch_user_logged_in -->
<li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
<!-- END switch_user_logged_in -->
</ul>
</div>
<!-- END switch_on_index -->
Images no new/new/lock :