Guide et astuce Mise en évidence des onglets de navigation

Maxime H · 16 Février 2023

Salut Jean-Louis et merci pour cette astuce.

JeanLouis à dit:
A noter que partout où apparaitra la phrase elle héritera du Code couleur

C'est d'ailleurs un peu le problème de cette méthode, ajouter du HTML dans les phrases a ses limites : comme tu le dis la stylisation se répercute partout où la phrase va être utilisée et parfois à des emplacements où on ne le souhaitait pas.

S'agissant des onglets de la barre de navigation il y a un moyen de les cibler avec CSS.
CTRL + MAJ + i pour ouvrir les outils de développement de son navigateur et on pointe l'onglet souhaité, ici Accueil:

Notez le data-nav-id="home" il va nous servir dans le fichier extra.less pour appliquer du CSS à l'onglet:

Less:

a[data-nav-id="forums"] {
    color: #F9F237;
}

Ici uniquement l'onglet est coloré, Accueil ailleurs sur le forum aura la couleur d'origine.

JeanLouis · 16 Février 2023

Oui.. Les outils de développement, m'ont souvent rendu des services. Ici cela ne pose pas trop de problèmes étant le lien "Accueil" très peu utilisé, en tant que texte et principalement sur footer et navigation .. Ce que je voulais faire était un lien (un va et vient) , entre le site et le forum qui sont complémentaires

Sur le site pour des raison de sécurité, spam, copier/coller ect... Bon nombres d'options ne sont pas utilisées ou bloquées . Xenforo m'a donné la possibilité de mettre en place un lieu réservé aux utilisateurs cool... D'un autre coté je n'ai pas encore la maitrise de Xenforo étant jusqu'à présent WordPress, j'en découvre tous jours et sur "xenforo.fr", j'ai reçu quelques conseils très appréciables. Merci pour les codes que je gardent précieusement

JeanLouis · 22 Février 2023

@Maxime H

Less:

a[data-nav-id="forums"] {
    color: #F9F237;
}

J'ai mis en place ton code, en adaptant l' ID, fonctionne super bien et dans le cas de la navigation, c'est une bonne utilisation... Merci

Nicolas · 27 Février 2023

Sur le même principe on peut rajouter une icône devant le lien des onglets de navigation:

Less:

a[data-nav-id="home"]:before {
    .m-faBase();
    .m-faContent(@fa-var-home);
    padding-right: 5px;
}

a[data-nav-id="forums"]:before {
    .m-faBase();
    .m-faContent(@fa-var-comments);
    padding-right: 5px;
}

a[data-nav-id="whatsNew"]:before {
    .m-faBase();
    .m-faContent(@fa-var-bolt);
    padding-right: 5px;
}

a[data-nav-id="members"]:before {
    .m-faBase();
    .m-faContent(@fa-var-users);
    padding-right: 5px;
}

JeanLouis · 27 Février 2023

@Nicolas ... Merci

Guide et astuce Mise en évidence des onglets de navigation

Maxime H

Membre

JeanLouis

Membre

JeanLouis

Membre

Nicolas

Administrateur

JeanLouis

Membre

Membres en ligne

Messages récents

Nous respectons votre vie privée