Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Barre de notification et de navigation fusionner

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

  • 0

Résolu Barre de notification et de navigation fusionner

Message par AryaLestrange Dim 17 Jan 2021 - 21:57

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 17/01/2021
Lien du forum : https://arya-forumtest.forumactif.com/

Description du problème

bien le bonjour à vous Smile
Je me permets de revenir vers vous car je souhaiterai fusionner ma barre de navigation et de notification ensemble mais je ne trouve pas de tuto pour modernbb pour y parvenir, je vous joins le résultats souhaité :
https://zupimages.net/up/21/02/g8ex.png

D'avance merci, le problème restant la fusion, j'arrive parfaitement à arranger ensuite la navigation et jpense que la notification ne sera pas un soucis également, merci à vous <3
bonne soirée
AryaLestrange

AryaLestrange
Nouveau membre

Messages : 28
Inscrit(e) le : 14/06/2020

Voir le profil de l'utilisateur https://avada-kedavrarpg.forumactif.com
AryaLestrange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par Milouze14 Lun 18 Jan 2021 - 8:35

Hello AryaLestrange,

on va placer la variable qui génère la barre de navigation en dehors du header dans le template:

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


Recherches et supprimes ceci:

Code:

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



Plus haut recherches cette variable:

Code:
 {JAVASCRIPT}

Juste en dessous déposes ceci:

Code:
 <div class="M14_navigation">{GENERATED_NAV_BAR}</div>

Penses a enregistrer puis à valider en cliquant respectivement sur Barre de notification et de navigation fusionner Imgrr10 puis Barre de notification et de navigation fusionner 824052533


Le soucis est le suivant, la variable génère des balises li, ce qui provoque des retour à la ligne.

Pour y remédier on va les supprimer et les remplacer par le lien avec la class mainmenu et leur textes respectifs.

Le script :

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

Mets un titre explicite.

Coches sur toutes les pages.


Déposes ceci:
Code:

$(function(){$('.M14_navigation').find('a.mainmenu').each(function(){var a=$(this).attr('href');var text=$(this).text();var b=$(this).closest('li').length;
if(b){$(this).closest('li').replaceWith('<a href="'+a+'" class="mainmenu">'+text+'</a>'); 
}});});



Penses à cliquer sur le bouton VALIDER

Puis on cache ce qui nous intéresse pas sur la Toolbar et on donne l'apparence souhaitée pour le placement de la barre et des boutons.

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

Ajoutes ceci:

Code:

/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share{display:none!important;}
/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{width:80%;left:10%;position:fixed;z-index: 200009 !important;top:0;}
/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:white!important;
margin-top:14px;
padding: 0 4px;
font-size: 1.3rem;
display: inline-block !important;
}

Penses à cliquer sur le bouton Barre de notification et de navigation fusionner Sans_t10

Ensuite cette version à une barre de navigation flottante qui désormais ne sert plus à rien,
on va donc supprimer le script:

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');

      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>





Penses a enregistrer puis à valider en cliquant respectivement sur Barre de notification et de navigation fusionner Imgrr10 puis Barre de notification et de navigation fusionner 824052533

Et voilou, à toi de travailler quelque peu Very Happy .

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6456
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par AryaLestrange Lun 18 Jan 2021 - 10:25

Coucou
Merci à toi et oui je vais bosser xD
Je vous tiens informer I love you
J'essaye de faire ça aujourd'hui ou demain
AryaLestrange

AryaLestrange
Nouveau membre

Messages : 28
Inscrit(e) le : 14/06/2020

Voir le profil de l'utilisateur https://avada-kedavrarpg.forumactif.com
AryaLestrange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par AryaLestrange Lun 18 Jan 2021 - 12:06

Double post :p finalement j'ai pas pu m'empêcher Very Happy Je suis arrivée à un résultat satisfaisant pour la barre de navigation, je galère cependant un peu avec la notification pour les points suivants :
> retirer le pseudo pour ne laisser que le lien cliquable sur l'avatar afin que je puisse ensuite le déplacer correctement en haut et qu'au clic, ça fasse comme sur la maquette que les options apparaissent à gauche de l'avatar et en version réduite vu que j'ai réussi à cacher une bonne partie de ce que je voulais pas.
> retirer au clic le surlignement blanc, (notification et sur l’avatar) ; et remonter la notification de tel sorte à ce qu'elle soit pareil que la navigation ; jpourrai ensuite m'attaquer à l'intérieure :3

voici le CSS actuel (faut pas hésiter à me dire si certaines choses sont inutiles, ou si je peux simplifier) :
Code:
/*** variables couleurs ***/
:root{
--fondun: #d2dee2; /** fonds bleu clair, fond bandeau, pa, qeel, catégories et fond des informations pour le profil (niveau de la barre de nav) **/
--fonddeux: #e6eded; /** fonds bleu plus clair,  fond description, carré d’informations **/
 --fondtrois: #a7b9c8; /** fond bleu, fond titre categorie, qeel et nav **/
--fondsquatre:(-70deg,#a9bbca, #41465d); /** dégradé**/


--colorone: #fff; /** couleur blanc, titre avec un fond en dégradé **/
--colortwo: #3a3e56; /** couleur bleu foncé, couleur des titres sans fond, ainsi que des description.  **/
--colorthree: #a7b9c8; /** couleur bleu claire, pour les messages/sujet, date et heure. **/
}

  /*** fin variables ***/

/*---------------------------------- Barre de navigation et de notification -----------------------------------*/

 
/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share, a#fa_hide, #fa_usermenu{display:none!important;}

#fa_menu #fa_welcome, #fa_right a.rightHeaderLink{color: var(--colortwo)!important; text-decoration:none!important;}



#fa_toolbar{height: 30px;font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;line-height: 30px;}

div#fa_right{line-height: 30px;color:var(--colortwo)!important;font-size: 12px; }

ul#fa_menulist{background:var(--fonddeux);color: var(--colortwo)!important;}

#fa_toolbar :link, #fa_toolbar :visited{color: var(--colortwo)!important; text-decoration:none!important;}

.fa_avatar img {
  width: 100px;
  height: 100px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 100%;
  margin-bottom: -10px;
}

/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{text-align: center; width: 50%; left: 25%; position:fixed;z-index: 200009 !important;top:0;background:var(--fondtrois);font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;}

/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:var(--colortwo)!important;
line-height: 30px;
padding: 0 4px;
display: inline-block !important;
}

