Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Aspen_Hayes Mer 24 Mai 2023 - 16:56

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : modification de la barre de navigation
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Alors voilà mon petit problème;
J'essaie de mettre les notifications de la toolbar dans la barre de navigation. Cette dernière est active, non fixe.
J'ai fait une capture d'écran de ma barre actuellement et je voudrais que les notifications apparaissent sous le "Bienvenue, Admin". Aussi, j'aimerai qu'en cliquant sur "Bienvenue, Admin", on ait accès au profil, comme avec la toolbar.

Voici mon template modifié:
overall_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 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 () {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0) {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display', 'block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each(function () {
               if ($(this).height() > height_max) {
                  height_max = $(this).height();
               }
            });

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).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);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert) {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
            }

            /* Initialisation du caroussel */
            $('#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 -->
         $(document).ready(function () {
            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 -->
      });

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

      <!-- BEGIN switch_login_popup -->
      $(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}
   <!-- BEGIN switch_ticker_new -->
   <style>
      .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;
      }
   </style>
   <!-- END switch_ticker_new -->
   {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 -->

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
     vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <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;">
   <table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
         </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
            <div id="inactive_popup_buttons">
               <input type="button" id="inactive_popup_url" class="mainoption"  value="{inactive_users_modal.L_MODAL_BUTTON}" />
               <input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}" />
            </div>
         </td>
      </tr>
   </table>
</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;">
   <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
         </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <div id="login_popup_buttons">
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                       onclick="parent.location='{U_REGISTER}';"/>
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}"/>
               </form>
            </div>
            <span class="genmed">{LOGIN_POPUP_MSG}</span>
         </td>
      </tr>
      <!-- BEGIN switch_quick_login -->
      <tr>
         <td class="row1" align="left" valign="top">
            <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>
         </td>
      </tr>
      <!-- END switch_quick_login -->
   </table>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
   <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
         </td>
      </tr>
      <tr height="{LIKE_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <div id="like_popup_buttons">
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                       onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
               </form>
            </div>
            <span class="genmed">{LIKE_POPUP_MSG}</span>
         </td>
      </tr>
   </table>
</div>
<!-- END switch_like_popup -->

<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               <!-- BEGIN switch_logo_left -->
               <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_left -->
               <td align="center" width="100%" valign="middle">
                  <!-- BEGIN switch_logo_center -->
                  <a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
                  <br/>
                  <!-- END switch_logo_center -->
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br/>
                  <span class="gen">{SITE_DESCRIPTION}<br/>&nbsp; </span>
               </td>
               <!-- BEGIN switch_logo_right -->
               <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_right -->
            </tr>
         </table>

         <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>
 <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"/>
 </form>
 </li>
 </div>
 <div class="link_navbar">
 {GENERATED_NAV_BAR}
 </div>
</div>

         <div style="clear: both;"></div>

         <!-- BEGIN switch_ticker_new -->
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td align="left" class="row1">
                     <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>
                  </td>
               </tr>
            </table>
         </div>
         <!-- END switch_ticker_new -->

         <!-- BEGIN switch_ticker -->
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td align="left" class="row1">
                     <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>
                  </td>
               </tr>
            </table>
         </div>
         <!-- END switch_ticker -->

         <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
               <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                  <tbody>
                  <tr>
                     <td valign="top" width="{C1SIZE}">
                        <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>
                     </td>
                     <td valign="top" width="100%">
                        <!-- BEGIN html_validation -->
                     </td>
                  </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>
<!-- END html_validation -->

Le CSS:
Code:
/* NAVBAR */

:root
{
 --couleur-bleue: #91b5bf;
}

.bodylinewidth
{
 margin-top: 72px;
}

.navbar_arte
{
 width: 100%;
 background: #f9f9f9;
 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(--couleur-bleue)!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(--couleur-bleue);
 font-weight: 600;
}

.link_navbar a img
{
 display: none;
}

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

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

.mainmenu[href="/calendar"]{display:none;}
.mainmenu[href="/images"]{display:none;}

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

Merci d'avance salut
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Toryudo Jeu 25 Mai 2023 - 8:17

fa_right - Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour !

