[PHPBB2] Toolbar + Navbar + Sticky

[ThunderTB]

• Version du forum :
  PHPBB2
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Salut Phil j'espère que sa va bien   sa fait un petit bout de temps .

Je viens te voir aujourd'hui parce que je tente de faire en sorte que des élément de la toolbar plus précisément
la partie "#fa_right" qui comporte le panel du membre et la partie des notifications .

J'ai suprimer la Navbar du forum et j'ai ajouté la mienne avec un effect sticky donc la bar est à une certaine
position sur le forum lorsque le forum ouvre et lorsqu'on "scroll down sur le forum" la navbar monte et cole
au haut du forum par contre j'arrive pas à recréer l'astuce avec la toolbar donc mon problème est que
la partie fa_right est fixer au haut du forum et n'apparait sur la navbar que lorsque je descend sur le forum .

Lien pour le forum : https://qmhl.forum-canada.com/

Exemple : https://snipboard.io/6WomQv.jpg
voici le rendu lorsqu'on arrive sur le forum

Exemple : https://snipboard.io/yH47sU.jpg
voilà le rendu une fois qu'on descend sur le forum , j'aimerais que la toolbar puisque suivre de A à Z
ma navbar et qu'elle reste au haut et si possible l'option + en vers aussi que je ne suis pas capable
de faire rester au haut du forum avec ma navbar .

Merci d'avance !!!

[Milouze14Fondateur]

Hello Franck,
je vais bien merci et toi ?
Tu as crée un nouveau forum?
Bref, il aurait été judicieux de donner le template et comment as tu procédé pour le scroll .
script css etc etc...

Cela me parait compromis mon ami, il vaudrait mieux adapter
ta barre de navigation à la Toolbar

Sinon, en recherchant sur le forum mentionné le script et le contenu html de ton template
(que j'aurais du avoir dans ta demande car je ne suis pas un devin ).

On peut masquer si la barre de navigation n'est pas en haut la partie fa_right.

Pour cela on va ajouter un script sur toutes les pages:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposer ceci:

Code:


$(document).ready(function() {
   $(window).scroll(function() {
      var faRight= $('#fa_right');

      if (faRight.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            faRight.addClass('M14_sticky');
         } else {
            faRight.removeClass('M14_sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            faRight.addClass('M14_sticky');
         } else {
            faRight.removeClass('M14_sticky');
         }
      }
   });
});


Penser a cliquer sur le bouton




Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


#fa_right:not(.M14_sticky){opacity:0;}
#fa_right.fa_tbMainElement.M14_sticky{opacity:1;}


Penser a cliquer sur le bouton

[ThunderTB]

ReBonjour Phil et oui je vais bien merci , pour le forum oui et non c'est mon forum de tests avant de faire le transfère .

Je te laisse mes css et templates , désolé j'avais oublier ce petit détails .

Css

Code:

 /* Laisser le @media ici sinon les gens sur tablette ne voit pas tout a cause du menu de gauche je lai donc reduit -> Karg */
@media (max-width:1080px){
#responsive-admin-menu{
width: 90px;
}
#responsive-admin-menu span{
display:none;
}
#other-sub span,#media-sub span{
display:block;
}
 
}
/* fin des @media -> Karg */
div.fa_notification {
margin-top:14px !important;
margin-left:-80px !important;
}

#fa_right:not(.M14_sticky){
opacity:1;
margin-top:272px; !important;
}

#fa_right.fa_tbMainElement.M14_sticky{
opacity:1;
margin-top:40px;
}

body {
margin-top:-1px !important;
}

#fa_toolbar {
z-index:999 !important;
position: fixed;
background-color:transparent !important;
top:-31;
margin-left:-70px!important;
transition-delay: 2s;
}

#fa_right {
z-index:999 !important;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
}

a#fa_hide {
display:none !important;
}

#fa_share {
display:none !important;
}

#fa_search {
display:none !important;
}

#fa_textarea {
display:none !important;
}

.row2,browse-arrows {
background-color:#EFEFEF !important;
}

.avatardetails {
top:-10 !important;
position:absolute;
}

.avatarborder {
border-bottom:30px solid #4CAF50;
max-width:160px;
min-width:160px;
max-height:180px;
min-height:180px;
padding:2px;
background-color:#DEE3E7 !important;
margin-top:-225px;
margin-bottom:-20px;
}
.avatarnom {
margin-top:200px;
margin-bottom:-20px;
z-index:1;
margin-left:16px;
}
.menudroit {
width:260px;
height:auto !important;
min-height:116% !important;
right:10%;
position:absolute;
z-index:1 !important;
}

