Mettre les notifications (en bloc/liste) dans ma navbar

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://second-chances.forumactif.com/

Description du problème

Bonsoir !

Je vais devenir une habituée ici, mais pas ma faute vous m'aidez tellement bien xD
Cette fois je viens vous voir parce que j'essaie désespérément d'intégrer les notifications dans ma barre de navigation, en essayant tous les codes/tutos que je vois passer, mais rien ne marche... Là j'ai la case "notifications" dans la navbar, ce qui est déjà un exploit, mais quand je clique dessus... je reviens à la page d'accueil TT

Pour vous dire ce que j'ai essayé, c'est la personnalisation complète de la toolbar que j'ai trouvée ici-même : https://forum.forumactif.com/t370334-personnaliser-entierement-la-toolbar-via-css
+ ce tutoriel en deux parties qui lui m'envoie à la page des notifications dans le profil, donc pas le résultat attendu : https://tambouille-raleuses.forumactif.com/t335-afficher-les-notifications-dans-la-barre-de-navigation-retirer-la-toolbar#2545
+ un code censé mettre les notifs dans une box flottante (j'ai plus le lien d'origine pardon) mais là ça ne s'affiche même pas, je pourrais ne rien mettre ça reviendrait au même...

Code:

/* NOTIFICATIONS */

/* Cacher les bout de la toolbar que je ne veux pas */
.fa_tbMainElement#fa_left,
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink {
   display:none!important;
}
 
/* Supprimer la couleur de fond et positionnement du bloc */
#fa_toolbar {
  background-color:transparent!important;
  position:fixed;
  top:-20px;
  padding:5px;
  width:100%;
  z-index:999;
  box-sizing:border-box;
}

/* Mise en page du bouton Notification */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
  display:block!important;
  position:absolute;
  top:55px;
  right:10px;
  width:130px;
  padding:3px;
  background:linear-gradient(90deg,#C097CF,#DAC7E0,#E6D6E6);
  border:4px solid #fff;
  box-shadow: 0 0 0 1px #b0a9d926, 0 0 0 0 #fff;
  color:#fff;
  font-family:'Montserrat';
  font-size:10px;
  text-align:center;
  text-decoration:none!important;
}
#fa_toolbar #fa_right #notif_list li:first-child{
  padding-top:10px;
}

/* Mise en page bouton "notification" - Au clic */
#fa_menu:hover:visited,
#fa_toolbar > #fa_right.notification > #fa_notifications {
  background:linear-gradient(90deg,#C097CF,#DAC7E0,#E6D6E6)!important;
  color:#fff!important;
  text-shadow:none;
}

/* Référence pour la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement {
  position:relative;
}

/* Mise en page de la liste des notifications */
#fa_toolbar #fa_right.notification #notif_list {
  top:100px!important;
  right:10px;
  left:auto!important;
  max-width:250px;
  min-width:145px;
  border:none!important;
}

/* Mise en page des notifications */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li {
  width:auto!important;
  font-size:10px;
  background-color:#fff;
}

/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText {
  overflow:visible!important;
  width:210px !important;
  height:auto!important;
}

/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications {
  width:130px;
}

#fa_toolbar #fa_right #notif_list li.unread {
  background:#fff!important;
}

/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all {
  text-align:center!important;
  background:black!important;
  padding:5px!important;
  font-size:10px!important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
  color:#fff;
}

