Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Membres connectés récemment
Voir tous les membres

[PHPBB2] Toolbar + Navbar + Sticky


2 participants

 :: Astuces Forumactif :: Les sujets résolus

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

Sujet résolu [PHPBB2] Toolbar + Navbar + Sticky

1
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Dim 12 Juil 2020 - 1:16

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Salut Phil j'espère que sa va bien  hinhin 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 !!!



Dernière édition par ThunderTB le Ven 17 Juil 2020 - 6:16, édité 1 fois

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 12 Juil 2020 - 6:16

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 Valid




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 [PHPBB2] Toolbar + Navbar + Sticky Sans_t10


Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

3
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Lun 13 Juil 2020 - 2:20

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 clin oeil .

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 ?

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

4
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Juil 2020 - 6:04

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 hinhin

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

5
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Lun 13 Juil 2020 - 14:06

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

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

6
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Lun 13 Juil 2020 - 17:33

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 ?

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

7
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 14 Juil 2020 - 18:38

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 Enregistr puis Ajout


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 Valid

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


Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

8
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 16 Juil 2020 - 1:03

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

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

9
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 16 Juil 2020 - 3:57

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.

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

10
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 16 Juil 2020 - 16:53

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 hinhin

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

11
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 16 Juil 2020 - 16:57

Re Franck,

que veux tu afficher en étant hors ligne ?

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

12
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 16 Juil 2020 - 21:20

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 .

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

13
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 17 Juil 2020 - 4:01

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 hinhin

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

14
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Ven 17 Juil 2020 - 6:15

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

Sujet résolu Re: [PHPBB2] Toolbar + Navbar + Sticky

15
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 17 Juil 2020 - 16:25

De rien Franck,

Hello


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

A bientôt pour une prochaine demande clin oeil



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

Sujets similaires
» [PhpBB2] Modifier la toolbar
» [Edge] P.A sur la toolbar
» [PHPBB2] Menu déroulant dans la toolbar
» [MODERNBB] Fusion toolbar/nav qui disparaît
» [PHPBB2] Chatbox dans la toolbar + Custom menu | Suite

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Les sujets résolus

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit