epsilon
forum de libre service de codage,
aucune inscription
Une refonte complète d'Epsilon est prévue pour bientôt. Dans les mois qui suivent, le forum va totalement changer d'apparence et toutes les catégories vont être réorganisées. Pas de panique, aucun LS ne va disparaître !
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Manga Spy x Family Tome 13 édition Collector : où le précommander ?
14.50 €
Voir le deal

Jawn
Jawn
The relations between us in those latter days were peculiar.
[BLACK AND NAVIGATION] TcBWrrN

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à !
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum