Au survol des icônes sur le bloc des derniers messages, le nombre de topics et le nombre de messages apparaissent
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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Cedarville+Cursive&family=Montserrat:wght@400;900&display=swap" rel="stylesheet">
<link href="https://cdn.lineicons.com/3.0/lineicons.css" 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="cate">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forum-wrap">
<div class="forum-top">
<div class="forum-title">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a class="a-title" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}></div>
<div class="stats-forum">
<div data_stats="{catrow.forumrow.TOPICS} topics"><i class="lni lni-book"></i></div><div data_stats="{catrow.forumrow.POSTS} posts"><i class="lni lni-pencil"></i></div>
</div>
</div>
<div class="forum-desc">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="forum-last">{catrow.forumrow.LAST_POST}</div>
<div class="forum-avatar"><!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<div class="forum-img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot --></div>
<!-- END tablefoot --><!-- END catrow -->
<script>
const forums=document.querySelectorAll(".forum-wrap");forums.forEach(e=>{e.querySelector(".forum-last").innerText||e.classList.add("noMessage"),e.querySelector('img[title="Nouveaux messages"]')&&e.classList.add("new");const t=e.querySelectorAll(".stats-forum > div");t&&t.forEach(o=>{o.addEventListener("mouseenter",e=>{const t=document.createElement("div");t.id="stats-tooltip",t.innerText=o.getAttribute("data_stats"),document.body.appendChild(t)}),o.addEventListener("mouseleave",e=>{const t=document.getElementById("stats-tooltip");t.parentElement.removeChild(t)}),o.addEventListener("mousemove",function(e){var t=e.pageX+10,e=e.pageY+10;const o=document.getElementById("stats-tooltip");o&&(o.style.left=t+"px",o.style.top=e+"px")})})});
</script>
Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
- Code:
/*Personnalisation des catégories par Awful*/
.cate {
margin: auto;
width: 800px;
}
/*Titre des catégories*/
.titre-cate h2 {
color: #fff;
font-family: "Cedarville Cursive", cursive;
font-size: 50px;
margin: auto auto -36px 20px;
text-shadow: 1px 0 0 #f86c6d, -1px 0 0 #f86c6d, 0 1px 0 #f86c6d,
0 -1px 0 #f86c6d;
}
/*Bloc forum*/
.forum-wrap {
background-color: #f86c6d;
border-radius: 5px;
color: #fff;
display: flex;
flex-wrap: wrap;
font-family: "Arimo", sans-serif;
margin: 15px auto;
min-height: 150px;
padding: 15px;
position: relative;
}
.forum-wrap a,
.forum-wrap a:hover {
text-decoration: none !important;
}
.forum-top {
display: flex;
justify-content: space-between;
width: 100%;
}
/*Titre des forums*/
.forum-title .a-title {
color: #fff !important;
font-family: "Montserrat", sans-serif;
font-size: 27px;
font-weight: 900;
letter-spacing: -1px;
text-transform: uppercase;
}
/*Description des forums*/
.forum-desc {
flex: 1;
font-size: 12px;
height: 70px;
margin-top: 20px;
overflow: auto;
padding-right: 8px;
text-align: justify;
}
/*scrollbar sous chrome*/
.forum-desc::-webkit-scrollbar {
width: 3px;
}
.forum-desc::-webkit-scrollbar-track {
background-color: #ce5a5b;
}
.forum-desc::-webkit-scrollbar-thumb {
background: #ffa5a6;
}
/*Avatar dernier forum*/
.forum-avatar {
align-self: center;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 8px #f66c6d;
height: 60px;
overflow: hidden;
background: #fff;
width: 60px;
}
.forum-avatar img {
height: auto;
margin-top: 50%;
transform: translateY(-50%);
width: 100%;
}
/*Dernier message*/
.forum-last {
align-items: center;
align-self: center;
background: #fff;
border-radius: 5px;
box-shadow: 20px 0 0 #fff;
box-sizing: border-box;
color: #000;
display: flex;
font-size: 10px;
height: 60px;
margin-left: 20px;
padding: 8px 10px;
width: 160px;
}
.forum-last span > a:first-child {
color: #a7a7a7;
font-weight: bold;
text-transform: uppercase;
}
.forum-last span > a:first-child:hover {
color: #ccc;
}
.forum-last:empty,
.forum-avatar:empty,
.noMessage .stats-forum {
display: none;
}
/*Image nouveaux messages*/
.forum-img {
align-items: flex-end;
background: #efefef;
box-sizing: border-box;
display: flex;
height: 50px;
padding: 5px;
position: absolute;
right: 10px;
top: -10px;
width: 40px;
}
.forum-img:after {
border-color: transparent transparent #ce5a5b transparent;
border-style: solid;
border-width: 0 0 10px 5px;
content: "";
height: 0;
position: absolute;
right: 40px;
top: 0;
width: 0;
}
.forum-img::before {
color: #b1b1b1;
content: "No new";
font-family: "Montserrat";
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
.new .forum-img {
background: #ffaaaa;
}
.new .forum-img::before {
color: #f66c6d;
content: "New";
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.forum-img img {
display: none;
}
/*Statistiques des forums*/
.stats-forum div {
align-items: center;
background: #f66c6d;
border: 2px solid;
border-radius: 50%;
display: flex;
font-family: "Montserrat";
font-size: 13px;
font-weight: 900;
height: 25px;
justify-content: center;
position: absolute;
right: 95px;
top: 106px;
width: 25px;
}
.stats-forum div:last-child {
right: 130px;
}
#stats-tooltip {
background: #fff;
border-radius: 5px;
font-family: "Montserrat";
font-size: 10px;
padding: 5px;
pointer-events: none;
position: absolute;
text-transform: uppercase;
}
/*Sous forums*/
.sous-forum {
font-size: 0;
margin-top: 20px;
width: 100%;
}
.sous-forum a {
align-items: center;
border: 1px solid #fff;
border-radius: 7px;
color: #fff;
display: inline-flex;
font-family: "Montserrat", sans-serif;
font-size: 9px;
height: 15px;
padding: 0 8px;
margin-right: 4px;
text-transform: uppercase;
transition: 0.3s;
}
.sous-forum a:hover {
border-color: #ffa2a2;
color: #ffa2a2;
}
|
|
|