Soucis d'apparence avec la liste de notifications de la Toolbar

[ombrageux]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Modification du thème
Lien du forum : https://defoulloir.forumactif.com/

Description du problème

Bonjour,

J'ai fait une modification sur la Toolbar à partir d'un script trouvé sur le forum d'entraide, mais depuis, la liste de notification de la toolbar a été modifié et un interligne s'est mis entre deux notifications, rallongeant considérablement cette liste au point de ne pas voir la fin.

Quelqu'un peut regarder d'où vient le problème ?

D'avance, merci.

[Stefano123]

Bonjour ombrageux,

S'il vous plait, pouvez-vous donner le lien dont vous parlez, ce script trouvé sur le forum d'entraide ?
Et aussi, ce que vous avez modifié dans votre feuille de style CSS !

Merci,

Cordialement,

[ombrageux]

Bonjour et merci pour votre attention.

Le lien dans Forumactif : Personnaliser entièrement la toolbar via CSS

Hormis la couleur de la Toolbar, je n'ai rien modifié, mais juste collé les scripts suivant ce qui donne dans la feuille CSS :

Code:

fa_avatar img {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}
a#fa_rss {
background:url('adresse_de_votre_image')no-repeat!important;
}
a#fa_mail {
background:url('adresse_de_votre_image')no-repeat!important;
}
div#fa_toolbar {
    background-color: #0598E4;  /* Couleur de fond */
    border: 5px solid white;  /* Ajoute une bordure de 2px de couleur */
    border-radius: 50px;  /* Arrondis les bords de la toolbar */
    margin: auto;  /* Centre la toolbar */
    position: relative;  /* Permet de décaler la toolbar */
    top: 10px;  /* Décale la toolbar du haut */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Supprime la flèche "Cacher la toolbar" : Conseillé de le laisser ! */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */

}

Je n'ai volontairement pas remplis les images du RSS et du Mail ce qui supprime ces boutons de la Toolbar.

[Stefano123]

Bonjour ombrageux,

pour la version : invision

À la fin de votre code CSS, j'ai diminué la marge de vos cellules de 0 5px de la div#
Mettez ceci :

Code:

div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 5px;  }/* Repositionne correctement le contenu de la toolbar */

À la place de cela :

Code:

div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px; } /* Repositionne correctement le contenu de la toolbar */

Si toutefois, vous souhaitez avoir un peu plus de marge à la première cellule et barre toolbar de (menu).
Rajoutez ceci à la fin de votre code CSS :
Vous pouvez modifier l'écart en modifiant le padding 1.5 :

Code:

#fa_toolbar #fa_right #notif_list li:first-child {
    padding-top: 1.5em; }

Exemple :



En espérant que ceci réponde à votre attente…

Cordialement,

[ombrageux]

Bonjour Séfano 123

C'est parfait un grand merci à vous.

Si je peux abuser, y a-t-il un script pour faire une barre de bouton flottante comme la toolbar pour la version invision ?

[ombrageux]

Code:

#fa_toolbar #fa_right #notif_list li:first-child {
    padding-top: 1.5em; }

Je n'avais pas vu, merci, mais ça va bien comme ça.

À la base, j'aurais aimé un peu plus de marge ici :



Mais ça n'a pas vraiment d'importance si ça reste comme ça.

[Stefano123]

Rebonjour,

je ne vous garantis rien :

Faites un essai pour voir si cela fonctionne :
je vous ai mis la barre en clair :
Les modifications de design se font dans le CSS :

Pour commencer, voici le lien d'origine de Forumactif :
Ajouter une barre de navigation flottante :

https://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante

Dans votre : PA / Module / Gestion des codes JavaScript :

Ajoutez :

- Affichez un Titre :
-Placement : Sur toutes les pages

Code JavaScript

Code:

(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#submenu',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '50px'
      },
 
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
 
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
 
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-50px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
 
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
   
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
   
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-50px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
   
        document.body.appendChild(FA.Nav.toggler);
      };
 
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
 
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
 
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

Dans votre feuille de style :
Collez ceci :

Code:

/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('https://i.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('https://i.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
  margin-top: 20px;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

En espérant que ceci réponde à votre attente,

Cordialement,

[Stefano123]

Code:

#fa_toolbar #fa_right #notif_list li:first-child {
    padding-top: 1.5em; }

Je n'avais pas vu, merci, mais ça va bien comme ça.

À la base, j'aurais aimé un peu plus de marge ici :



Mais ça n'a pas vraiment d'importance si ça reste comme ça.

Je ne parle pas de l'espace où vous me montrez !

