Nous allons d'abord commencer par installer ce qui permet d'avoir les icones à la place des mots de la barre de navigation. Dans votre template overall_header, après le CSS dans les premières lignes, ajoutez ceci :

Code:

  <script src="https://use.fontawesome.com/c9dc62c48f.js"></script>
      <link rel='stylesheet' href='http://www.aht.li/3031956/font-awesome.css' />
      <link rel='stylesheet' href='http://www.aht.li/3031957/font-awesomemin.css' />

Ce code se découle en trois parties. La première partie, le HTML, se met dans votre template overall_header à la place de votre GENERATED_NAV_BAR.

Code:

<!-- DEBUT BARRE NAVIG -->
  <div id="userlinkss">
 <div class="userlinkcontrols">
 <div class="userlinkav">
 <div class="userav1">
                     <div class="userav">
                       <div id="avatar_nav">
                           <div class="js-avatar"></div>
                                   <div class="bonjour">
                                           Welcome
                           <span class="js-username"></span>
                             !
                                   </div>
                           </div>
                       </div>
                 </div>
               </div>
            
           <div class="menuposition">
             {GENERATED_NAV_BAR}
           </div>
           </div>
          
         <div class="g-3" style="display: none;" align="center">
             <div class="username">welcome invité!</div>
           </div>
          <div class="navii">
            <div class="barrenav"><a href="/">Partenariat</a></div>
<div class="barrenav"><a href="/" target="_blank">Règlement</a></div>
<div class="barrenav"><a href="/" target="_blank">Contexte</a></div>
<div class="barrenav"><a href="/" target="_blank">Groupes</a></div>
<div class="barrenav"><a href="/" target="_blank">Bottin des avatars</a></div>
<div class="barrenav"><a href="/" target="_blank">Bottin des métiers</a></div>
<div class="barrenav"><a href="/" target="_blank">Bottin des oeuvres</a></div>
</div>
<div class="sidebar-title">LES NEWS </div>
<div class="sidebar-text"> <span>date</span>News here News here News here News here News here News here News here News here News here News here News here News here News here News here</div>
<div class="sidebar-title"> EVENT EN COURS </div>
<div class="sidebar-text"><a href="/"><img src="https://imgur.com/N8vygKl.png"> </a></div>
<div class="sidebar-title">COUPS DE COEUR </div>
<div class="coupde">
  <a href="/" class="coudeimg" target="_blank"><img src="http://via.placeholder.com/50x50"></a>
  <a href="/" class="coudeimg" target="_blank"><img src="http://via.placeholder.com/50x50"></a>
</div>
  
</div>
      <!-- FIN BARRE NAVIG -->

La seconde partie, le CSS, se mettra donc dans la feuille de style de votre forum >

Code:

.coupde {
  width:290px;
  margin-top:10px;
  text-align:center;
}
.coupde img {
  width:50px;
  height:50px;
  margin:5px;
  border:solid 5px grey;
}
.sidebar-title {
    font-family: calibri, sans-serif;
    color: #D5B830;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 14px;
    font-weight: 700;
    border-bottom: 1px solid grey;
    padding: 4px;
    margin-bottom:-5px;
    text-align: left;
    margin-top:25px;
    margin-left:10px;
    width:250px;
}
.sidebar-text {
    font-family: calibri, sans-serif;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
    width:250px;
    color: #797773;
    background-color: #f6f6f6;
    border: 1px solid #d4d4d4;
    padding: 10px;
    font-weight: 500;
    position:relative;
    top:10px;
    margin:0 auto;
overflow:auto;
}
.sidebar-text span {
  background:#454554;
  text-transform:uppercase;
  padding:3px;
  color:#eaeaea;
 position:relative;
 top:-2px;
font-family: calibri, sans-serif;
}
.sidebar-text img {
  width:100%;
  height:150px;
  border: 1px solid #d4d4d4;
  filter: grayscale(20%);
}
.navii {
    height: 150px;
    width: 110px;
    position: absolute;
top: 50px;
left: 160px;
  }
  .barrenav {
    background: #151515;
    color: #eaeaea;
    font-size: 10px;
    margin: 5px;
    padding: 1.8px;
    text-align: center;
    transition: all 800ms;
  }
  .barrenav a {
    color: #eaeaea;
    display: block;
    font-family: calibri, sans-serif;
    font-size: 10px;
    text-decoration: none;
  }
