Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Ajouter une icône aux menus des pages statiques

Rédigé par Stéphane 2 commentaires
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="http://pluxopolis.net/article48/ajouter-une-icone-aux-menus-des-pages-statiques#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.

2 commentaires

#1  - Djb a dit :

Merci pour l'astuce, possibilité aussi d'utiliser les pseudo éléments CSS :before ou :after

Répondre
#2  - Sue a dit :

Super astuce ! Merci beaucoup pour ton aide

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la quatrième lettre du mot vsoggt ?
Top