Mais de l'espace entre la barre toolbar et la fenêtre de notification quand ceci est ouvert  : comme sur l'image ci-dessous

[ombrageux]

Re -

Ça fonctionne, il y a juste un souci de hauteur de la barre de boutons et, visiblement, ça annule le flottement de la Toolbar, or, l'intérêt serait soit de fusionner les deux barres, soit de faire en sorte qu'elles soient flottantes toutes les deux.

[ombrageux]

Je ne parle pas de l'espace où vous me montrez !

Mais de l'espace entre la barre toolbar et la fenêtre de notification quand ceci est ouvert  : comme sur l'image ci-dessous

Oui, merci, c'est très bien comme ça, j'ai fais la réctification et tout va bien.

Pour revenir aux barres flottantes, le but est de faire comme sur ce forum d'entraide, c'est à dire les deux barres flottante restant en haut pendant que le défilement de la page.

[Stefano123]

Pour revenir aux barres flottantes, le but est de faire comme sur ce forum d'entraide, c'est à dire les deux barres flottante restant en haut pendant que le défilement de la page.

J'avais bien compris,  

En fait, je pense qu'il faut faire un réglage de hauteur dans le JavaScript, car votre image d'en-tête (header) est assez consistante :

Ou alors, je m'enregistre dans votre forum et vous me mettez en Administrateur pour que je voie ça !!
Parce que comme ça, je ne peux pas visualiser correctement et vous aider au mieux… Après, vous me zapperez de votre forum.

[ombrageux]

Je n'avais pas pensé pour le java script, je vais voir si je peux modifier la hauteur.

Par contre, sur le forum de test, les deux barres ne sont pas flottantes, il n'y a que celle du bouton qui l'est, la Toolbar ne les plus alors qu'elle l'était avant.

[ombrageux]

Petite précision, il y a déjà un javascript et un code CSS pour la toolbar, est-ce ça qui empêche votre script de fonctionner correctement ?

[Stefano123]

Petite précision, il y a déjà un javascript et un code CSS pour la toolbar, est-ce ça qui empêche votre script de fonctionner correctement ?

Oui surement, ça peut faire une confusion, j'ai installé comme vous le tutoriel "Ajouter une barre de navigation flottante" sur mon forum de test de la version Invasion !
Et ceci fonctionne nickel !! Rien d'autre n'a été ajouté en tutoriels concernant la toolbar.

[Stefano123]

ombrageux, vous vous en sortez ?

[ombrageux]

Je vais essayer de m'en sortir, mais je n'ai pas trouvé comment aggrandir en hauteur la barre d bouton.

[ombrageux]

En fait non je ne m'en sort pas.

Voilà ce que ça donne pour la barre flottante, les boutons sont coupés en bas.



Et pour la tollbar qui n'est pas flottante.

[Stefano123]

Dans le JavaScript, pour modifier la hauteur de la barre
chercher ceci et modifier le top : 50px

Code:

// offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '50px'
      },

[Stefano123]

Le tutoriel "Ajouter une barre de navigation flottante" :
La barre du tuto :

Le

La barre d'original fixe :



Sur votre image, j'ai l'impression que vous vous retrouvez avec 2 bars flottants,
la vôtre + le tutoriel "Ajouter une barre de navigation flottante" :

Ou alors, je m'enregistre dans votre forum et vous me mettez en Administrateur pour que je voie ça !!
Parce que comme ça, je ne peux pas visualiser correctement et vous aider au mieux… Après, vous me zapperez de votre forum.

[ombrageux]

Dans le JavaScript, pour modifier la hauteur de la barre
chercher ceci et modifier le top : 50px

Code:

// offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '50px'
      },

Même en modifiant à 80px, ça ne change rien.

Pour le reste, la Toolbar reste fixe, il n'y a que la barre de boutons qui devient flottante, mais avec le problème de hauteur.
Il se peut que ce soit les boutons qui sont trop grands.

[Stefano123]

Comme ça, il m'est difficile de vous venir vraiment en aide, je n'ai aucun visuel de ce qui se passe dans votre forum entre ces codes, pour essayer d'y comprendre quelque chose dans ces dysfonctionnements…
Peut-être avec des retours d'images plus précises, ou quand je me rends dans votre site, je ne vois aucune modification effectuée pour mieux vous faire des retours positifs…  
J'ai l'impression que vous me parlez d'une autre barre flottante, c'est confus… Désolé…

Je vous ai proposé ci-dessus, de m'enregistrer dans votre forum, en me mettant en Administrateur, le temps que je voie ce qui se passe réellement, ne vous inquiétez pas, mon but n'est pas de toucher à quoi que ce soit, mais bel et bien du tuto en question, si un autre code est la cause de ce dysfonctionnement, je vous avertirai !!
Car là, comme ça, c'est un peu brouillon…  

