Création de liens personnalisés dans la barre de navigation

[Stéphane62880]

Bonjour,

A la place de ces boutons la (première image jointe)

Je souhaite créer des boutons qui serais relié avec un lien vers différente parti du forum

Je souhaiterais les boutons comme ceux la (2e image jointe)

Est-ce possible ? si oui comment procédé ?

Fichiers joints

Boutons.png Vous n'avez pas la permission de télécharger les fichiers joints.(8 Ko) Téléchargé 11 fois

Boutons CIV.png Vous n'avez pas la permission de télécharger les fichiers joints.(26 Ko) Téléchargé 11 fois

[Oka.mi]

Bonjour,

..	Afin de faciliter les recherches ultérieures, j'ai modifié le titre de ce sujet qui était "Création de boutons" en "Création de liens personnalisés dans la barre de navigation". N'oubliez pas que d'autres personnes peuvent profiter de vos questions. Il est donc impératif afin de faciliter l'utilisation de l'outil de recherche d'avoir des titres de sujet explicatifs.

Pour ajouter des liens personnalisés dans la barre de navigation de votre forum, rendez-vous dans votre panneau d'administration, onglet Affichage > Page d'accueil > En-tête & Navigation.

Pour changer l'apparence des boutons, vous pouvez passer par votre feuille de style CSS.
La feuille de style CSS
Le CSS - Comment ça marche ?
https://developer.mozilla.org/fr/docs/Web/CSS/border-radius
https://developer.mozilla.org/fr/docs/Web/CSS/padding
https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient

Sur votre exemple, le lien actif reste dans un style spécifique (fond blanc). Pour cela, vous devrez passer par du JavaScript. Est-ce bien ce que vous souhaitez ?

[Stéphane62880]

Bonsoir,

Oui c'est bien cela.

Respectueusement.

[Oka.mi]

Bonjour,

D'accord, alors je vais partir du principe que vous avez pris le temps de parcourir les liens que je vous ai partagés, car c'est nécessaire pour que vous compreniez un minimum les modifications que je vais vous faire faire.

Nous allons commencer par ajouter du CSS personnalisé.
Une partie de ce CSS est destinée à apporter des propriétés nouvelles à un élément qui existe déjà, .navlinks li a.mainmenu, qui est le sélecteur des liens que nous visons (dans la barre de navigation).

Code:

.navlinks li a.mainmenu {
   background: linear-gradient(#bbb, #eee);
   padding: 7px;
   border-radius: 3px;
   border: 1px solid #ccc;
}

J'ai écrit pour vous quelques propriétés qui permettrait de se rapprocher du rendu souhaité, mais vous pouvez bien sûr régler ça par vous-même, changer la couleur, la taille des bordures, etc.
Nomination et couleurs

L'autre partie du CSS à ajouter consiste à créer une nouvelle classe (on va l'appeler "actif").
Cette classe :
- sera ajoutée et retirée dynamiquement par JavaScript en fonction de la page sur laquelle nous nous trouvons.
- permet donc d'ajouter et de retirer des propriétés CSS à un élément (ici, le lien actif et les liens non actifs).
Cela donne :

Code:

.actif {
   background: linear-gradient(#fff, #ddd) !important;
}

a.actif {
   color: #333;
}

Là aussi, vous pouvez modifier les propriétés comme vous le souhaitez.
a.actif vise plus précisément le lien <a>, ce qui permet d'écraser le css du a.mainmenu, qui donne une couleur bleue au lien alors que vous le voudriez en gris foncé (selon l'exemple).

Une fois ceci paramétré, rendez-vous dans Modules > HTML & JavaScript > Gestion des codes JavaScript, vérifiez que la gestion du JavaScript est bien activée :

Gestion des codes JavaScript
Ensuite, créez un nouveau JavaScript, cochez comme placement "sur toutes les pages", et collez ce code :

Code:

$(function(){
    $('.navlinks li a.mainmenu').each(function(){
        if ($(this).attr('href') == window.location.pathname + window.location.search) {
            $(this).addClass('actif');           
        } else {
            $(this).removeClass('actif');       
        }
    });
});