.menudroitin {
position:relative;
background-color:#EFEFEF;
min-width:230px;
max-width:230px;
height:210px;
padding:5px;
position:absolute;
text-align:center;
margin-top:50px; 
margin-bottom:20px;
margin-left:10px;
border-top:34px solid #4CAF50;
z-index:1 !important;
}

.menudroitin h2 {
margin-top:-32px !important;
font-size: 14px !important;
color:#ffffff !important;
font-family:arial !important;
}

.menudroitin p {
margin-bottom:-5px;
margin-top:-10px !important;
font-size:12px;
color:#333333 !important;
font-family:arial !important;
}

.menudroitin2 {
background-color:#EFEFEF;
min-width:230px;
max-width:230px;
height:210px;
padding:5px;
position:absolute;
text-align:center;
margin-top:300px;
margin-left:10px;
border-top:34px solid #4CAF50;
}

.menudroitin2 h2 {
margin-top:-32px !important;
font-size:14px !important;
color:#ffffff !important;
font-family:arial !important;
}
.menudroitin2 p {
margin-bottom:-5px;
margin-top:-10px !important;
font-size:12px;
color:#333333 !important;
font-family:arial !important;
}

.bodylinewidth {
float:left !important;
margin-left:10%;
}

.rep-button, .rep-button:active, .rep-button:focus {
display:none !important;
}

div.postbody {
display:block;
padding:15px;
margin-left:2%;
max-width:92% !important;
font-size: 12px;
line-height: 18px;
padding: 10px;
}
.browse-arrows {
opacity:0;
}

h1.cattitle {
font-size:14px !important;
font-family:arial !important;
text-align:center;
}

td.row1, td.row2 , td.row3.over {
background-color:#EFEFEF;
}

th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop {
border: transparent !important;
}
.post-options {
margin-top:-30px !important;
position:absolute;
margin-left:-180px;
}

.postdetails {
max-width:90% !important;
margin-left:5%;
display:block;
}

.post .name {
font-size:20px;
font-family:arial;
text-align:center !important;
}

div.cattitle {
color:transparent !important;
}

.forumline th {
height:30px !important;
background-color: transparent;
color:transparent !important;
}

.maintitle, .maintitle h1 {
display:none !important;
}

.maintitle, .maintitle h1 {
display:none !important;
}

.bodylinewidth {
float:left !important;
margin-left:10%;
}

.secondarytitle, .secondarytitle h2 {
background-color:transparent !important;
color:#333;
height:30px !important;
width:100%;
font-size:14px !important;
}

td.catHead, th.thHead {
border-width:0px !important;
font-size:12px !important;
text-align:center;
width:100%;
height:34px !important;
background-color:#4CAF50 !important;
border-radius:0px 0px 0px 0px;
}

a.cattitle {
text-decoration:none;
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
letter-spacing:0px !important;
}

.cattitle {
text-decoration:none;
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
letter-spacing:0px !important;
}

.forumline {
background-color:none !important;
border:none !important;
margin-bottom: -4px;
}
a:link {
text-decoration:none !important;
}

a:visited {
text-decoration:none !important;
}

a {
text-decoration:none !important;
}