Alors attention, d'après les CGU, vous n'avez pas le droit de masquer la toolbar tel que vous le faites en ce moment :
A l'exception de ce qui est rendu possible par la gestion des crédits, il est formellement interdit de supprimer, de masquer, ou de rendre illisible par quelque moyen que ce soit les mentions obligatoires et copyrights figurant sur les Forums (notamment dans la barre d'outil et le pied de page du forum), ainsi que les contenus sponsorisés ou les publicités.

Sachant que la toolbar doit apparaitre (au moins son copyright), est-ce que vous voulez tout de même déplacer les notifications ?
On pourrait aussi imaginer déplacer à la fois les notifications et le copyright sur votre "barre personnalisée". Où est-ce que vous voudriez placer ce copyright dans ce cas ?
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1384
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Aspen_Hayes Jeu 25 Mai 2023 - 9:17

Bonjour,

En effet, je pensais qu’il était possible de mettre le copyright ailleurs sur le forum, navrée pour la confusion. Smile
Je ne suis pas contre, évidemment, le fait de remettre le copyright en place tout en effectuant les modifications demandées. Ces deux éléments sont très pratiques. Et le copyright pourrait être mis sous le carré de l’avatar ?
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Toryudo Jeu 25 Mai 2023 - 22:15

Alors, j'ai pu tenter quelque chose en modifiant le CSS et le Template, je n'ai pas ajouté de JavaScript.
Voilà ce que ça pourrait donner (les boutons sont aussi fonctionnels tel que demandé) :
fa_right - Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar Image167

Template (j'ai supprimé le "Bienvenue xxx" de base pour me faciliter la vie, ça veut dire que rien ne s'affiche quand on n'est pas connecté, je vous laisse me dire si ça vous embête) :
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 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 () {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0) {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display', 'block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each(function () {
              if ($(this).height() > height_max) {
                  height_max = $(this).height();
              }
            });

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).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);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert) {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
            }

            /* Initialisation du caroussel */
            $('#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 -->
        $(document).ready(function () {
            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 -->
      });

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

      <!-- BEGIN switch_login_popup -->
      $(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}
  <!-- BEGIN switch_ticker_new -->
  <style>
      .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;
      }
  </style>
  <!-- END switch_ticker_new -->
  {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 -->

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
    vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <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;">
  <table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
        </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
            <div id="inactive_popup_buttons">
              <input type="button" id="inactive_popup_url" class="mainoption"  value="{inactive_users_modal.L_MODAL_BUTTON}" />
              <input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}" />
            </div>
        </td>
      </tr>
  </table>
</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;">
  <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
        </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <div id="login_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                      onclick="parent.location='{U_REGISTER}';"/>
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}"/>
              </form>
            </div>
            <span class="genmed">{LOGIN_POPUP_MSG}</span>
        </td>
      </tr>
      <!-- BEGIN switch_quick_login -->
      <tr>
        <td class="row1" align="left" valign="top">
            <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>
        </td>
      </tr>
      <!-- END switch_quick_login -->
  </table>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
        </td>
      </tr>
      <tr height="{LIKE_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <div id="like_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                      onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
              </form>
            </div>
            <span class="genmed">{LIKE_POPUP_MSG}</span>
        </td>
      </tr>
  </table>
</div>
<!-- END switch_like_popup -->

<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
  <tr>
      <td class="bodyline">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
              <!-- BEGIN switch_logo_left -->
              <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
              </td>
              <!-- END switch_logo_left -->
              <td align="center" width="100%" valign="middle">
                  <!-- BEGIN switch_logo_center -->
                  <a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
                  <br/>
                  <!-- END switch_logo_center -->
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br/>
                  <span class="gen">{SITE_DESCRIPTION}<br/>&nbsp; </span>
              </td>
              <!-- BEGIN switch_logo_right -->
              <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
              </td>
              <!-- END switch_logo_right -->
            </tr>
        </table>

        <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">
              <li>
                  <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"/>
              </li>
            </div>
            <div class="link_navbar">{GENERATED_NAV_BAR}</div>
        </div>

        <div style="clear: both;"></div>

        <!-- BEGIN switch_ticker_new -->
        <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
              <tr>
                  <td align="left" class="row1">
                    <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>
                  </td>
              </tr>
            </table>
        </div>
        <!-- END switch_ticker_new -->

        <!-- BEGIN switch_ticker -->
        <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
              <tr>
                  <td align="left" class="row1">
                    <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>
                  </td>
              </tr>
            </table>
        </div>
        <!-- END switch_ticker -->

        <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
              <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                  <tbody>
                  <tr>
                    <td valign="top" width="{C1SIZE}">
                        <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>
                    </td>
                    <td valign="top" width="100%">
                        <!-- BEGIN html_validation -->
                    </td>
                  </tr>
                  </tbody>
              </table>
            </div>
        </div>
      </td>
  </tr>
