CSS

Code:

/******************************************************
CSS de @linus pour Epicode : http://epicode.bbactif.com
Téléchargé le 20/07/2018
En cas de pépin contactez-moi par MP sur Epicode!
******************************************************/

/*** import google fonts ***/
@import 'http://fonts.googleapis.com/css?family=Oswald';

/*reset des styles par défault du navigateur*/
.template-linus-32 ul{ list-style:none; }
.template-linus-32 ul, .template-linus-32 h5, .template-linus-32 h4, .template-linus-32 h3, .template-linus-32 h2, .template-linus-32 h1, .template-linus-32 p, .template-linus-32 figure{margin:0;padding:0;font-weight:normal;}
.template-linus-32 a, .template-linus-32 a:hover{text-decoration:none;text-decoration:none!important;}
.template-linus-32 a img{border:none;}

body {
    margin-top: 60px;
}

.template-linus-32 {
    height: 60px;
    position: fixed;
    background: #263643;
    top: 0;
    left: 0;
    width: 100%;
     font-family:"Oswald", serif;
     line-height:17px!important;
    z-index:2000;
}

.template-linus-32 .tli-search{
   width:100%;
}

.template-linus-32 .tli-avatar{
    padding-left: 120px;
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
   text-transform:uppercase;
}

.template-linus-32 .tli-avatar-img{
   display:block;
   position:absolute;
   height:120px;
   width:120px;
   overflow:hidden;
   left:0;
   top:0;
}

.template-linus-32 .tli-avatar-img>span{
   display: block;
    transform: rotate(45deg);
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    overflow: hidden;
    border-top:4px solid transparent;
    border-left:4px solid transparent;
    border-bottom:4px solid rgba(0,0,0,0.25);
    border-right:4px solid rgba(0,0,0,0.25);
    box-sizing: border-box;
}

.template-linus-32 .tli-avatar-img>span>span{
    display: block;
    transform: rotate(-45deg);
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
}

.template-linus-32 .tli-avatar-img>span>span>span{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.template-linus-32 .tli-avatar-img>span img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:100%;
}

.template-linus-32 .tli-intro{
   margin-left:-20%;
    font-size: 10px;
    color: #b37647;
    margin-right:10px;
}

.template-linus-32 .tli-pseudo{
    font-size: 14px;
    color: #d4c7b6;
    margin-right:10px;
    max-width: 120px;
    overflow: hidden;
}

.template-linus-32 ul {
    display: flex;
    height: 100%;
}

.template-linus-32.invision .tli-avatar + li,
.template-linus-32.phpbb2 .tli-avatar + li {
   display:flex;
   font-size:0;
}

