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}">
Juste après, collez le code de votre sidebar :
- Code:
<div id="sidebar">
<a class="active" id="sidebar-trigger" href="#"><span></span></a>
<h2>
Nom <strong>du forum</strong>
</h2>
<div class="sidebar-txt contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="title">
Lien utiles
</div>
<div id="liens" class="sidebar-block">
<a href="#">Règlement</a>
<a href="#">Annexes</a>
<a href="#">Prédéfinis</a>
<a href="#">Partenariat</a>
<a href="#">Contact</a>
<a href="#">Lien</a>
</div>
<div class="title">
Partenaires
</div>
<div class="sidebar-block" id="partenaires">
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
<a href="#" target="blank"><img src="http://via.placeholder.com/50x50" /></a>
</div>
<div class="title">
Staff
</div>
<div class="sidebar-block" id="staff">
<div class="staff-info">
<img src="http://via.placeholder.com/220x50" />
<div class="staff-tooltip">
<h3>Pseudo</h3>
Rôle // <a href="#">MP</a> // <a href="#">Profil</a>
</div>
</div>
<div class="staff-info">
<img src="http://via.placeholder.com/220x50" />
<div class="staff-tooltip">
<h3>Pseudo</h3>
Rôle // <a href="#">MP</a> // <a href="#">Profil</a>
</div>
</div>
<div class="staff-info">
<img src="http://via.placeholder.com/220x50" />
<div class="staff-tooltip">
<h3>Pseudo</h3>
Rôle // <a href="#">MP</a> // <a href="#">Profil</a>
</div>
</div>
</div>
<div class="title">
Votez pour nous !
</div>
<div class="sidebar-block" id="top-site">
<div>
<a href="#"></a>
</div>
<div>
<a href="#"></a>
</div>
<div>
<a href="#"></a>
</div>
<div>
<a href="#"> </a>
</div>
</div>
</div>
Dans Affichage > Couleurs > Feuille de style CSS, collez le code suivant :
- Code:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900');
body {
position: relative;
overflow-x: hidden;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 300px;
background: #4d4d4d;
box-sizing: border-box;
padding: 40px;
font-family: 'Source Sans Pro', sans-serif;
z-index: 999;
}
#sidebar.medium {
width: 250px;
padding: 30px;
}
#sidebar.right {
right: 0;
left: initial !important;
}
#sidebar.right #sidebar-trigger {
left: 10px;
right: initial !important;
}
#sidebar.right.medium {
padding: 30px 10px 30px 40px;
}
#sidebar a, #sidebar a:hover, #sidebar a:active {
text-decoration: none!important;
}
#sidebar a,#sidebar a:hover,#sidebar a:active {
text-decoration: none;
}
#sidebar a {
color: #f5f5f5;
outline: none;
transition: color 0.3s ease-in;
}
#sidebar a:hover {
color: #808080 !important;
}
#sidebar-trigger {
position: absolute;
right: 10px;
top: 15px;
display: block;
height: 21px;
width: 25px;
}
#sidebar-trigger span {
display: block;
width: 25px;
height: 3px;
border-radius: 8px;
background: #f2f2f2;
position: relative;
margin-top: 8px;
}
#sidebar-trigger span:after,#sidebar-trigger span:before {
content:"";
width: 25px;
height: 3px;
border-radius: 8px;
background: #f2f2f2;
position: absolute;
transition: all 0.2s;
}
#sidebar-trigger span:after {
margin-top: 8px;
}
#sidebar-trigger.active span:after {
transform: rotate(-45deg);
margin-top: 0px;
}
#sidebar-trigger span:before {
margin-top: -8px;
}
#sidebar-trigger.active span:before {
transform: rotate(45deg);
margin-top: 0px;
}
#sidebar-trigger.active span {
background-color: transparent;
transition: all 0.2s;
}
#sidebar h2 {
color: #f2f2f2;
text-transform: uppercase;
margin: 0 0 20px;
font-weight: normal;
font-size: 15px;
letter-spacing: 1px;
position: relative;
}
#sidebar h2:after {
content: "";
height: 2px;
width: 20px;
position: absolute;
left: 0;
bottom: -7px;
background: #f2f2f2;
}
#sidebar .sidebar-txt {
color: #808080;
text-align: justify;
font-size: 11px;
position: relative;
}
#sidebar .sidebar-txt.contexte {
margin-bottom: 40px;
}
#sidebar .sidebar-txt.contexte:after {
content: "";
height: 1px;
width: 100px;
position: absolute;
left: 0;
bottom: -20px;
background: #808080;
}
#sidebar.medium .sidebar-txt.contexte {
margin-right: 10px;
}
#sidebar .title {
text-transform: uppercase;
letter-spacing: 2px;
color: #808080;
margin-bottom: 15px;
font-size: 11px;
}
#sidebar .sidebar-block {
margin-bottom: 20px;
}
#sidebar ul {
padding: 0;
list-style-type: none;
}
#sidebar #liens a {
color: #f5f5f5;
font-size: 12px;
outline: none;
line-height: 1.9;
transition: color 0.3s ease-in;
display: inline-block;
background: #424242;
padding: 0 10px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
margin-right: 4px;
margin-bottom: 4px;
}
#sidebar ul li a:hover {
color: #808080 !important;
}
#sidebar #partenaires a {
display: inline-block;
padding: 3px;
height: 50px;
border: 1px solid #ccc;
margin: 0 5px 7px 0;
}
#sidebar.medium #partenaires a {
margin: 0 2px 5px 0;
}
#sidebar #staff .staff-info {
position: relative;
overflow: hidden;
height: 50px;
margin-bottom: 6px;
}
#sidebar.medium #staff .staff-info {
height: 50px;
width: 190px;
}
#sidebar #staff .staff-info img {
height: 50px;
width: 220px;
}
#sidebar.medium #staff .staff-info img {
height: 50px;
width: 190px;
}
#sidebar #staff .staff-info .staff-tooltip {
background: #a8a8a8;
color: #4d4d4d;
height: 100%;
width: 100%;
position: absolute;
top: 100%;
left: 0;
text-align: center;
font-size: 10px;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
}
#sidebar #staff .staff-info:hover .staff-tooltip {
top: 0;
opacity: 1;
visibility: visible;
}
#sidebar #staff .staff-tooltip h3 {
text-transform: uppercase;
margin: 10px 0 0;
font-size: 12px;
letter-spacing: 1px;
}
#sidebar #top-site div {
width: 20%;
display: inline-block;
text-align: center;
}
#sidebar #top-site div a:before {
content: "";
background: #424242;
height: 20px;
width: 20px;
position: absolute;
transform: rotate(45deg);
transition: all 0.4s;
}
#sidebar #top-site div a:hover:before {
background: #ccc;
}
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 () {
$("#sidebar-trigger").addClass('active');
$("#sidebar-trigger").click( function(e){
e.preventDefault();
if ($(this).hasClass("active")) {
if ($('#sidebar').hasClass("right")) {
if ($('#sidebar').hasClass("medium")) {
$('#sidebar').animate({ right: '-210' }, 500);
} else {
$('#sidebar').animate({ right: '-260' }, 500);
}
} else {
if ($('#sidebar').hasClass("medium")) {
$('#sidebar').animate({ left: '-210' }, 500);
} else {
$('#sidebar').animate({ left: '-260' }, 500);
}
}
$(this).removeClass("active");
} else {
if ($('#sidebar').hasClass("right")) {
$('#sidebar').animate({ right: '0' }, 500);
} else {
$('#sidebar').animate({ left: '0' }, 500);
}
$(this).addClass("active");
}
return false;
});
});
Pour réduire la largeur de votre sidebar, ajoutez la class "medium" dans votre HTML. Il suffit d'éditer votre widget :
- Code:
<div id="sidebar" class="medium">
Pour installer votre sidebar sur la droite de votre forum, éditez la class de la sidebar :
- Code:
<div id="sidebar" class="right">
Vous l'aurez compris, il suffit d'associer les class :
- Code:
<div id="sidebar" class="right medium">
Super code !
Merci !
Merci !
Heyyy
Ravi que ça plaise et merci du petit message
Ravi que ça plaise et merci du petit message
c'est possible de faire en sorte que le code soit fixe ?
genre quand on descend la page, on reste bah.. sur toutes les infos et non sur du vide ?
super code sinon !
genre quand on descend la page, on reste bah.. sur toutes les infos et non sur du vide ?
super code sinon !
C'est ouuuf, cette sidebar est géniale
Je me demandais néanmoins s'il était possible que la sidebar soit fermée et qu'on doive cliquer sur les trois barres parallèles pour la voir (comme sur terrible) plutôt qu'elle soit ouverte et qu'il faille à chaque fois cliquer sur la croix lorsque l'on passe d'un sujet à l'autre, merci d'avance !
Et encore une fois, ce code est magnifique !
Je me demandais néanmoins s'il était possible que la sidebar soit fermée et qu'on doive cliquer sur les trois barres parallèles pour la voir (comme sur terrible) plutôt qu'elle soit ouverte et qu'il faille à chaque fois cliquer sur la croix lorsque l'on passe d'un sujet à l'autre, merci d'avance !
Et encore une fois, ce code est magnifique !