</table>
</body>
</html>
<!-- END html_validation -->

CSS :
Code:
/* NAVBAR */
 
:root
{
 --couleur-bleue: #91b5bf;
}

.bodylinewidth
{
 margin-top: 72px;
}
 
.navbar_arte
{
 width: 100%;
 background: #f9f9f9;
 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: 900;
}
 
.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;
}

#fa_menu {
  position: fixed;
  top: 4px;
  left: 65px;
  z-index: 999;
}
#fa_menulist {
  position: fixed;
  left: 75px !important;
  top: 28px;
  border: 1px solid #333;
}

#fa_notifications {
  position: fixed;
  top: 20px;
  left: 65px;
  z-index: 998;
}
#fa_toolbar #fa_right #notif_list {
  position: fixed;
  left: 75px !important;
  top: 44px;
  border: 1px solid #333;
}

#fa_left {
  position: fixed;
  z-index: 997;
  top: 70px;
}

.bloc_pseudo_search, #fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_toolbar #fa_service
{
 font: 9px montserrat;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 vertical-align: top;
 box-sizing: border-box;
 margin: 10px;
 color: #6f6f6f;
 background: none !important;
}
 
.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(--couleur-bleue)!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(--couleur-bleue);
 font-weight: 600;
}
 
.link_navbar a img
{
 display: none;
}
 
.link_navbar a:hover
{
 text-decoration: none !important;
 color: var(--couleur-bleue);
}
 
.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;
}
 
.mainmenu[href="/calendar"]{display:none;}
.mainmenu[href="/images"]{display:none;}

Je n'ai pas tout testé à 100%, je vous laisse vérifier si ça vous convient en fonctionnement au quotidien !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1384
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Aspen_Hayes Ven 26 Mai 2023 - 15:38

Bonjour,

Le code fonctionne parfaitement, merci beaucoup ! Ce serait possible de détailler dans le CSS ce que vous avez fait exactement pour que je puisse comprendre et faire des modifications si nécessaire ?
En ce qui concerne le "Bienvenue, xx", j'aimerai malgré tout qu'il apparaisse lorsque je suis déconnecté ou pour un invité lorsqu'il arrive sur le forum parce que sinon cela laisse un espace vide...
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Toryudo Ven 26 Mai 2023 - 17:11

Bonjour !

Alors, niveau CSS, j'ai ajouté ces éléments pour déplacer les blocs "Bienvenue xxx" (et son menu quand on clique), "Notifications" (et son menu quand on clique), ainsi le logo du copyright :
Code:
#fa_menu {
  position: fixed;
  top: 4px;
  left: 65px;
  z-index: 999;
}
#fa_menulist {
  position: fixed;
  left: 75px !important;
  top: 28px;
  border: 1px solid #333;
}
 
#fa_notifications {
  position: fixed;
  top: 20px;
  left: 65px;
  z-index: 998;
}
#fa_toolbar #fa_right #notif_list {
  position: fixed;
  left: 75px !important;
  top: 44px;
  border: 1px solid #333;
}
 
#fa_left {
  position: fixed;
  z-index: 997;
  top: 70px;
}


Et j'ai fait en sorte que ces éléments aient le même CSS que le .bloc_pseudo_search initial (que j'ai un peu modifié au passage pour simplifier) :
.bloc_pseudo_search, #fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_toolbar
Code:
#fa_service
{
 font: 9px montserrat;
 display: inline-block;
 text-transform: uppercase;
 letter-spacing: 2px;
 vertical-align: top;
 box-sizing: border-box;
 margin: 10px;
 color: #6f6f6f;
 background: none !important;
}