Je ne sais plus quoi faire, là j'ai tenté de supprimer ma navbar et remettre la toolbar d'origine pour la bidouiller mais elle non plus ne s'affichait plus alors que j'avais retiré les codes pour la masquer... Pour vous aider, je vous pose mon template overhall_header :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
  xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="content-script-type" content="text/javascript"/>
 <meta http-equiv="content-style-type" content="text/css"/>
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <!-- BEGIN switch_recent_jquery -->
 <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
 <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
 {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
 <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch (tickerDirParam) {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function () {

 $('#fa_ticker_content').css('display', 'block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0) {
 $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item) {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert) {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each(function () {
 if ($(this).height() > height_max) {
 height_max = $(this).height();
 }
 });

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 } else {
 $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
 $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function () {
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if (pm != null) {
 pm.focus();
 }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if (report != null) {
 report.focus();
 }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 Ticker.start({
 height: {switch_ticker.HEIGHT},
 spacing: {switch_ticker.SPACING},
 speed: {switch_ticker.SPEED},
 direction: '{switch_ticker.DIRECTION}',
 pause: {switch_ticker.STOP_TIME}
 });
 <!-- END switch_ticker -->

 document.onclick = function(e){
 if (!e.target.classList.contains('navicon')) {
 if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
 document.getElementById('menu-btn').checked = false;
 }
 }
 };
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
 logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

 $(document).ready(function () {
 $(window).resize(function () {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth / 2 - popupWidth / 2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>

 {GREETING_POPUP}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align: center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }

 <!-- END switch_ticker_new -->
 </style>

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- BEGIN google_analytics_code_bis -->
 gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- END google_analytics_code_bis -->
 </script>
 <!-- END google_analytics_code -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
  rel="stylesheet"/>
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
 <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br/>
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
 <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
 <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
 <div id="inactive_popup_buttons">
 <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
 <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
 </div>
</div>
<script type="text/javascript">
 $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 $('#inactive_popup').hide(50);
 });
 $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 location.href = '{inactive_users_modal.U_MODAL}'
 })
</script>
<!-- END inactive_users_modal -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
 <div class="h3">{SITENAME}</div>
 <div id="login_popup_message">
 {LOGIN_POPUP_MSG}
 </div>
 <!-- BEGIN switch_quick_login -->
 <br/>
 <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
 <div>
 <div class="mt10">
 <div class="social_btn">
 <!-- BEGIN fb_quick_connect -->
 <div class="fb-login-button"></div>
 <!-- END fb_quick_connect -->
 &nbsp;
 <!-- BEGIN topicit_quick_connect -->
 <div class="ti-connect"></div>
 <!-- END topicit_quick_connect -->
 </div>
 </div>
 </div>
 <br/>
 <!-- END switch_quick_login -->
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}"/>
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
 </form>
 </div>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
 <div class="h3">{SITENAME}</div>
 <div id="like_popup_message">
        {LIKE_POPUP_MSG}
 </div>
 <div id="like_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}"/>
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
 <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
 </form>
 </div>
</div>
<!-- END switch_like_popup -->

<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}

<div id="page-header">
 <div class="headerbar" style="cursor: pointer;" onclick="window.location='https://second-chances.forumactif.com/';">
 <div id="headerbar-top" class="responsive-headerbar">
 <div class="wrap">
 <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
 <input class="menu-btn" type="checkbox" id="menu-btn" />
 <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet"/>
<div class="navbar_arte">
 <div class="avatar_navbar js-avatar"></div>
 <div class="bloc_pseudo_search">
 <span>Bienvenue, <span class="js-username"></span></span>
 <li>
 <form action="/search" method="get">
 <input type="hidden" name="mode" value="searchbox"/>
 <input placeholder="Rechercher" 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>
 </div>
 <div class="link_navbar">
 {GENERATED_NAV_BAR}
 </div>
</div>
 </div>
 </div>

 <div class="wrap">
 <div id="site-desc">
 <!-- BEGIN switch_h1 -->
 <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p>{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 </div>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_blockD" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->
</div>

<div class="conteneur_minwidth_IE modern-resp">
 <div class="conteneur_layout_IE">
 <div class="conteneur_container_IE">
 <div id="wrap">
 <div id="page-body">

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="container">
 <div id="content-main">
 <div id="main">
 <div id="main-content">

Et mon CSS pour la partie navigation. C'est  le code d'origine de la créa avec juste la modification de couleur pour le texte :

Code:

/************ NAVBAR - ARTEMIS POUR EPICODE ***************/

.bodylinewidth
{
 margin-top: 72px;
}

.navbar_arte
{
 width: 100%;
 background: var(--light);
 height: 70px;
 -webkit-box-shadow: 0 2px 1px #e6e6e6;
 box-shadow: 0 2px 1px #e6e6e6;
 position: fixed;
 top: 0;
 left: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px 15px 0 5px;
 z-index: 999;
}

.avatar_navbar
{
 width: 60px;
 height: 60px;
 border: 1px solid white;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 5px;
 background: #e9e9e9;
 display: inline-block;
 float: left;
}

.avatar_navbar img
{
 width: 48px;
 height: 48px;
 -o-object-fit: cover;
 object-fit: cover;
}

.bloc_pseudo_search
{
 font: 9px montserrat;
 width: 240px;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 height: 60px;
 vertical-align: top;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px 5px;
 color: #6f6f6f;
 float: left;
 text-align: left;
 margin-left: 5px;
}

.bloc_pseudo_search li
{
 list-style-type: none;
}

.navbar_arte form
{
 height: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 background: white;
 padding: 0;
 margin-top: 8px;
}

.navbar_arte form input[type="submit"]
{
 border: none!important;
 background: var(--acc2)!important;
 color: white !important;
 padding: 0 10px!important;
 margin:0!important;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
}

.navbar_arte form input[type="text"]
{
 cursor: text;
 border: none!important;
 width: 100%;
 min-width: 150px;
 padding: 0 8px!important;
 margin:0!important;
 background: rgba(255,255,255,0.05)!important;
 color: lightgray;
 font-size:11px;
 border-radius:0!important;
 -webkit-box-shadow:none!important;
 box-shadow:none!important;
 text-transform: uppercase !important;
 font: 10px calibri !important;
 letter-spacing: 2px !important;
}

.navbar_arte form input
{
 outline: none;
 font-size:11px;
}

.link_navbar
{
 float: right;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 25px 15px;
 font: 10px montserrat;
 text-transform: uppercase;
}

.link_navbar a
{
 text-decoration: none;
 margin: 0 5px;
 color: var(--acc2);
 font-weight: 600;
}

.link_navbar a img
{
 display: none;
}

.link_navbar a:hover
{
 text-decoration: none !important;
 color: var(--acc2);
}

.link_navbar a::before,.link_navbar a::after
{
 display: inline-block;
 opacity: 0;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
 -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
 transition: opacity 0.2s, -webkit-transform 0.3s;
 -o-transition: transform 0.3s, opacity 0.2s;
 transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}

.link_navbar a::before
{
 content: '[';
 -webkit-transform: translateX(25px);
 -ms-transform: translateX(25px);
 transform: translateX(25px);
}

.link_navbar a::after
{
 content: ' ]';
 -webkit-transform: translateX(-25px);
 -ms-transform: translateX(-25px);
 transform: translateX(-25px);
}

.link_navbar a:hover::before,.link_navbar a:hover::after
{
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}

.link_navbar a[href^="/search"]
{
 display: none;
}

.link_navbar li
{
 list-style-type: none;
 display: inline-block;
}

En espérant que vous saurez m'aider encore une fois ^^'

[MlleAlys]

Bonjour,
Il n'y a pas un javascript avec ?

[Yunie16]

Juste un mini pour afficher l'avatar dans la barre de navigation :

Code:

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

[MlleAlys]

Le fait d'être redirigé au clic ver l'index vient du fait que vous ayez ajouté cette partie dans votre template :

Code:

onclick="window.location='https://second-chances.forumactif.com/';"

Elle est appliquée à l'élément "headerbar", donc quand on clique sur n'importe quel élément à l'intérieur de ce bloc, dont la barre de navigation, on est redirigé vers l'index.

Pour éviter cela, j'ai sorti la barre de navigation de cet élément pour la mettre juste avant :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
  xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="content-script-type" content="text/javascript"/>
 <meta http-equiv="content-style-type" content="text/css"/>
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <!-- BEGIN switch_recent_jquery -->
 <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
 <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
 {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
 <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch (tickerDirParam) {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function () {

 $('#fa_ticker_content').css('display', 'block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0) {
 $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item) {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert) {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each(function () {
 if ($(this).height() > height_max) {
 height_max = $(this).height();
 }
 });

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 } else {
 $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
 $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function () {
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if (pm != null) {
 pm.focus();
 }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if (report != null) {
 report.focus();
 }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 Ticker.start({
 height: {switch_ticker.HEIGHT},
 spacing: {switch_ticker.SPACING},
 speed: {switch_ticker.SPEED},
 direction: '{switch_ticker.DIRECTION}',
 pause: {switch_ticker.STOP_TIME}
 });
 <!-- END switch_ticker -->

 document.onclick = function(e){
 if (!e.target.classList.contains('navicon')) {
 if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
 document.getElementById('menu-btn').checked = false;
 }
 }
 };
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
 logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

 $(document).ready(function () {
 $(window).resize(function () {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth / 2 - popupWidth / 2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>

 {GREETING_POPUP}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align: center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }

 <!-- END switch_ticker_new -->
 </style>

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- BEGIN google_analytics_code_bis -->
 gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- END google_analytics_code_bis -->
 </script>
 <!-- END google_analytics_code -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
  rel="stylesheet"/>
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>

 
 


<body id="modernbb">
 
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
    <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <em>Hit</em>skin.com</h1>
    <div class="content">
        <p>
          {hitskin_preview.L_THEME_SITE_PREVIEW}
          <br/>
          <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>

    </div>
  </div>
  <!-- END hitskin_preview -->

  <!-- BEGIN inactive_users_modal -->
  <div id="inactive_popup" style="z-index: 10000 !important;">
    <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
    <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
    <div id="inactive_popup_buttons">
        <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
        <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
    </div>
  </div>
  <script type="text/javascript">
    $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
        document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
        $('#inactive_popup').hide(50);
    });
    $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
        document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
        location.href = '{inactive_users_modal.U_MODAL}'
    })
  </script>
  <!-- END inactive_users_modal -->

  <!-- BEGIN switch_login_popup -->
  <div id="login_popup" style="z-index: 10000 !important;">
    <div class="h3">{SITENAME}</div>
    <div id="login_popup_message">
        {LOGIN_POPUP_MSG}
    </div>
    <!-- BEGIN switch_quick_login -->
    <br/>
    <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
    <div>
        <div class="mt10">
          <div class="social_btn">
              <!-- BEGIN fb_quick_connect -->
              <div class="fb-login-button"></div>
              <!-- END fb_quick_connect -->
              &nbsp;
              <!-- BEGIN topicit_quick_connect -->
              <div class="ti-connect"></div>
              <!-- END topicit_quick_connect -->
          </div>
        </div>
    </div>
    <br/>
    <!-- END switch_quick_login -->
    <div id="login_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
          <input type="submit" class="button1" value="{L_LOGIN}"/>
          <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
          <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
        </form>
    </div>
  </div>
  <!-- END switch_login_popup -->

  <!-- BEGIN switch_like_popup -->
  <div id="like_popup" style="z-index: 10000 !important;">
    <div class="h3">{SITENAME}</div>
    <div id="like_popup_message">{LIKE_POPUP_MSG}</div>
    <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
    </div>
  </div>
  <!-- END switch_like_popup -->

  <a id="top" name="top" accesskey="t"></a>
  {JAVASCRIPT}

  <div id="page-header">
   
    <div class="navbar_arte">
                <div class="avatar_navbar js-avatar"></div>
                <div class="bloc_pseudo_search">
                    <span>Bienvenue, <span class="js-username"></span></span>
                    <li>
                      <form action="/search" method="get">
                          <input type="hidden" name="mode" value="searchbox"/>
                          <input placeholder="Rechercher" 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>
                </div>
                <div class="link_navbar">
                    {GENERATED_NAV_BAR}
                </div>
    </div>
   
    <div class="headerbar" style="cursor: pointer;" onclick="window.location='/';">
        <div id="headerbar-top" class="responsive-headerbar">
          <div class="wrap">
              <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
              <input class="menu-btn" type="checkbox" id="menu-btn" />
              <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
              <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet"/>
           
          </div>
        </div>

        <div class="wrap">
          <div id="site-desc">
              <!-- BEGIN switch_h1 -->
              <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
              <!-- END switch_h1 -->
              <!-- BEGIN switch_desc -->
              <p>{switch_desc.SITE_DESCRIPTION}</p>
              <!-- END switch_desc -->
          </div>
        </div>
     
    </div>

    <!-- BEGIN switch_ticker_new -->
    <div id="fa_ticker_blockD" style="margin-top:4px;">
        <div class="module">
          <div class="inner">
              <div id="fa_ticker_container">
                <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                    <!-- BEGIN ticker_row -->
                    <li>{switch_ticker.ticker_row.ELEMENT}</li>
                    <!-- END ticker_row -->
                </ul>
              </div>
          </div>
        </div>
    </div>
    <!-- END switch_ticker_new -->
  </div>

  <div class="conteneur_minwidth_IE modern-resp">
    <div class="conteneur_layout_IE">
        <div class="conteneur_container_IE">
          <div id="wrap">
              <div id="page-body">

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;">
                    <div class="module">
                      <div class="inner">
                          <div id="fa_ticker_container">
                            <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                <div class="fa_ticker_content">
                                  <!-- BEGIN ticker_row -->
                                  <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                  <!-- END ticker_row -->
                                </div>
                            </div>
                          </div>
                      </div>
                    </div>
                </div>
                <!-- END switch_ticker -->

                <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                    <div id="outer-wrapper">
                      <div id="wrapper">
                          <div id="{ID_LEFT}">
                            <!-- BEGIN giefmod_index1 -->
                            {giefmod_index1.MODVAR}
                            <!-- BEGIN saut -->
                            <div style="height:{SPACE_ROW}px"></div>
                            <!-- END saut -->
                            <!-- END giefmod_index1 -->
                          </div>

                          <div id="container">
                            <div id="content-main">
                                <div id="main">
                                  <div id="main-content">

Par contre je ne vois pas de lien notifications dans la navbar sur mon forum test
EDIT ah pardon, j'imagine que c'est le résultat du tuto qui renvoie vers la page du profil !

[Yunie16]

Ah oui j'avais du mettre ce morceau de code pour que le header serve de bouton d'accueil (j'ai pas trouvé mieux xD)

Le lien de notification je l'ai rajouté dans Affichage > PA > En-tête et Navigation, c'était dans le tuto de tambouille mais peut-être qu'il ne sert à rien du coup ^^'

J'ai testé le template et ça me renvoie à une page noire avec ce bout de code

Code:

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

Et le problème est peut-être lié à ça mais quand je descends dans ma page j'ai une double bordure qui apparait sur la barre, comme ceci :

Spoiler:

Vraiment désolée pour ce casse-tête x.x

[MlleAlys]

comment ça ça renvoie une page noire ? à quel moment ? quand vous cliquez sur notifs ?
La double-bar je pense que c'est ce qu'il reste du "header-top" ou quelque chose comme ça, mais faut que je teste, du css devrait suffire.

edit : je ne vois pas la double bar sur votre forum...

[Yunie16]

Oui quand je clique sur notifs j'ai ça :

Spoiler:

[MlleAlys]

Pour la double barre, je ne la vois pas sur votre forum, mais essayez ce css ?

Code:

.is-sticky#headerbar-top {
  display: none;
}

Tiens c'est bizarre comme page, le lien n'est pas sensé renvoyer vers l'onglet du profil ?

[Yunie16]

La barre a disparu, merci !

Si, je viens de revérifier et le lien est correct dans la partie en-tête et navigation

[MlleAlys]

Je ne reproduis pas la page noire....
On va voir si ce que je vous propose règle le problème...

Alors, a priori on part de là :
- la toolbar du forum doit être activée
- le template est celui donné précédemment ici
- le lien "notifications" dans la barre de navigation a bien pour lien associé "/profile?mode=editprofile&page_profil=notifications"

A la place du javascript proposé dans le tuto ici :
https://tambouille-raleuses.forumactif.com/t335-afficher-les-notifications-dans-la-barre-de-navigation-retirer-la-toolbar#2545
... j'ai bidouillé celui là, qui est en grande partie le même, mais j'ai retiré la partie concernant les différentes versions pour mettre à la place ce qui correspond au template personnalisé, et mis en plus une partie qui supprime le lien de redirection vers le profil pour à la place au clic afficher le bloc des notifications (déplacé depuis la toolbar) :

Code:

$(function(){
  //on crée la variable qui récupérera le nombre de notifications actuelles
  var  lastNbNotif = 0;
  
  // On ajoute un identifiant au lien et on supprime la redirection
  $('.navbar_arte .link_navbar a[href="/profile?mode=editprofile&page_profil=notifications"]').attr('id','navbar_notifs').removeAttr('href').css('cursor','pointer');
  
  //on déplace la liste des notifs
  setTimeout(function(){ $('#notif_list').appendTo( $('#navbar_notifs').parent()).hide(); }, 3000);
  // on fait apparaitre le bloc de notifications au clic
  $('#navbar_notifs').click(function(){
    $('#notif_list').toggle();
  });
  
  
  //On récupère le texte "normal" du bouton de Notification
  var textNavBar = $('#navbar_notifs').text();
  
  // On récupère le nombre de notification dans la toolbar
  // S'il y a une notification ET que le nombre de notification de la toolbar est différent de celui enregistré dans la variable
    // on ajoute une class au lien de la barre de navigation concerné
    // On modifie l'image
    // On ajoute le nombre de notification dans la barre de navigation
    // On enregistre le nombre de notification dans la variable
  function majNotification() {
    var nbNotif=$('#fa_notifications').find('#notif_unread').text();
    if(nbNotif != "" && nbNotif!=lastNbNotif){
      $('#navbar_notifs').addClass("newNotif");
      $('#navbar_notifs').text(textNavBar + ' ' + nbNotif);
      lastNbNotif=nbNotif;
    }
  }
  
  // Au chargement de la page, on attend trois secondes (3000 ms), on appelle notre fonction
  setTimeout(function(){ majNotification(); }, 3000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
  setInterval(function(){ majNotification(); }, 30000);
  
});

ça semble fonctionner sur mon forum de test...
(il y a une petite latence de 3 secondes pour le nombre et la liste des notifs)

Comme en déplaçant le bloc on a perdu une partie du css pour l'affichage de la liste, j'ai fait vite fait ça pour la placer correctement, et j'ai modifié quelques couleurs, mais il me semble que de ce côté vous vous en sortez assez bien pour adapter comme vous le souhaitez :

Code:

.link_navbar a.newNotif {
  color: black;
}
#notif_list {
  position: absolute;
  right: 10px;
  background: white;
  border: 1px solid black;
  width: fit-content;
  min-width:200px;
  max-width:350px;
  left: auto !important;
  margin-top: 5px;
  padding: 5px;
}
#notif_list hr {
  margin: 0;
  padding: 5px;
}
#notif_list .unread .content {
  background: #9ebfd9;
  font-weight: bold;
  color: black;
}
#notif_list .see_all {
  text-align: center;
  display: block;
  padding: 10px;
}

[Yunie16]

OH MON DIEU ! Ca marche ! L'envie de vous faire un câlin est énorme merci beaucoup !!!
J'y croyais plus, vraiment xD
Merci beaucoup pour le temps consacré à ce casse-tête, c'est vraiment apprécié ! Je vais du coup mettre en forme pour le rendu final et ce sera parfait, je passe en résolu du coup