Explication du code :
$(function(){ indique au Script de s'exécuter après le chargement de la page (s'il s'exécute avant que les éléments ne soient chargés, cela ne fonctionnera pas).
$('.navlinks li a.mainmenu').each(function(){ on cible les liens de la barre de navigation (le ".navlinks li a.mainmenu" qu'on a utilisé dans votre CSS personnalisé) et on annonce que pour chacun de ces liens (parce qu'il y en a plusieurs)...
if ($(this).attr('href') == window.location.pathname + window.location.search) { on vérifie que l'adresse du lien correspond à l'adresse de la fenêtre où on se trouve,
$(this).addClass('actif'); et si la condition précédente est remplie (comprendre "si le lien vérifié = la page où on se trouve"), on ajoute la classe "actif" qui attribue les propriétés CSS spécifiées plus haut.
else {
$(this).removeClass('actif'); pour toute autre situation (si la condition n'est pas remplie), on retire la classe "actif" = les liens prennent leur apparence par défaut là aussi spécifiée plus haut dans le CSS ajouté.

[Stéphane62880]

Maintenant que j'ai fais mais boutons, j'aimerais en renommé comme "ACCUEIL" le renommer en "INDEX", désactivé le bouton ou il n'y a rien dedans.
Comment faire ?
je commence à comprend le fonctionnement
le CSS =apparence du forum
JavaScript = fonctionnalités
et le HTML c'est par exemple pour créer des formulaire dans le forum
Je me trompe ?

[Oka.mi]

Bonjour,

Désolée pour le délai de réponse.

le CSS =apparence du forum
JavaScript = fonctionnalités
et le HTML c'est par exemple pour créer des formulaire dans le forum

HTML : base structurelle d'une page web

L'extrait qu'on voit sur cette capture d'écran de l'inspecteur (accessible via la touche F12), c'est le HTML qui définit votre bouton "Accueil", au milieu des autres éléments de la page.
On peut lire en passant qu'il a une class "mainmenu" et une class "actif", ajoutée via votre JavaScript.
C'est donc un lien (<a>) "mainmenu", contenu dans un <li> et un élément avec une class "navlinks", d'où le fait que dans le css, on le sélectionne par .navlinks li a.mainmenu.
CSS : comme vous l'avez compris, ça touche à l'apparence.
JavaScript : c'est un peu plus compliqué que ça, mais dans l'utilité qui vous concerne, il pourrait servir à effectuer des modifications CSS et HTML impossibles à effectuer par des moyens traditionnels, ou à, comme vous en parliez, créer des formulaires, puisqu'il s'agira d'envoyer et de traiter des données localement.

j'aimerais en renommé comme "ACCUEIL" le renommer en "INDEX"

Donc, ici, nous allons employer du JavaScript. Il ne sera pas nécessaire d'en créer un nouveau, vous pouvez modifier celui déjà créé et ajouter après la première ligne $(function(){, ceci :

Code:

$('.navlinks li a.mainmenu[href="/"]').text("Index");

Ici nous avons modifié le texte de l'élément .navlinks li a.mainmenu ayant pour href (l'attribut qui détermine la destination du lien) "/". Le lien de votre forum + "/" ce qui revient à ce que renvoie le lien de votre forum. Selon le paramétrage par défaut, c'est votre page d'accueil, mais cela peut également être votre portail, ou une page HTML personnalisée (Affichage > Page d'accueil > Généralités).
Pour les autres liens dont vous souhaiterez modifier le texte, il suffira donc de récupérer le href de ces liens (vous pouvez faire l'exercice en inspectant vous-mêmes vos liens avec F12) et d'écrire des nouvelles lignes à la suite en changeant le texte voulu.

désactivé le bouton ou il n'y a rien dedans.

Si vous parlez du bouton "Portail" et /ou "Calendrier", vous pouvez vous rendre dans votre panneau d'administration, onglet Modules. Vous y trouverez les deux, et le moyen de les désactiver.

[Stéphane62880]

D'accord,

Merci beaucoup