Codes et explications
phpBB2
Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".
Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".
Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :
- Code:
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900" rel="stylesheet">
Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :
- Code:
<table width="100%" 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="cat-wrap">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="wrap-forum">
<div class="forum-top">
<div class="forum-titre">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
<div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
<div class="stats-forum">
<div><b>{catrow.forumrow.TOPICS}</b> topics</div>
<div>
<b>{catrow.forumrow.POSTS}</b> posts</div>
</div>
<div class="avatar-forum">
<div class="img-forum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="last-forum">
{catrow.forumrow.LAST_POST}
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot --></div>
<!-- END tablefoot --><!-- END catrow -->
<script>
$('img[title="Nouveaux messages"]').closest('.img-forum').addClass('new');
$('.wrap-forum').each(function(){
var noavatar = $(this);
var avatar = $(this).find('.avatar-forum > div + img');
if( avatar.length == 0){
$(noavatar).addClass("no-avatar");
}
});
$('.sous-forum').each(function(){
var awful = $(this).find('a').length;
if( awful > 4){
$('a', this).eq(3).nextAll().hide().addClass('toggleable');
$(this).append('<div class="more">+</div>');
}
});
$('.sous-forum').on('click','.more', function(){
if( $(this).hasClass('less') ){
$(this).text('+').removeClass('less');
}else{
$(this).text('-').addClass('less');
}
$(this).siblings('a.toggleable').toggle();
});
</script>
Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
- Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*titre de catégorie*/
.cat-wrap {
margin-top: 25px;
margin-bottom: 25px;
}
.titre-cate {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
width: 850px;
margin: auto;
background: #272727;
padding: 40px 20px 20px;
box-sizing: border-box;
border-bottom: 5px solid #f3e224;
}
.titre-cate h2 {
font-size: 35px;
color: #fff;
margin: 0px;
font-weight: 900;
}
.titre-cate h2:first-letter {
color: #f3e224;
}
/*bloc forum*/
.wrap-forum {
width: 850px;
height: 110px;
background-color: #444;
position: relative;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 1px solid #353535;
padding: 0px 20px 10px;
box-sizing: border-box;
}
.wrap-forum:last-child {
margin-bottom: 20px;
}
.wrap-forum a, .wrap-forum a:hover {
text-decoration: none!important;
}
.wrap-forum.no-avatar .img-forum {
display: none;
}
/*partie haute du forum */
.forum-top {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/*Titre forum*/
.forum-titre a {
font-weight: 900;
text-transform: uppercase;
line-height: 40px;
font-size: 16px;
color: #fff!important;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-family: 'Montserrat', sans-serif;
}
.forum-titre a:hover {
color: #8f8a56 !important;
}
/*Suppression de l'image de nouveau message*/
.img-forum img {
display: none;
}
/*remplacement de l'image de nouveau message par un 'x' rouge pour old*/
.img-forum:before {
content: "×";
height: 15px;
width: 15px;
background: #C26F6F;
position: absolute;
z-index: 2;
border-radius: 50%;
text-align: center;
line-height: 15px;
color: #fff;
font-size: 10px;
padding-left: 1px;
box-sizing: border-box;
}
/*changement du 'x' rouge en '✓' vert pour les nouveaux messages*/
.new:before {
background: #5AC854;
content: "✓";
}
/*description de forum*/
.forum-desc {
height: 50px;
width: 500px;
overflow: auto;
font-size: 11px;
text-align: justify;
padding-right: 10px;
line-height: 12px;
margin-right: 20px;
color: #a1a1a1;
}
/*Custom scrollbar (seulement pour Chrome !)*/
.forum-desc::-webkit-scrollbar {
width: 3px;
}
.forum-desc::-webkit-scrollbar-track {
background-color: #272727;
border: 1px solid #444444;
}
.forum-desc::-webkit-scrollbar-thumb {
background-color: #f3e224;
}
/*Statistiques topics et posts*/
.stats-forum {
text-transform: uppercase;
font-size: 8px;
letter-spacing: 1px;
color: #9f9f9f;
-ms-flex-item-align: center;
align-self: center;
margin-bottom: 10px;
}
/*Dernier message*/
.last-forum {
text-transform: uppercase;
font-size: 10px;
color: #9f9f9f;
}
.last-forum a {
text-transform: none;
}
.last-forum span > a:first-child {
font-size: 15px;
color: #f3e224;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.last-forum span > a:first-child:hover {
color: #8f8a56;
}
.last-forum:empty:before {
content: "Pas de nouveaux messages";
font-size: 10px;
width: 100px !important;
display: block;
bottom: 10px;
position: relative;
}
/*Sous-forums*/
.sous-forum {
font-size: 0;
width: 450px;
z-index: 3;
text-align: right;
-ms-flex-item-align: center;
align-self: center;
}
.sous-forum a {
display: inline-block;
font-size: 9px !important;
background: #272727;
margin: 0 2px 3px;
padding: 1px 4px;
text-transform: uppercase;
color: #fff !important;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.sous-forum a:hover {
background: #444;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
.more {
display: inline-block;
background: green;
font-size: 10px;
width: 13px;
height: 13px;
border-radius: 50%;
text-align: center;
line-height: 13.5px;
color: #e7e7e7;
box-sizing: border-box;
padding-left: 1px;
cursor: pointer;
margin-left: 5px;
}
/*Couleur bouton "-"*/
.more.less {
background: #c35050;
}
/*Avatar du dernier posteur*/
.avatar-forum {
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
background-size: 100%;
margin-left: auto;
margin-right: 20px;
}
.avatar-forum img {
width: 50px;
}
phpBB3
Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".
Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".
Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :
- Code:
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900" rel="stylesheet">
Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :
- Code:
<ul class="linklist">
<!-- BEGIN switch_user_logged_in -->
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
<!-- END switch_user_logged_in -->
<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
<!-- BEGIN switch_user_logged_in -->
<li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
<!-- END switch_user_logged_in -->
</ul>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cat-wrap">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="wrap-forum">
<div class="forum-top">
<div class="forum-titre">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
<div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
<div class="stats-forum">
<div><b>{catrow.forumrow.TOPICS}</b> topics</div>
<div>
<b>{catrow.forumrow.POSTS}</b> posts</div>
</div>
<div class="avatar-forum">
<div class="img-forum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="last-forum">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot --></div>
<!-- END tablefoot -->
<!-- END catrow -->
<script>
$('img[title="Nouveaux messages"]').closest('.img-forum').addClass('new');
$('.wrap-forum').each(function(){
var noavatar = $(this);
var avatar = $(this).find('.avatar-forum > div + img');
if( avatar.length == 0){
$(noavatar).addClass("no-avatar");
}
});
$('.sous-forum').each(function(){
var awful = $(this).find('a').length;
if( awful > 4){
$('a', this).eq(3).nextAll().hide().addClass('toggleable');
$(this).append('<div class="more">+</div>');
}
});
$('.sous-forum').on('click','.more', function(){
if( $(this).hasClass('less') ){
$(this).text('+').removeClass('less');
}else{
$(this).text('-').addClass('less');
}
$(this).siblings('a.toggleable').toggle();
});
</script>
<!-- BEGIN switch_on_index -->
<ul class="linklist">
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> • </li>
<li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
<!-- BEGIN switch_delete_cookies -->
<li class="rightside"><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 -->
</ul>
<!-- END switch_on_index -->
Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
- Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*titre de catégorie*/
.cat-wrap {
margin-top: 25px;
margin-bottom: 25px;
}
.titre-cate {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
width: 850px;
margin: auto;
background: #272727;
padding: 40px 20px 20px;
box-sizing: border-box;
border-bottom: 5px solid #f3e224;
}
.titre-cate h2 {
font-size: 35px;
color: #fff;
margin: 0px;
font-weight: 900;
}
.titre-cate h2::first-letter {
color: #f3e224;
}
/*bloc forum*/
.wrap-forum {
width: 850px;
height: 110px;
background-color: #444;
position: relative;
font-family: 'Roboto', sans-serif;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #353535;
padding: 0px 20px 10px;
box-sizing: border-box;
}
.wrap-forum:last-child {
margin-bottom: 20px;
}
.wrap-forum a, .wrap-forum a:hover {
text-decoration: none!important;
}
.wrap-forum.no-avatar .img-forum {
display: none;
}
/*partie haute du forum */
.forum-top {
flex: 100%;
height: 40px;
display: flex;
justify-content: space-between;
}
/*Titre forum*/
.forum-titre a {
font-weight: 900;
text-transform: uppercase;
line-height: 40px;
font-size: 16px;
color: #fff!important;
transition: all 0.5s;
font-family: 'Montserrat', sans-serif;
}
.forum-titre a:hover {
color: #8f8a56 !important;
}
/*Suppression de l'image de nouveau message*/
.img-forum img {
display: none;
}
/*remplacement de l'image de nouveau message par un 'x' rouge pour old*/
.img-forum:before {
content: "×";
height: 15px;
width: 15px;
background: #C26F6F;
position: absolute;
z-index: 2;
border-radius: 50%;
text-align: center;
line-height: 15px;
color: #fff;
font-size: 10px;
padding-left: 1px;
box-sizing: border-box;
}
/*changement du 'x' rouge en '✓' vert pour les nouveaux messages*/
.new:before {
background: #5AC854;
content: "✓";
}
/*description de forum*/
.forum-desc {
height: 50px;
width: 500px;
overflow: auto;
font-size: 11px;
text-align: justify;
padding-right: 10px;
line-height: 12px;
margin-right: 20px;
color: #a1a1a1;
}
/*Custom scrollbar (seulement pour Chrome !)*/
.forum-desc::-webkit-scrollbar {
width: 3px;
}
.forum-desc::-webkit-scrollbar-track {
background-color: #272727;
border: 1px solid #444444;
}
.forum-desc::-webkit-scrollbar-thumb {
background-color: #f3e224;
}
/*Statistiques topics et posts*/
.stats-forum {
text-transform: uppercase;
font-size: 8px;
letter-spacing: 1px;
color: #9f9f9f;
align-self: center;
margin-bottom: 10px;
}
/*Dernier message*/
.last-forum {
text-transform: uppercase;
font-size: 10px;
color: #9f9f9f;
}
.last-forum a {
text-transform: none;
}
.last-forum > a:first-child {
font-size: 15px;
color: #f3e224;
transition: all 0.3s;
}
.last-forum > a:first-child:hover {
color: #8f8a56;
}
.wrap-forum.no-avatar .last-forum::before {
content: "Pas de nouveaux messages";
font-size: 10px;
width: 100px !important;
display: block;
bottom: 10px;
position: relative;
}
/*Sous-forums*/
.sous-forum {
font-size: 0;
width: 450px;
z-index: 3;
text-align: right;
align-self: center;
}
.sous-forum a {
display: inline-block;
font-size: 9px !important;
background: #272727;
margin: 0 2px 3px;
padding: 1px 4px;
text-transform: uppercase;
color: #fff !important;
transition: all 0.3s;
}
.sous-forum a:hover {
background: #444;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
.more {
display: inline-block;
background: green;
font-size: 10px;
width: 13px;
height: 13px;
border-radius: 50%;
text-align: center;
line-height: 13.5px;
color: #e7e7e7;
box-sizing: border-box;
padding-left: 1px;
cursor: pointer;
margin-left: 5px;
}
/*Couleur bouton "-"*/
.more.less {
background: #c35050;
}
/*Avatar du dernier posteur*/
.avatar-forum {
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
background-size: 100%;
margin-left: auto;
margin-right: 20px;
}
.avatar-forum img {
width: 50px;
}
