Codes et explications
Vous pouvez installer votre sidebar dans un widget mais je préfère personnellement la mettre directement dans le template du forum. Dans votre panneau d'administration, allez dans Affichage > Templates > Général > overall_header. Cherchez le morceau de code suivant (l'ouverture du body) :
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Selon les versions de votre thème, cette ligne peut être différente. Ce qui compte, c'est surtout de repérer la balise ouvrante de
body.Juste après, collez le code de votre sidebar :
Made for carnage
RPG Original nc-18
Le staff
Top sites
Toujours dans le même template, remontez de quelques lignes et juste après l'ouverture de la balise
head, collez le code suivant :- Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Oswald:200,700|Roboto" rel="stylesheet" />
Enregistrez votre template et publiez-le.
Dans Affichage > Couleurs > Feuille de style CSS, collez le code suivant :
- Code:
/***********************************
*** SIDEBAR PAR AWFUL ***
**********************************/
.sidebar {
background-color: #9c86ca;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
height: 100%;
height: 1000px;
left: 0;
padding: 15px;
position: fixed;
top: 0;
transform: translateX(-100%);
transition: 0.3s;
width: 200px;
z-index: 1000;
}
.sidebar a, .sidebar a:hover, .sidebar a:active {
text-decoration: none !important;
}
.sidebar--right {
left: initial;
right: 0;
transform: translateX(100%);
}
.sidebar--right .sidebar_btn {
left: -30px;
}
.sidebar_btn {
background-color: #9c86ca;
border: 0;
cursor: pointer;
height: 30px;
outline: 0;
position: absolute;
right: -30px;
width: 30px;
}
.sidebar_btn i {
color: #000;
transform: rotate(45deg);
transition: color 0.3s, transform 0.3s 0.3s;
}
.sidebar_btn:hover i {
color: #4f3b78;
}
.sidebar--deployed {
transform: translateX(0);
}
.sidebar--deployed .sidebar_btn i {
transform: rotate(0);
}
.sidebar_title {
color: #4f3b78;
font-family: "Oswald", sans-serif;
font-size: 1.8em;
font-weight: 700;
line-height: 1em;
margin: 0;
text-transform: uppercase;
}
.sidebar_title b {
color: #b19ae2;
text-shadow: 1px 1px 0 #4f3b78, 1px -1px 0 #4f3b78, -1px 1px 0 #4f3b78, -1px -1px 0 #4f3b78;
}
.sidebar_small-title {
color: #4f3b78;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0.3em;
margin: 5px 0 0;
text-transform: uppercase;
}
.sidebar_text {
color: #fff;
font-size: 0.7em;
text-align: justify;
}
.sidebar_menu {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
}
.sidebar_menu li {
display: flex;
margin-bottom: 8px;
}
.sidebar_menu li a {
background-color: #7f6aab;
border-radius: 5px;
color: #fff;
font-size: 0.6em;
padding: 5px;
text-transform: uppercase;
transition: 0.3s;
width: 100%;
}
.sidebar_menu li a:hover {
background-color: #947dc5;
}
.sidebar_menu li a i {
color: #4f3b78;
margin-right: 10px;
}
.sidebar_subtitle {
color: #4f3b78;
font-family: "Oswald", sans-serif;
font-size: 1.1em;
font-weight: 700;
letter-spacing: 1px;
margin: 20px 0 10px;
text-transform: uppercase;
}
.sidebar_staff {
align-items: center;
background-color: #ccc;
border-radius: 5px;
height: 30px;
margin-bottom: 5px;
overflow: hidden;
padding-left: 50px;
position: relative;
}
.sidebar_staff-img {
width: 50px;
position: absolute;
left: 0;
transform: scale(1);
transition: 0.3s;
}
.sidebar_staff-info {
background: #7f6aab;
display: flex;
flex-direction: column;
font-size: 0.6em;
height: 100%;
justify-content: center;
padding: 0 10px;
position: relative;
text-transform: uppercase;
}
.sidebar_staff-info::before, .sidebar_staff-info::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 15px 0;
border-color: transparent #7f6aab transparent transparent;
position: absolute;
left: -20px;
top: 0;
}
.sidebar_staff-info::after {
top: initial;
bottom: 0;
border-width: 0 0 15px 20px;
border-color: transparent transparent #7f6aab transparent;
}
.sidebar_staff-info b {
color: #fff;
}
.sidebar_staff-info div {
color: #b692ff;
display: flex;
justify-content: space-between;
}
.sidebar_staff-info div a {
color: #4f3b78;
}
.sidebar_staff:hover .sidebar_staff-img {
transform: scale(1.3);
}
.sidebar_top {
display: flex;
justify-content: space-between;
}
.sidebar_top a {
border: 3px solid #b692ff;
font-family: "Oswald", sans-serif;
display: inline-flex;
height: 30px;
width: 30px;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 50%;
font-weight: 700;
box-shadow: 0 0 0 0 inset #7f6aab;
transition: 0.3s;
}
.sidebar_top a:hover {
box-shadow: 0 0 0 3px inset #7f6aab;
}
Voilà, votre sidebar est installée ! Un peu de javascript, maintenant, pour animer tout ça.
Dans votre panneau d'administration, allez dans Modules > HTML & Javascript > Gestion des codes Javascript. Si ce n'est pas fait, activez la gestion des codes javascript, puis créez un nouveau javascript en lui donnant le titre de votre choix. Cochez "Sur toutes les pages" et collez le code suivant :
- Code:
$(document).ready(function () {
let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');
function getCookie(sKey) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
};
btn.onclick = () => {
if (getCookie("sidebar")) {
document.cookie = "sidebar=";
} else {
document.cookie = "sidebar=true";
}
sidebar.classList.toggle("sidebar--deployed");
};
if (getCookie("sidebar")) {
sidebar.classList.toggle("sidebar--deployed");
}
});
Pour installer votre sidebar sur la droite de votre forum, éditez la class de la sidebar en lui ajoutant la class
sidebar--right:- Code:
<div class="sidebar sidebar--right" id="sidebar">
|
|
|