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

[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB


2 participants

 :: Astuces Forumactif :: Les sujets résolus

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

Sujet résolu [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

1
Eldär
Eldär
https://dominationrp.forumactif.com/

MessageEldär Sam 22 Fév 2020 - 19:23

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Hello !

Bonjour !

J'aimerai solliciter votre aide pour le problème suivant :

Aujourd'hui, j'ai un problème avec la barre de navigation sur mon forum avec le style ModernBB. Pour le moment, le top du forum se présente comme cela :

[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Z10


Et quand je scroll, j'ai cette barre :

[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Y10


Quelqu'un saurez comment remplacer la barre du haut avec les icones Facebook, Twitter etc, par la barre qui s'afiche quand on scroll ? J'aimerai que cette barre prenne la place de la barre de navigation mais j'ai beau essayé de bidouiller avec la class navbar navlink, je ne trouve pas comment faire ça et j'avoue que mes compétences en codages commencent à être limitées....

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

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

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

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

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

 case 'left':
 break;

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

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

 default:
 slid_vert = true;
 }

 $(document).ready(function () {

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

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

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

 if (slid_vert) {
 var height_max = h_perso;

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

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


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

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function () {
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if (pm != null) {
 pm.focus();
 }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if (report != null) {
 report.focus();
 }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(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;

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

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

 {GREETING_POPUP}

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

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

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

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

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

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

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script 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 -->

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

<body id="modernbb">
<!-- BEGIN hitskin_preview -->
  
<div id="hitskin_preview" style="display: block;">
 <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <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;">
 <div class="h3">{SITENAME}</div>
 <div id="login_popup_message">
 {LOGIN_POPUP_MSG}
 </div>
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}"/>
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
 </form>
 </div>
</div>
<!-- END switch_login_popup -->

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

<div id="page-header">
 <div class="headerbar">
 <div id="headerbar-top">
 <div class="wrap">
 <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}"/></a>

 <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>

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

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

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

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

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

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


Mon forum : https://dominationrp.forumactif.com/forum

Quelqu'un pourrait me montrer comment mettre ça en place ?

Merci d'avance !


Dernière édition par Eldär le Dim 23 Fév 2020 - 13:29, édité 1 fois

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 22 Fév 2020 - 19:29

Hello Eldär ,
merci de lire et d'accepter le règlement avant toute demande:
https://www.milouze14.com/t32096-reglement-de-l-entraide-forumactif#610159

Pour ta demande, je vois cela demain matin cher ami.
Tu peux en attendant compléter ton profil afin de renseigner un maximum d’information comme ton prénom, c'est bien plus convivial.:
https://www.milouze14.com/profile?mode=editprofile&page_profil=informations


Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

3
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 22 Fév 2020 - 19:58

Merci Timothée,

alors en faite, c'était plus simple que prévu.


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

Ajouter ceci:

Code:

#fa_toolbar.is-hide{top:-50px;}
.is-sticky#headerbar-top.w-toolbar{top: 0px!important;}

Penser a cliquer sur le bouton [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Sans_t10

Dans le template overall_footer_end :
Affichage/Templates/Général/overall_footer_end

Recherches ceci:
Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $(window).scroll(function() {
 var header_top = $('#headerbar-top');

 if (header_top.hasClass('w-toolbar')) {
 if ($(window).scrollTop() >= 42) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 } else {
 if ($(window).scrollTop() >= 1) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 }
 });
});
//]]>
</script>




Supprimes et remplaces par:
Code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $(window).scroll(function() {
 var header_top = $('#headerbar-top');
                 var M14_toolbar= $('#fa_toolbar');

 if (header_top.hasClass('w-toolbar')) {
 if ($(window).scrollTop() >= 42) {
  
 header_top.addClass('is-sticky');
                                M14_toolbar.addClass('is-hide');  
 } else {
 header_top.removeClass('is-sticky');
                                M14_toolbar.removeClass('is-hide');
 }
 } else {
 if ($(window).scrollTop() >= 1) {
 header_top.addClass('is-sticky');
                                M14_toolbar.addClass('is-hide');
 } else {
 header_top.removeClass('is-sticky');
                                M14_toolbar.removeClass('is-hide');
 }
 }
 });
});
//]]>
</script>


Penses a enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout


Si le template n'a pas était modifié, voici le contenu complet:
Code:
<!-- BEGIN html_validation -->
<!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">
<body>
<div>
   <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
      <ul class="footerbar-user">
         <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
            <li class="rightside">
               <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
                  {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
               </a>
            </li>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </div>
   <div class="copyright">
      <div class="wrap">
         <div class="copyright-body">
            {ADMIN_LINK}
            </div>
        </div>
    </div>
</div>
{PROTECT_FOOTER}

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');
                var M14_toolbar= $('#fa_toolbar');

      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
 
            header_top.addClass('is-sticky');
                                M14_toolbar.addClass('is-hide'); 
         } else {
            header_top.removeClass('is-sticky');
                                M14_toolbar.removeClass('is-hide');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
                                M14_toolbar.addClass('is-hide');
         } else {
            header_top.removeClass('is-sticky');
                                M14_toolbar.removeClass('is-hide');
         }
      }
   });
});
//]]>
</script>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
       
        FB.init({
            "appId"  : "{switch_facebook_login.FB_APP_ID}",
            "cookie"  : {switch_facebook_login.FB_COOKIE},
            "xfbml"  : {switch_facebook_login.FB_XFBML},
            "oauth"  : {switch_facebook_login.FB_OAUTH},
            "version" : "{switch_facebook_login.FB_VERSION}"
        });
       
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect, span.ti-connect').attr({
            "data-loc": "{switch_topicit_connect.TOPICIT_URL}",
            "data-login": "{switch_topicit_connect.BOARD_LOGIN}",
            "data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
            "data-lang": "{switch_topicit_connect.BOARD_LANG}"
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