Pour pouvoir écrire "Bienvenue invité", je suis obligé de passer par un script, que je rajoute directement dans votre Template :
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 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 () {
        var w_cont = $('#fa_ticker_container').width();

        if (w_cont > 0) {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display', 'block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each(function () {
              if ($(this).height() > height_max) {
                  height_max = $(this).height();
              }
            });

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).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);
              }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert) {
              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
            }

            /* Initialisation du caroussel */
            $('#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 -->
        $(document).ready(function () {
            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 -->
      });

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

      <!-- BEGIN switch_login_popup -->
      $(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}
  <!-- BEGIN switch_ticker_new -->
  <style>
      .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;
      }
  </style>
  <!-- END switch_ticker_new -->
  {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 -->

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
    vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <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;">
  <table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
        </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
            <div id="inactive_popup_buttons">
              <input type="button" id="inactive_popup_url" class="mainoption"  value="{inactive_users_modal.L_MODAL_BUTTON}" />
              <input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}" />
            </div>
        </td>
      </tr>
  </table>
</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;">
  <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
        </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <div id="login_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                      onclick="parent.location='{U_REGISTER}';"/>
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}"/>
              </form>
            </div>
            <span class="genmed">{LOGIN_POPUP_MSG}</span>
        </td>
      </tr>
      <!-- BEGIN switch_quick_login -->
      <tr>
        <td class="row1" align="left" valign="top">
            <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>
        </td>
      </tr>
      <!-- END switch_quick_login -->
  </table>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
        </td>
      </tr>
      <tr height="{LIKE_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <div id="like_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                      onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
              </form>
            </div>
            <span class="genmed">{LIKE_POPUP_MSG}</span>
        </td>
      </tr>
  </table>
</div>
<!-- END switch_like_popup -->

<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
  <tr>
      <td class="bodyline">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
              <!-- BEGIN switch_logo_left -->
              <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
              </td>
              <!-- END switch_logo_left -->
              <td align="center" width="100%" valign="middle">
                  <!-- BEGIN switch_logo_center -->
                  <a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
                  <br/>
                  <!-- END switch_logo_center -->
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br/>
                  <span class="gen">{SITE_DESCRIPTION}<br/>&nbsp; </span>
              </td>
              <!-- BEGIN switch_logo_right -->
              <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
              </td>
              <!-- END switch_logo_right -->
            </tr>
        </table>

        <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">
           <script>if (_userdata["user_id"] == -1){ document.write('Bienvenue invité'); }</script>
              <li>
                  <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"/>
              </li>
            </div>
            <div class="link_navbar">{GENERATED_NAV_BAR}</div>
        </div>

        <div style="clear: both;"></div>

        <!-- BEGIN switch_ticker_new -->
        <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
              <tr>
                  <td align="left" class="row1">
                    <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>
                  </td>
              </tr>
            </table>
        </div>
        <!-- END switch_ticker_new -->

        <!-- BEGIN switch_ticker -->
        <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
              <tr>
                  <td align="left" class="row1">
                    <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>
                  </td>
              </tr>
            </table>
        </div>
        <!-- END switch_ticker -->

        <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
              <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                  <tbody>
                  <tr>
                    <td valign="top" width="{C1SIZE}">
                        <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>
                    </td>
                    <td valign="top" width="100%">
                        <!-- BEGIN html_validation -->
                    </td>
                  </tr>
                  </tbody>
              </table>
            </div>
        </div>
      </td>
  </tr>
</table>
</body>
</html>
<!-- END html_validation -->

Il s'agit de la ligne <script>if (_userdata["user_id"] == -1){ document.write('Bienvenue invité'); }</script> qui permet d'écrire du texte si et seulement si la personne qui visite la page n'est pas connectée. C'est tout propre normalement !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1384
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout des notifications dans la barre de navigation et vu du profil en cliquant sur l'avatar

Message par Aspen_Hayes Ven 26 Mai 2023 - 19:49

Bonsoir,

Le tout fonctionne très bien, un grand merci pour votre aide. ::fleur::
Et merci pour les explications qui me seront très utiles.
Aspen_Hayes

Aspen_Hayes
Nouveau membre

Messages : 8
Inscrit(e) le : 24/05/2023

https://destrucsenvrac.forumactif.com/
Aspen_Hayes a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum