Jawn
she/her mais n'importe quel pronom fera l'affaire - codeuse - accro à Genshin Impact - vive les fleurs et la nature - créditez les codes
73227/01/2018
• Ce code est fait pour la version ModernBB de Forumactif. Cependant, il est possible de l'adapter pour les autres versions à condition de savoir un peu bidouiller.
• La barre est faite pour prendre toute la hauteur de votre page et permet d'afficher l'avatar de la personne connectée.
• Le fond blanc sur la droite de l'image correspond simplement au fond forum utilisé pour prendre un screen du code.
Tout d'abord, il va falloir déplacer la barre de navigation pour installer la nouvelle. Pour plus de clarté, on va supprimer tout ce qui nous embête pour la refaire au propre. Ainsi, dans votre template Panneau d'administration > Affichage > Templates > Général > overall_header
Vous allez supprimer certaines lignes pour que seulement ceci s'affiche à la place :
- Code:
<div id="page-header">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<div class="wrap">
Ainsi nous avons supprimé la barre de navigation de base de Forumactif ainsi que l'espace bannière qui déforme tout sur ModernBB de base. Maintenant nous allons donc replacer la nouvelle barre de navigation. Rendez-vous dans le même template Panneau d'administration > Affichage > Templates > Général > overall_header, à la ligne 230 vous avez :
- Code:
<body id="modernbb">
Sautez simplement une ligne et rajoutez :
- Code:
<div class="hl_navbar">{GENERATED_NAV_BAR}</div>
<div class="js-avatar"></div>
Enregistrez et validez votre template. Ensuite, il faut rajouter le CSS. Pour cela, allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS puis copiez collez le code suivant :
- Code:
:root {
--lavender: #e9e2d7;
--pink: #e8d1cd;
--sage: #e3e8cf;
--thyme: #d6e6cf;
--laurel: #96aace;
--whazel: #c79cd3;
--darkgrey: #1d2337;
--blue: #c894ab;
--purple: #c15d88;
--line: #141416;
--shadow: #363f4f;
--linku: #d2d2d2;
}
.hl_navbar {
list-style: none;
width: 45px;
position: fixed;
height: 100%;
top: 20px;
padding: 130px 15px 15px 5px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,.05);
background-image: linear-gradient(-225deg, var(--blue) 0%, var(--purple) 100%);
left:20px;
}
.hl_navbar img {
width: 35px;
height: 35px;
border-radius: 6px;
}
.js-avatar {
width: 140px;
height: 140px;
overflow: hidden;
border-radius: 100%;
top: -20px;
left: -20px;
position: fixed;
border: solid 20px #111312;
}
.js-avatar img {
width: 100%;
filter: grayscale(80%) contrast(150%);
}
Ensuite, nous allons afficher l'avatar du compte connecté par du Javascript. Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript. Il vous faudra activer la gestion des codes Javascript et cliquer sur "créer un nouveau javascript" et configurez-le comme ceci :
- Code:
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})
});
Bien, maintenant nous avons notre barre de navigation mais les images n'apparaissent pas. Rendez-vous dans Panneau d'administration > Affichage > Page d'acceuil > En tête & Navigation et configurez ce qui s'y trouve ainsi :
Maintenant, il ne vous reste plus qu'à rajouter les images que vous voulez faire apparaître. Rendez-vous dans Panneau d'administration > Affichage > Images et couleurs > Gestion des Images > Mode Avancé et c'est un peu plus bas que vous allez pouvoir rentrer chaque image pour chaque lien désiré. Ici, je vous mets à la suite les images utilisées pour cette barre de navigation mais libre à vous d'en mettre d'autres.
Index :
- Code:
https://imgur.com/O7FslOM.png
FAQ :
- Code:
https://imgur.com/FeZBnza.png
Rechercher :
- Code:
https://imgur.com/5n5ujFE.png
Membres :
- Code:
https://imgur.com/RhoW6N7.png
Groupes :
- Code:
https://imgur.com/1FX3ZwE.png
Éditer mon profil :
- Code:
https://imgur.com/SkwnbP4.png
Messages privés :
- Code:
https://imgur.com/22hVGVB.png
Nouveaux messages privés :
- Code:
https://imgur.com/tAyWvXJ.png
S'enregistrer :
- Code:
https://imgur.com/dAnoPEQ.png
Connexion / Déconnexion :
- Code:
https://imgur.com/439wku2.png
Et en bonus si ça peut vous servir, une icône pour Discord :
- Code:
https://imgur.com/vq1pZcv.png
Enjoy
# Barre de navigation sur le côté - Sam 24 Aoû - 16:53Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|