Template

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.header {
  background-color: #e9eaf2;
  text-align: center;
    padding-top: 5px;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index:998 !important;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
 
</style>
</head>
<body>

<div class="header">
<center><a href="https://qmhl.forum-canada.com/"><img src="https://i.servimg.com/u/f66/20/18/69/47/gmconn10.jpg" width="700" height="225"></center>
</div>

<div id="navbar">
  <a class="active" href="https://qmhl.forum-canada.com/">Acceuil</a>
  <a href="https://www.simulatedhockeymanager.ca/">Outil</a>
  <a href="https://qmhl.forum-canada.com/search">Recherche</a>
  <a href="https://qmhl.forum-canada.com/memberlist">Membres</a>
  <a href="https://qmhl.forum-canada.com/groups">Groupes</a>
  <a href="https://qmhl.forum-canada.com/profile?mode=editprofile">Profil</a>
  <a href="https://qmhl.forum-canada.com/privmsg?folder=inbox">Messagerie</a>
  <a href="https://qmhl.forum-canada.com/login">Connexion</a>
  <a href="https://qmhl.forum-canada.com/login?logout">Déconnexion</a>
</div>
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {

}

.sidepanel  {
  width: 0;
  position:absolute;
  z-index: 1;
  height: 200px;
  top: 282px;
  left: 0;
  background-color: #333;
  overflow-x: hidden;
  transition: 0.9s;
  padding-top: 14px;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #;
  color: #ffffff;
  padding: 5px 10px;
  border: none;
  border-radius: 25px 25px 25px 25px;
position: absolute;
right: 32px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #4CAF50;
  color: #ffffff;
  padding: 5px 10px;
  border: none;
  border-radius: 25px 25px 25px 25px;
  margin-top: -41px;
position: absolute;
right: 30px;
}

.openbtn:hover {
  background-color:#444;
}
</style>
</head>
<body>

<div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
<center><img src="http://hf.hockeyhq.net/HockeyFederation/Menu/CHAMPBANv20.png" style="margin-top:-10px;"></center>
</div>
<button class="openbtn" onclick="openNav()">+</button> 
<script>
function openNav() {
  document.getElementById("mySidepanel").style.width = "100%";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
</script>
 
</body>
</html>
<!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 type="text/javascript">
      //<![CDATA[
      (function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
      a = s.createElement(o),
         m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
      })
      (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
      ga('create', '{G_ANALYTICS_ID}', 'auto');
      ga('send', 'pageview');
      ga('set', 'anonymizeIp', true);

      <!-- BEGIN google_analytics_code_bis -->
      ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
      ga('bis.send', 'pageview');
      ga('bis.set', 'anonymizeIp', true);
      <!-- 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 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>
   </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>
         <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 -->

J'ai essayer tes astuces/codes et c'est pas tout à fait ce que je veux , j'ai jouer un peu
avec tout sa et si tu va y jeter un coup d'oeil tu comprendra ce que je cherche à faire
par contre y'a t'il un moyen de le rendre fluide avec ma navbar sinon quel serais la meilleur façon ?

[Milouze14Fondateur]

Hello Franck,

il faut juste modifier ceci:

Code:

#fa_right:not(.M14_sticky){
opacity:1;
margin-top:272px; !important;
}

#fa_right.fa_tbMainElement.M14_sticky{
opacity:1;
margin-top:40px;
}


En :

Code:

  #fa_right:not(.M14_sticky){
   
    margin-top:240px; !important;
    }

    #fa_right.fa_tbMainElement.M14_sticky{
   
    margin-top:10px;
    }


L'effet est immédiat mon ami

[ThunderTB]

ReSalut malheureusement de mon coter lorsque je descend sur mon forum
la partie FA RIGHT disparait au lieu de monter avec la bar ?

[ThunderTB]

De mon coter si je fait ceci :

Code:

#fa_right:not(.M14_sticky){
margin-top:273px; !important;
}

#fa_right.fa_tbMainElement.M14_sticky {
margin-top:40px; !important;
}

sa fonctionne mais ce n'est pas fluid avec ma Navbar est-ce possible de faire en sorte que
que le tout sois aussi fluid que la bar ? parce que si tu fait juste délicatement descendre
sur le forum le fa_right suis pas la bar il monte directement au haut du forum tu comprend
ce que je veux dire ?

[Milouze14Fondateur]

Salut Franck,

alors, as tu testé aussi de cliquer sur le menu Bienvenue de la toolbar ?

Car il faut prend en compte la css du menu que ce soit en haut ou en bas.
Comme je te l'ai déjà remontée plus haut cette partie est assez compliquée a mettre en œuvre mon ami.

Testes avec ces modifications,

remplaces tout le contenu de ton template par celui-ci:

