Appliquer un changement d'apparence sur les liens actifs de la barre de navigation

[Oxtran]

Bonsoir,

Je cherche à modifier l'apparence des liens actifs de ma barre de navigation après avoir cliqué, sans succès jusqu'à maintenant.

Je ne parviens pas à obtenir le même résultat que sur ma messagerie, exemple sur le screen suivant où l'onglet actif est "message envoyés" qui passe en blanc après avoir cliqué dessus:

Screen:

Voici le CSS correspondant:

CSS:

Merci d'avance

[Oxtran]

Up!

[Toryudo]

Bonjour !
Ça doit pouvoir se faire avec ce petit code Javascript, à placer "Sur toutes les pages" :

Code:

const cssRep = {
  'color': '#FFF',
};
$(function(){
  if (window.location.pathname != '/'){
    $('.mainmenu[href^="' + window.location.pathname + '"]').css(cssRep);
  }
  else {
    $('.mainmenu[href="/"]').css(cssRep);
  }
});

Le tuto des codes Javascript personnalisés si besoin : https://forum.forumactif.com/t311791-gestion-des-codes-javascript

[Oxtran]

Ca fonctionne, c'est parfait! Pensez-vous que je puisse avoir la même chose ici (avec la même apparence css que la barre de navigation)?

[Toryudo]

Cette barre fonctionne un peu différemment, parce que vous ne pouvez pas cliquer deux fois de suite sur le même menu... comprendre que la deuxième fois, ce n'est plus un lien mais du texte. Pour le cibler, ça devient plus compliqué, parce que j'ai peur de cibler autre chose sur la page en même temps... mais on peut tenter d'y toucher avec un peu de CSS (et en modifiant un peu le Javascript également, pour être sûr qu'il n'agisse pas sur ce menu).

Le Javascript un peu modifié :

Code:

const cssRep = {
  'color': '#FFF',
};
$(function(){
  if (window.location.pathname != '/'){
    $('#nav_bar_1 .mainmenu[href^="' + window.location.pathname + '"]').css(cssRep);
  }
  else {
    $('#nav_bar_1 .mainmenu[href="/"]').css(cssRep);
  }
});

Le CSS que vous avez fourni plus tôt, modifié :

Code:

a.mainmenu, #page-body .gen strong{
    font-family: "Quattrocento";
    font-size: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 2px #000000;
    text-align: center;
    color: white;
}
 
a.mainmenu:hover{
    color: #757575;
    transition: color 0.3s ease-in-out;
}
#nav_bar_1 {
  top: 0;
  position: absolute;
  left: 70px;
  right: 70px;
  line-height: 30px;
  z-index: 20003!important;
}
 
#nav_bar_1 a, #page-body a.mainmenu, #page-body .gen strong {
    color: #757575;
    transition: color 0.3s ease-in-out;
    font-weight: 400;
    text-transform: uppercase;
}
#page-body .gen strong {
    color: #FFF;
}

#nav_bar_1 a:hover, #page-body a.mainmenu:hover {
    color: #ccc;
}
 
#nav_bar_1 a:active, #page-body a.mainmenu:active{
    font-family: "Quattrocento";
    font-size: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 2px #000000;
}
 
#fa_toolbar {
    left: 0px; /*position de la toolbar par rapport au coté gauche*/
    height: 30px; /*epaisseur de la toolbar*/
    background-image: url(https://zupimages.net/up/23/02/mt6w.png); /*couleur de la toolbar*/
    font-family: "Quattrocento";
-moz-box-shadow: 150 0 150px #000;
-webkit-box-shadow: 150 0 150px black;
border: 1px #303030 solid;
border-width: 1px 0px;
box-shadow: 0 0 5px black;
width: 100%!important;
}
 
#fa_left, #fa_search, #fa_share, #fa_welcome, #fa_hide, #fa_show{
    display: none !important;
}
 
/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"]{
    display: none!important;
}

Ça a l'air de marcher, mais est-ce que ça peut toucher autre chose dans d'autres pages... je ne sais pas, à vérifier en fouillant un peu !

[Oxtran]

C'est parfait! Merci.

Concernant le rendu sur mobile, est-ce possible de faire en sorte que la barre de navigation s'étende jusqu'au bout de la page ?

Rendu mobile:

[Oxtran]

Petit up!

[Toryudo]

Bonjour !
Je pense que je n'ai pas mieux à proposer que de mettre les éléments de la barre en position: fixed.
Ça change un peu l'affichage, parce que la barre va toujours rester collée en haut de l'écran... mais franchement, pour phpbb2, ça va être difficile de faire mieux.

Code:

#fa_toolbar {
    position: fixed;
}
#nav_bar_1 {
    position: fixed;
}

Et voilà directement dans le code CSS :

Code:

a.mainmenu, #page-body .gen strong{
  font-family: "Quattrocento";
  font-size: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 2px #000000;
  text-align: center;
  color: white;
}

a.mainmenu:hover{
  color: #757575;
  transition: color 0.3s ease-in-out;
}

#nav_bar_1 {
  top: 0;
  position: fixed;
  left: 70px;
  right: 70px;
  line-height: 30px;
  z-index: 20003!important;
}

#nav_bar_1 a, #page-body a.mainmenu, #page-body .gen strong {
  color: #757575;
  transition: color 0.3s ease-in-out;
  font-weight: 400;
  text-transform: uppercase;
}

#page-body .gen strong {
  color: #FFF;
}

#nav_bar_1 a:hover, #page-body a.mainmenu:hover {
  color: #ccc;
}

#nav_bar_1 a:active, #page-body a.mainmenu:active{
  font-family: "Quattrocento";
  font-size: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 2px #000000;
}

#fa_toolbar {
  position: fixed;
  left: 0px; /*position de la toolbar par rapport au coté gauche*/
  height: 30px; /*epaisseur de la toolbar*/
  background-image: url(https://zupimages.net/up/23/02/mt6w.png); /*couleur de la toolbar*/
  font-family: "Quattrocento";
  -moz-box-shadow: 150 0 150px #000;
  -webkit-box-shadow: 150 0 150px black;
  border: 1px #303030 solid;
  border-width: 1px 0px;
  box-shadow: 0 0 5px black;
  width: 100%!important;
}

#fa_left, #fa_search, #fa_share, #fa_welcome, #fa_hide, #fa_show{
  display: none !important;
}

/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"]{
  display: none!important;
}

[Oxtran]

Top, merci beaucoup!

Une dernière petite chose, auriez-vous un code sous la main ou un sujet à me transmettre pour insérer un bouton haut de page / bas de page que je pourrai ajouter sur l'index?

Encore merci.

[Toryudo]

Oui, vous pouvez suivre cette petite astuce : https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas !

[Oxtran]

Merci! Je passe en résolu.