.template-linus-32.invision .tli-avatar + li a.mainmenu,
.template-linus-32.phpbb2 .tli-avatar + li a.mainmenu{
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.template-linus-32.modernbb ul>li:not(:first-child),
.template-linus-32.punbb ul>li:not(:first-child),
.template-linus-32.phpbb3 ul>li:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.template-linus-32 a.mainmenu img {
    display: none;
}

.template-linus-32 a.mainmenu {
    color: #d4c7b6;
    height: 100%;
    display: flex;
    background:transparent;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 11px;
    position:relative;
   padding:0 20px;
    white-space: nowrap;
}

.template-linus-32 a.mainmenu:before {
   content:' ';
   display:block;
   background:#d4c7b6;
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:0px;
}

.template-linus-32 a.mainmenu:hover:before,
.template-linus-32 a.mainmenu.is-hover:before {
   height:4px;
}

.template-linus-32 a:not(.is-hover) {
    transition: color 1s;
}

.template-linus-32 a.mainmenu:not(.is-hover):before{
    transition: height .5s;
}

.template-linus-32 a:hover,
.template-linus-32 a.is-hover {
    color: #9da6ab;
}

.template-linus-32 form {
    height: 100%;
    display: flex;
}

.template-linus-32 form input[type="submit"] {
    border: none!important;
    background: #d4c7b6!important;
    color: #b37647!important;
    padding: 0 20px!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
}

.template-linus-32 form input[type="text"] {
    cursor: text;
    border: none!important;
    width: 100%;
    min-width: 150px;
    padding: 0 25px!important;
    margin:0!important;
    background: rgba(255,255,255,0.05)!important;
    color: lightgray;
    font-size:11px;
    border-radius:0!important;
    box-shadow:none!important;
}

.template-linus-32 form input {
    outline: none;
    font-size:11px;
}

javascript
dans "modules" du panneau d'administration > "gestion des codes Javascript", activez la gestion des codes javascript puis créez un nouveau javascript
dans "placement", sélectionnez "sur toutes les pages" et ajoutez le code suivant dans le champ texte
(ce code permet notamment de renommer les onglets de navigation, pour cela, modifier mavaleur dans les rename : 'mavaleur' en haut du javascript)

Code:

var menu = {
  'Accueil' : { rename : 'Forum', tags : ['[href^="/"][href$="/"]', '[href^="/"][href$="/?tt=1"]'] },
  'FAQ' : { rename : 'FAQ', tags : ['[href^="/faq"]'] },
  'Groupes' : { rename : 'Factions', tags : ['[href^="/groups"]'] },
  'Membres' : { rename : 'Personnages', tags : ['[href^="/memberlist"]'] },
  'Profil' : { rename : 'Mon compte', tags : ['[href^="/profile"]'] },
  'Messagerie' : { rename : 'Mes MPs', tags : ['[href^="/privmsg"]'] },
  'S\'enregistrer' : { rename : 'Nous rejoindre', tags : ['[href^="/register"]'] },
  'Connexion' : { rename : 'Connexion', tags : ['[href^="/login"]'] },
  'Déconnexion' : { rename : 'Quitter', tags : ['[href^="/login?logout"]'] }
};

$(document).ready(function(){var e=window.location.href.replace(/http[s]?:\/\//gi, "").split("/"); e[e.length - 1]=e[e.length - 1].replace(/\?.*$/gi, ""); for (me in menu) for (var a=0; a <=menu[me].tags.length; a++){var t=$(".template-linus-32 a.mainmenu" + menu[me].tags[a]); if (t.length > 0){var l=t.attr("href"); if( me=='Messagerie' ){var nb_mp=t.html().replace(/<[^>]*>/gi,'').replace(/[^0-9]/gi,''); if(parseInt(nb_mp)>0) menu[me].rename +=' ('+nb_mp+')';}l.substr(1) !=e[e.length - 1] && l.substr(1).replace(/\?.*$/gi, "") !=e[e.length - 1] || t.addClass("is-hover"), t.html(menu[me].rename)}}var n=$('.template-linus-32 a.mainmenu[href^="/search"]'); n.length > 0 && (n.closest("li").find("a.mainmenu").length > 1 ? n.remove() : n.closest("li").remove()), 1==_userdata.session_logged_in && ($(".template-linus-32 .tli-avatar img").replaceWith(_userdata.avatar), $(".template-linus-32 .tli-avatar .tli-pseudo").html(_userdata.username))});

html
dans "affichage" du panneau d'administration > section templates > "général", modifiez le template overall_header

remplacer le code suivant

Code:

<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
 <li>{GENERATED_NAV_BAR}</li>
</ul>

par

Code:

<div class="template-linus-32 modernbb">
    <ul>
      <li class="tli-avatar">
        <a href="#" target="_blank">
          <span class="tli-avatar-img">
            <span><span><span><img alt="avatar" src="http://via.placeholder.com/200x320"/></span></span></span>
          </span>
          <div class="tli-intro">Bienvenue à toi</div>
          <div class="tli-pseudo">Invité</div>
        </a>
      </li>
      <li>{GENERATED_NAV_BAR}</li>
      <li class="tli-search">
        <form action="/search" method="get">
          <input type="hidden" name="mode" value="searchbox"/>
          <input placeholder="Votre recherche" type="text" name="search_keywords"/>
          <input type="hidden" name="tt" value="1"/>         
          <input style="display:none" id="rposts" type="radio" name="show_results" value="posts"/>
          <input style="display:none" id="rtopics" type="radio" name="show_results" value="topics" checked="checked"/>             
          <input type="submit" value="OK"/>
        </form>
      </li>
    </ul>
</div>