/*------------------------------- Fin Barre de navigation et de notification ----------------------------------*/
d'avance merci pour ces éclaircissements,

bonne journée Smile
AryaLestrange

AryaLestrange
Nouveau membre

Messages : 28
Inscrit(e) le : 14/06/2020

Voir le profil de l'utilisateur https://avada-kedavrarpg.forumactif.com
AryaLestrange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par Milouze14 Lun 18 Jan 2021 - 19:52

Re,

alors j'ai apporté des nouveautés dans la feuille de style, il faudra les ajuster et les compiler si besoin:

Code:
/*** variables couleurs ***/
:root{
--fondun: #d2dee2; /** fonds bleu clair, fond bandeau, pa, qeel, catégories et fond des informations pour le profil (niveau de la barre de nav) **/
--fonddeux: #e6eded; /** fonds bleu plus clair,  fond description, carré d’informations **/
 --fondtrois: #a7b9c8; /** fond bleu, fond titre categorie, qeel et nav **/
--fondsquatre:(-70deg,#a9bbca, #41465d); /** dégradé**/
 
 
--colorone: #fff; /** couleur blanc, titre avec un fond en dégradé **/
--colortwo: #3a3e56; /** couleur bleu foncé, couleur des titres sans fond, ainsi que des description.  **/
--colorthree: #a7b9c8; /** couleur bleu claire, pour les messages/sujet, date et heure. **/
}
 
  /*** fin variables ***/
 
/*---------------------------------- Barre de navigation et de notification -----------------------------------*/
 
 
/*LES PARTIES A GAUCHE DE LA TOOLBAR*/
#fa_left,#fa_search,#fa_share, a#fa_hide, #fa_usermenu{display:none!important;}
 
#fa_menu #fa_welcome, #fa_right a.rightHeaderLink{color: var(--colortwo)!important; text-decoration:none!important;}
 
 
 
#fa_toolbar{height: 30px;font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;line-height: 30px;}
 
div#fa_right{line-height: 30px;color:var(--colortwo)!important;font-size: 12px; }
 
ul#fa_menulist{background:var(--fonddeux);color: var(--colortwo)!important;}
 
#fa_toolbar :link, #fa_toolbar :visited{color: var(--colortwo)!important; text-decoration:none!important;}
 
.fa_avatar img {
  width: 100px;
  height: 100px;
  position: relative;
  top: -15px;
  margin-right: 5px;
  border-radius: 100%;
  margin-bottom: -10px;
  cursor:pointer;
}
 
/*LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation{text-align: center; width: 50%; left: 25%; position:fixed;z-index: 200009 !important;top:0;background:var(--fondtrois);font-family: 'Playfair Display', serif;
  font-size: 12px;
  text-transform: uppercase;height: 30px;font-weight: bold;}
 
/*LES LIENS DE LA NOUVELLE BARRE DE NAVIGATION*/
.M14_navigation a
{
color:var(--colortwo)!important;
line-height: 30px;
padding: 0 4px;
display: inline-block !important;
}
 
/*------------------------------- Fin Barre de navigation et de notification ----------------------------------*/



#fa_usermenu{width:0px!important;padding:0px!important;}
#fa_menulist{padding: 9px 18px 9px 18px!important;text-align: center;right: 209px!important;}
#fa_right.welcome #fa_menu #fa_welcome{background-color:transparent!important;}

Le script qui va dérouler le menu au clic sur l'avatar ( non disponible sur la version de base ) .

Édites donc le script pour cet avatar et remplaces le par celui-ci:
Code:
$(function() {
$(function() {
$('#fa_welcome').remove();
$('#fa_notifications').before('<span class="fa_avatar">' + _userdata.avatar + '</span>');
  $('span.fa_avatar').click(function(){
    $('#fa_menulist').slideToggle();
  });
    
})
});

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6456
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par AryaLestrange Mar 19 Jan 2021 - 19:17

Bonsoir merci à toi
C'est presque tout bon, il y a un moyen de basculer l'ouverture du menu et des notifications derrières l'avatar ?
la demande pourra bientôt être archivée Smile
AryaLestrange

AryaLestrange
Nouveau membre

Messages : 28
Inscrit(e) le : 14/06/2020

Voir le profil de l'utilisateur https://avada-kedavrarpg.forumactif.com
AryaLestrange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par Milouze14 Mar 19 Jan 2021 - 19:36

Hello AryaLestrange,

l'espace est bien trop restreint de ce côté désolé Wink .

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 6456
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de notification et de navigation fusionner

Message par AryaLestrange Mer 20 Jan 2021 - 8:50

oki je note merci
AryaLestrange

AryaLestrange
Nouveau membre

Messages : 28
Inscrit(e) le : 14/06/2020

Voir le profil de l'utilisateur https://avada-kedavrarpg.forumactif.com
AryaLestrange a été remercié(e) par l'auteur de ce sujet.

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


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