Rappel du premier message :
Ceci est un code de sous-forums crée suite à la Demande de Araik, ici.
Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Repérez la partie comprise entre BEGIN catrow et END forumrow et remplacez-la par le code ci-dessous /!\ :
Le CSS:
Sous-Forums
Ceci est un code de sous-forums crée suite à la Demande de Araik, ici.
Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne
L'image des sous-forums pour indiquer nouveaux messages/pas de nouveaux messages/verrouillé doit être en 130px*130px. Sinon, il faudra faire des modifications sur le code de positionnement de l'image!
Notez également qu'il n'y a pas de mise en forme des catégories! En effet, la demande était faite sur des catégories rétractables!
Notez également qu'il n'y a pas de mise en forme des catégories! En effet, la demande était faite sur des catégories rétractables!
Le code
Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Repérez la partie comprise entre BEGIN catrow et END forumrow et remplacez-la par le code ci-dessous /!\ :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
<div class="contour_gris_cat">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<div class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</div>
</h{catrow.forumrow.LEVEL}>
<div class="cate_bas">
<div class="descript_caté_entoure"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="liens_ss_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
<div class="position_messages_cat">
<div class="last_mess_nyo"><span class="gensmall">{catrow.forumrow.LAST_POST}<br/>{catrow.forumrow.TOPICS} sujets<br/>{catrow.forumrow.POSTS} messages</span></div>
<div class="new_images">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function(){
var separator = "<br />";
jQuery('span#subforums').each(function(){
var links = jQuery(this).find("a");
if(links.length > 1){
var html = "";
links.each(function(i){
html += "<a href='"+jQuery(this).attr('href')+"' title=\""+jQuery(this).attr('title')+"\" class='gensmall'>"+jQuery(this).text()+"</a>";
if(i+1 != links.length){
html += separator;
}
});
jQuery(this).html(html);
}
jQuery(this).removeAttr('id');
});
});
</script>
</div>
</td>
</tr>
<!-- END forumrow -->
Le CSS:
- Code:
/***** DÉBUT CATÉ *******/
/* Permet de retirer le fond du titre de catégorie */
.secondarytitle {
background: none;
}
/* Permet de mettre de l'espace entre les sous-forums et retirer le fond de table */
.cat-table .forumline .row1, .cat-table .forumline .row2, .cat-table .forumline .row3, .cat-table .forumline .row3Right {
background: none;
padding-bottom: 50px;
}
/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1, .cat-table td.row3.over:hover {
background: none;
}
/* Retire les fond de tables derrières les sous-forums */
.cat-table td.row1.over:hover, .cat-table td.row2 {
background: none;
}
/* Contour des sous-forums */
.contour_gris_cat {
width: 730px;
height: 260px;
margin: auto;
overflow: hidden;
border-radius: 20px;
/* Couleur de fond des sous-forums */
background-color: #999999;
}
/* Placement des liens et titres du sous-forum */
.forumlink {
margin-left: 30px;
margin-top: 10px;
width: 425px;
height: 25px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 50px;
background-color: #CCCCCC;
text-align: center;
}
/* Effet sur les liens de sous-forums */
a.forumlink {
margin: 0;
font-size: 18px;
transition: all ease 1s;
}
/* Au passage de la souris */
a.forumlink:hover,a.forumlink:link, a.forumlink:focus {
text-decoration:none !important;
font-size: 18px;
transition: all ease 1s;
}
/* Mise en place des trois parties */
.cate_bas {
width: 100%;
padding-top: 15px;
padding-left: 10px;
}
/* Bloc de description des catégories */
.descript_caté_entoure {
width: 350px;
height: 190px;
float: left;
overflow: hidden;
border-radius: 10px;
margin-right: 10px;
/* Couleur de fond */
background-color: #666666;
}
/* Lien vers les sous-forums */
.liens_ss_forum {
width: 120px;
height: 170px;
float: left;
/* Alignement */
text-align: center;
border-radius: 10px;
padding: 10px;
margin-left: 10px;
margin-right: 15px;
/* Couleur de fond */
background-color: #666666;
}
/* Effet sur les liens vers les sous-forums */
.liens_ss_forum a {
letter-spacing: 1px;
transition: all ease 1s;
}
/* Effet au passage de la souris */
.liens_ss_forum a:hover {
letter-spacing: 3px;
text-decoration:none !important;
transition: all ease 1s;
}
/* Positionnement du dernier message */
.position_messages_cat {
float: left;
width: 150px;
height: 170px;
position: relative;
margin-left: 10px;
}
/* Positionnement de l'image des derniers messages */
.new_images {
position: absolute;
top: -30px;
left: 7px;
}
/* Transformer l'image en rond */
.new_images img {
border-radius: 50%;
}
/* Mise en forme du dernier message */
.last_mess_nyo {
position: absolute;
top: 60px;
left: 0;
padding-top: 45px;
width: 150px;
height: 85px;
border-radius: 10px;
/* Couleur de fond */
background-color: #666666;
text-align: center;
}
/***** FIN CATÉ *******/
Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
★