Ou alors quelqu' un d'autre, vraiment plus calé que moi, qui vous donne une explication correspondante à votre attente…  

Merci de votre compréhension,

Cordialement,

[ombrageux]

Bonsoir

En fait, je fais les tests sur ce forum https://routiersympa.forumactif.com/

Pas de soucis pour vous mettre en administrateur vu que ce forum est inactif.

[ombrageux]

A savoir que le CSS et le Javascript sont les mêmes sur le Défouloir que sur le forum test hormis le script que vous m'avez donné pour la barre de bouton flottante.

[Stefano123]

Bonjours ombrageux,

Merci pour ce retour, j'y vois plus clairement !

Votre Header est trop conséquent en largeur ainsi que vos boutons, ça fait trop d'écart pour la barre Flottent, elle n'est pas étudiée pour, ou il faut carrément modifier votre barre fixe et c'est boutons et celle de la barre flottante… Trop de modifs peut faire des dysfonctionnements sur d'autres fonctionnalités…
En plus votre barre actuelle à déjà subit une autre modification.

Supprimé tout le script du tutoriel de la barre flottante que je vous ai donné ci-dessus ! JavaScript et CSS.

On va procéder autrement, en lui mettant tous simplement une position sticky :
Je ne vous garantis rien, faut essayer :

Après avoir tout supprimer le script :
Ajouter ceci dans votre feuille de style :
Vous pouvez régler la hauteur de votre barre fixe : top 0px :

Code:

#submenu {
    background: #fff;
    color: #0076b1;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 2000;
}

En espérant que cela vous conviendra !

À suivre…

[ombrageux]

Bonjour Stéfano123,

Merci pour le nouveau script.

Alors que ce sont exactement le même script CSS et Javascript, j'ai deux résultat différent.

https://defoulloir.forumactif.com/

La toolbar et la barre de bouton sont bien flottantes, mais la barre de bouton passe derrière la toolbar.

https://routiersympa.forumactif.com/

La barre de bouton est flottante, mais pas la barre de bouton.

J'avoue ne pas comprendre pourquoi puisque le forum test est le miroir de l'autre.

[Stefano123]

ombrageux,

Effectivement :

Sur ce forum, la barre de votre toolbar est flottante :
https://defoulloir.forumactif.com/

Et sur ce forum-là, la barre toolbar n'est pas flottante :
https://routiersympa.forumactif.com/

Dans votre CSS de ce forum-là, ou la barre toolbar n'est pas flottante :
Essayer d'y rajouter cette position fixe :

Code:

.fa_fix {
    position: fixed !important;
    top: 0;
    right: 0;
}

[ombrageux]

Ça ne change rien, la Toolbar n'est toujours pas flottante.

[Stefano123]

Dans le CSS

Dans ce code :

Code:

div#fa_toolbar {
    background-color: #0598E4;
    border: 5px solid #fff;
    border-radius: 50px;
    margin: auto;
    top: 0px;
    width: 98%;
}

J'ai rajouté ça :

Code:

position: fixed !important;
    margin-inline: 14px;

Essayez d'y ajouter ceci :

Code:

div#fa_toolbar {
    background-color: #0598E4;
    border: 5px solid #fff;
    border-radius: 50px;
    margin: auto;
    top: 0px;
    width: 98%;
position: fixed !important;
    margin-inline: 14px;
}

Si cela fonctionne, il faut régler la hauteur du top 0px de la position sticky
Comme ceci :

Code:

#submenu {
    background: #fff;
    color: #0076b1;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    z-index: 999;
}

[ombrageux]

La Toolbar reste flottante, mais les bontons restent fixes sur les deux forum.

[Stefano123]

La Toolbar reste flottante, mais les bontons restent fixes sur les deux forum.

Les boutons suivent le mouvement quand vous descendez de votre forum, ceci est normal. Il ne disparait pas quand vous descendez.

Pour lien là ce forum :

https://defoulloir.forumactif.com/

Il faut mettre code : pour la barre toolbar qui reste fixé :

Code:

div#fa_toolbar {
    background-color: #0598E4;
    border: 5px solid #fff;
    border-radius: 50px;
    margin: auto;
    top: 0px;
    width: 98%;
position: fixed !important;
    margin-inline: 14px;
}

Et de même pour celui-là :

Code:

#submenu {
    background: #fff;
    color: #0076b1;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    z-index: 999;
}

J'ai testé et cela fonctionne !
Vous me parlez de 2 forums, un test et le normal : je ne sais plus trop, il faut s'orienter...