4
Eldär
Eldär
https://dominationrp.forumactif.com/

MessageEldär Sam 22 Fév 2020 - 20:38

Hello !

Je ne m'attendais pas à autant de réactivité ! Merci ! :)

Malheureusement, cela ne marche pas. J'ai essayé en cherchant juste la partie de code à modifier et en remplaçant le template complet par le contenu complet que vous avez donné, mais le résultat est le même.

En revanche, quand je scroll, la barre :

[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Y10

Ne s'affiche plus.

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

5
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 23 Fév 2020 - 5:12

Hello Timothée,

alors en relisant ta demande, je me pause la question suivante:
Tu veux remplacer la toolbar (barre en haut de page réseaux sociaux etc etc) par la barre de navigation (menu de navigation) .
Mais est-ce définitivement ou seulement au scroll?

Mon astuce consiste au scroll de remplacer la toolbar par le menu de navigation:
Et sur ton fofo , il est logique que cla ne fonctionne pas car tu as ceci dans ta feuille de style:

Code:

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

Il faut supprimer cette partie Timothée.

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

6
Eldär
Eldär
https://dominationrp.forumactif.com/

MessageEldär Dim 23 Fév 2020 - 11:01

Hello Phil !

Milouze14 a écrit:alors en relisant ta demande, je me pause la question suivante:
Tu veux remplacer la toolbar (barre en haut de page réseaux sociaux etc etc) par la barre de navigation (menu de navigation) .
Mais est-ce définitivement ou seulement au scroll?

Pour repréciser, j'aimerai que les éléments de navigations remplacent les éléments de la toolbar ( en gardant le Bienvenur Admin à droite si possible. ) et que cette barre reste en haut haut de la page, même si je scroll.

En gros, j'aimerai juste cette barre en top de mon forum :

[MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Abc10

Et quelle reste en top, même si je scroll.


Voilà !


Merci encore pour ton aide et bon week-end ! hinhin

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

7
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 23 Fév 2020 - 11:57

Ah merki, c'est plus compréhensible pour moi impeccable .

Alors on va retirer cette c.s.s:
Code:
#fa_toolbar.is-hide{top:-50px;}
.is-sticky#headerbar-top.w-toolbar{top: 0px!important;}

Puis celle-ci, si ce n'est pas encore fait:
Code:
.is-sticky#headerbar-top
{
    display: none;
}



Dans le template overall_footer_end :
Affichage/Templates/Général/overall_footer_end

Recherches et supprimes ceci:

Code:

    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
    $(window).scroll(function() {
    var header_top = $('#headerbar-top');
                    var M14_toolbar= $('#fa_toolbar');

    if (header_top.hasClass('w-toolbar')) {
    if ($(window).scrollTop() >= 42) {
     
    header_top.addClass('is-sticky');
                                    M14_toolbar.addClass('is-hide'); 
    } else {
    header_top.removeClass('is-sticky');
                                    M14_toolbar.removeClass('is-hide');
    }
    } else {
    if ($(window).scrollTop() >= 1) {
    header_top.addClass('is-sticky');
                                    M14_toolbar.addClass('is-hide');
    } else {
    header_top.removeClass('is-sticky');
                                    M14_toolbar.removeClass('is-hide');
    }
    }
    });
    });
    //]]>
    </script>

Penses a enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout

Pour terminer ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

#headerbar-top .navbar.navlinks
{
position: fixed;
top: -20px;
z-index: 99999 !important;
left: 0px;
}
#fa_left,#fa_search,#fa_share{display:none!important;}

Penser a cliquer sur le bouton [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB Sans_t10

Alors , il se peut que cela empiète sur le "Bienvenue" de la toolbar.

Dans ce cas, il faudra jouer avec ce style:


Code:
#headerbar-top .navbar.navlinks a.mainmenu{padding: 6px 2px!important;}
#headerbar-top .navbar.navlinks li{margin: 27px 0 0!important;}


Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

8
Eldär
Eldär
https://dominationrp.forumactif.com/

MessageEldär Dim 23 Fév 2020 - 13:29

Yes ! Un grand merci à toi Phil !

C'est exactement ce que je cherchais ! Je passe le sujet en résolu ! Merci pour l'aide

Bon weekend ! :)

Sujet résolu Re: [MODERNBB] Fusionner la toolbar et la barre de navigation sur un thème modernBB

9
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 23 Fév 2020 - 15:56

De rien Timothée,

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
» [MODERNBB] Probleme d'ajustement de la barre de la barre de navigation
» [MODERNBB] Barre de navigation sur 2 lignes
» [MODERNBB] Fusion toolbar/nav qui disparaît
» [MODERNBB]Ajouter l'infobulle au survol des boutons de la barre de navigation
» [MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB )

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 | Forum gratuit