.barrenav:hover {
  background:#454545;
  color:lightgrey;
  transition:all 800ms;
}
.userav1 {
    background: rgba(300, 300, 300, 0.9);
    height: 180px;
    left: 0;
    padding: 10px;
    position: relative;
    top: 0;
    width: 220px;
}
.userlinkav {
    background: #eee;
    background-image: url(https://imgur.com/ovGNmcN.png);
    background-size: 100%;
    box-shadow: 1px 1px 8px #454545;
    color: #fff;
    height: 200px;
    left: 15px;
    padding: 10px;
    position: relative;
    top: 18px;
    width: 240px;
}
#userlinkss {
    background: rgba(50,50,50,0.8);
    box-shadow: 1px 1px 8px #1f1f1f;
    height: 100%!important;
    left: 0;
    position: fixed;
    top: 0;
    width: 295px;
    z-index: 999;
    background-image: url(https://imgur.com/BDYun82.png);
}
.js-avatar {
    background: #454545;
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97150&w=100&h=150);
    filter: grayscale(50%);
    height: 150px;
    left: 5px;
    overflow: hidden;
    position: absolute;
    right: 100px;
    top: 22px;
    transition: all 800ms;
    width: 100px;
    box-shadow: 1px 1px 10px #c1c1c1;
}
.js-avatar:hover {
  filter: grayscale(0%);
  transition:all 800ms;
}
.js-avatar img {
     width: 100%;
}
.bonjour {
    position: absolute;
    top: 8px;
    color: #454545;
    font: 9px times new roman;
    text-align: center;
    letter-spacing: 2px;
    left: 6px;
}
.menuposition a:hover {
    color: #D5B830!important;
    transition: 0.6s all;
  text-decoration:none !important;
}
.menuposition a {
    height: 10px;
    width: 10px;
    padding: 5px;
    text-align: center;
    transition: 0.6s all;
}
.menuposition {
    left: 26px;
    position: absolute;
    top: 206px;
}
.menuposition a[href="/"]:before {
    content: "\f015";
    font-family: FontAwesome;
    font-size: 10px;
}
.menuposition a[href="/faq"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f128";
}
.menuposition a[href="/search"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f002";
}
.menuposition a[href="/memberlist"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f0ca";
}
.menuposition a[href="/groups"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f080";
}
.menuposition a[href*="/profile"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f21b";
}
.menuposition a[href*="/privmsg"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f27b";
}
.menuposition a[href*="/login"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f084";
}
.menuposition a[href*="/register"]:before {
    font-family: FontAwesome;
    font-size: 10px;
    content: "\f090";
}
a.mainmenu.M14_newMp:before {
    content: "\f086";
    color: #D5B830;
}
.M14_newMp {
    position: relative;
}
a.mainmenu.M14_newMp:after {
    content: "!";
    position: absolute;
    top: 6px;
    right: -4px;
    font-size: 15px;
    font-family: roboto;
    background: white;
    color: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}
a.mainmenu.M14_newMp:hover:before {
    color: #D5B830 !important;
    transition: 0.9s all;
}
a.mainmenu.M14_newMp{color:#454545 !important;}
/*Apparence MP sur la Toolbar*/
a.M14_alertMp {
color: white !important;
font-size: 12px !important;
text-decoration: none !important;
margin-right: 50px;
line-height: 30px;
background-color: red;
padding: 0 5px;
}
a.mainmenu {
    color: black;
    font-family: 'Roboto Condensed';
    text-transform: uppercase;
}

Ensuite, vous allez dans module / gestion des codes Javascript et vous en créez un (cochez bien "sur toutes les pages") en rajoutant ceci >

Code:

 $(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    })
});

Pour vous expliquer rapidement, cela permettra de mettre l'avatar du membre connecté (ou de l'invité) à gauche des liens de navigation interne au forum.
Ensuite, les mots de base de la barre de navigation ont tous été remplacés par des icones. Est également mis un place un système qui permet tout de même de voir s'il y a un nouveau MP malgré les icones. Voilà voilà !