Code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
    }

    .header {
      background-color: #e9eaf2;
      text-align: center;
        padding-top: 5px;
    }

    #navbar {
      overflow: hidden;
      background-color: #333;
      z-index:998 !important;
    }

    #navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }

    #navbar a.active {
      background-color: #4CAF50;
      color: white;
    }

 .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
   
    </style>
    </head>
    <body>

    <div class="header">
      <center><a href="https://qmhl.forum-canada.com/"><img src="https://i.servimg.com/u/f66/20/18/69/47/gmconn10.jpg" width="700" height="225"></center>
    </div>

    <div id="navbar">
      <a class="active" href="https://qmhl.forum-canada.com/">Acceuil</a>
      <a href="https://www.simulatedhockeymanager.ca/">Outil</a>
      <a href="https://qmhl.forum-canada.com/search">Recherche</a>
      <a href="https://qmhl.forum-canada.com/memberlist">Membres</a>
      <a href="https://qmhl.forum-canada.com/groups">Groupes</a>
      <a href="https://qmhl.forum-canada.com/profile?mode=editprofile">Profil</a>
      <a href="https://qmhl.forum-canada.com/privmsg?folder=inbox">Messagerie</a>
      <a href="https://qmhl.forum-canada.com/login">Connexion</a>
      <a href="https://qmhl.forum-canada.com/login?logout">Déconnexion</a>
      <span class="M14_recept-faLeft"></span>
      <span class="M14_recept-faRight"></span>
        </div>
  <script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {

    }

    .sidepanel  {
      width: 0;
      position:absolute;
      z-index: 1;
      height: 200px;
      top: 282px;
      left: 0;
      background-color: #333;
      overflow-x: hidden;
      transition: 0.9s;
      padding-top: 14px;
    }

    .sidepanel a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .sidepanel a:hover {
      color: #f1f1f1;
    }

    .sidepanel .closebtn {
      font-size: 20px;
      cursor: pointer;
      background-color: #;
      color: #ffffff;
      padding: 5px 10px;
      border: none;
      border-radius: 25px 25px 25px 25px;
    position: absolute;
    right: 32px;
    }

    .openbtn {
      font-size: 20px;
      cursor: pointer;
      background-color: #4CAF50;
      color: #ffffff;
      padding: 5px 10px;
      border: none;
      border-radius: 25px 25px 25px 25px;
      margin-top: -41px;
    position: absolute;
    right: 30px;
    }

    .openbtn:hover {
      background-color:#444;
    }
    </style>
    </head>
    <body>

    <div id="mySidepanel" class="sidepanel">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
    <center><img src="http://hf.hockeyhq.net/HockeyFederation/Menu/CHAMPBANv20.png" style="margin-top:-10px;"></center>
    </div>
    <button class="openbtn" onclick="openNav()">+</button>
    <script>
    function openNav() {
      document.getElementById("mySidepanel").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("mySidepanel").style.width = "0";
    }
    </script>
   
    </body>
    </html>
    <!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 type="text/javascript">
          //<![CDATA[
          (function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
          a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
          a.async = 1;
          a.src = g;
          m.parentNode.insertBefore(a, m)
          })
          (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
          ga('create', '{G_ANALYTICS_ID}', 'auto');
          ga('send', 'pageview');
          ga('set', 'anonymizeIp', true);

          <!-- BEGIN google_analytics_code_bis -->
          ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
          ga('bis.send', 'pageview');
          ga('bis.set', 'anonymizeIp', true);
          <!-- 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 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>
      </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>
            <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 -->


Penser a enregistrer puis à valider en cliquant respectivement sur puis


Puis ce script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:


$(function(){$(function(){
var a=$('#fa_welcome');
var b=$('#fa_notifications');
 $('.M14_recept-faLeft').append(a);
  $('.M14_recept-faRight').append(b);
});});



Penser a cliquer sur le bouton

Tu verras de quoi je veux parler, par contre il n'y a plus de soucis de visu .

[ThunderTB]

Salut Phil !!!

J'ai tester les codes et je te remercie le tout semble fonctionner
mais oui je comprend ce que tu veux dire les panels ne s'affiche pas bien et ne suivent pas
le menu donc la question je me pose est , est-ce que en ajoutant les identifiants :

#fa_menulist et #notif_list pourrais faire en sorte que le tout se suivent ?
https://forum.forumactif.com/t370334-personnaliser-entierement-la-toolbar-via-css

[Milouze14Fondateur]

Salut Franck,

pour ta question,
on peut jouer avec un style mais pas deux mon ami surtout avec cette Toolbar,
c'est à dire (comme je l'ai mentionné plus haut) ,
mettre des hacks !important mais ensuite on sera bloqué pour la position inverse.

[ThunderTB]

Salut Phil ,

Je comprend et c'est dommage , par contre est-ce possible de les rendre visible lorsque nous sommes hors ligne ? parce que dans ma bar je pourrais enlever connexion/déconnexion ainsi
que d'avoir l'option inscription .

Merci d'avance

[Milouze14Fondateur]

Re Franck,

que veux tu afficher en étant hors ligne ?

[ThunderTB]

ReSalut ,

La partie Toolbar plus précisément ( Bienvenue et Notifications ) ils disparait lorsque
nous sommes hors ligne donc sa voudrais dire qu'un éventuel nouveau invité ne pourrais
s'inscrire si il ne voit pas cette partie .

[Milouze14Fondateur]

Salut Franck,

tu peux remplacer le script par celui-ci:

Code:

$(function(){$(function(){
var a=$('#fa_welcome');
var b=$('#fa_notifications');
$('.M14_recept-faLeft').append(a);
$('.M14_recept-faRight').append(b);});});
$(function(){if(_userdata["session_logged_in"])return;
  $(function(){
var a=$('#fa_right a.rightHeaderLink[href$="login"]');
var b=$('#fa_right a.rightHeaderLink[href$="register"]');
$('.M14_recept-faLeft').append(a);
$('.M14_recept-faRight').append(b);
  });});


Les invités doivent voir "Connexion" et S'enregistrer" désormais

[ThunderTB]

Un énorme merci Phil , ca fonctionne très bien tes le meilleur bonne fin de journée .

[Milouze14Fondateur]

De rien Franck,

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande