News Accueil

Terrible

Libre-service de codages pour vos forums


Sidebar

par Awful le le Mar 25 Juil - 14:55


Sidebar rétractable. Il est possible d'ajouter une class pour obtenir une sidebar moins large. La taille des images du staff est de 220x50 pour la sidebar normale et 190x50 pour la sidebar plus étroite.

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;
    });
});

Une barre plus étroite
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">


Une barre sur la droite
Pour installer votre sidebar sur la droite de votre forum, éditez la class de la sidebar :
Code:
<div id="sidebar" class="right">

Une barre plus étroite et sur la droite
Vous l'aurez compris, il suffit d'associer les class :
Code:
<div id="sidebar" class="right medium">

par Allen Walker le le Sam 31 Mar - 5:30
Super code !

Merci ! OMG
par Awful le le Dim 1 Avr - 19:22
Heyyy
Ravi que ça plaise et merci du petit message ♥️
par Contenu sponsorisé le