Pluxopolis

Ajouter une icône aux menus des pages statiques

---

Rédigé par jack le 16 septembre 2014 2 commentairese

Pour ce nouveau tutoriel, je vous propose de voir comment afficher des icônes à gauche des menus des pages statiques, afin d'obtenir ce genre de présentation:

Chaque page statique est identifiée par un numéro unique. Pour connaitre ces identifiants, rendez-vous dans la partie d'administration de votre site et allez dans la gestion des pages statiques:

Relevez les numéros de vos pages statiques dans la colonne Identifiant. Nous en aurons besoin pour la suite.

Pour rappel, l'affichage des menus des pages statiques se fait grâce à l'instruction suivante, présente dans le fichier header.php stocké dans le dossier de votre thème:

<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>

Le code html généré ressemble alors à ceci

Nous allons utiliser l'attribut id des balises <li> pour définir les propriétés css et ajouter nos icônes.
Pour les icônes je vous conseille de prendre des images de 32x32 pixels et de le copier dans le dossier:

themes/defaut/img/

Éditez maintenant le fichier style.css de votre thème et rajoutez à la fin du fichier les lignes suivantes:

#static-1 {
	background: url(../img/mac_logo.png) no-repeat center left; 
	padding: 10px 0 10px 40px;
}

#static-2 {
	background: url(../img/windows_logo.png) no-repeat center left; 
	padding: 10px 0 10px 40px;
}

#static-3 {
	background: url(../img/ubuntu_logo.png) no-repeat center left; 
	padding: 10px 0 10px 40px;
}

#static-1 permet de définir le comportement visuel de la balise <li> définie par id="static-1" correspondant à la page statique "Statique 1".

De la même façon #static-2 permet d'ajouter l'icône à la page "Statique 2", et ainsi de suite...

NB: les valeurs padding: 10px 0 10px 40px; sont adaptées pour le thème par défaut de PluXml que j'ai pris comme modèle pour ce tutoriel. Il est donc fort probable que vous ayez à les adapter pour votre propre thème.

DClassé dans : PluXml ,Mots clés : Css, Page statique, Navigation, PluXml, Thème

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

2 commentaires

rFil RSS des commentaires de cet article