Menu haut horizontal : changer juste 1 élement

[nuaje]

Bonsoir à tous,

Sur mon site de bijoux fantaisie, je souhaiterais mettre en évidence la livraison gratuite.

Est-il possible de changer séparément l'apparence de ce champ livraison gratuite?

Par exemple avoir livraison gratuite en rouge et le reste tel quel.

Parce qu'en touchant au CSS, je n'arrive qu'à changer que tous les champs du menu d'un coup.

 

Merci d'avance pour votre aide et bonne soirée

[belew]

Bonjour,

 

Il faut assigner a ton champs une classe spécifique afin qu'il puisse pouvoir être mis en forme de maniere unique.

 

Il faut donc rajouter cela dans le menu.tpl

 

Et ensuite dans le css personnalisé la classe

 

++

[nuaje]

Bonjour belew,

 

Merci pour ta réponse. Est ce que tu pourrais détailler un peu plus s'il te plaît je suis loin d'être un expert en code ?

Ce serait très gentil

[daniel3000]

Bonjour,

 

si la solution très logique de belew te semble un peu lourde à mettre ne oeuvre, tu peux peut être simplifier en profitant du fait que "livraison gratuite" est en dernière position dans ton menu (et à condition de le laisser toujours en dernière position).

Dans ce cas, tu peux alors décomposer la partie concernée du .css de ton menu en liste (ul> li, li...tu trouveras plein d'exemples de listes dans tes fichiers css), avec pour le premier "li" le paramétrage actuel, et pour le li "last item" le paramétrage de couleur (ou autre ) qui te convient.

 

Cordialement. Daniel

[nuaje]

Bonjour Daniel,

Je te remercie pour ton aide. Mais avec l'option que tu proposes je ne dois modifier que le css ?

J'ai essayé avec last-item ou last-child mais ça ne fonctionne pas, peut-être parce que je ne modifie que le css ...

Le code html est le suivant :

<ul class="sf-menu clearfix sf-js-enabled sf-shadow">

 

 

<li>

 

<li>

 

<li>

 

<li>

 

<li>

 

<li>

 

 

<a href="http://www.nuaje.fr/content/1-livraison-gratuite">Livraison gratuite</a>

</li>

</ul>

 

En css, j'avais avant :

 

 

 

.sf-menu li {

 

 

background-color: #000000;

border: 1px solid #FFFFFF;

float: left;

position: relative;

}

 

J'ai testé :

 

 

 

.sf-menu li.last-item {

 

 

background-color: #CCCCCC; (couleur différente)

border: 1px solid #FFFFFF;

float: left;

position: relative;

}

 

ou avec child-item et je ne vois pas de différence

 

Merci d'avance

[nuaje]

Personne pour m'aiguiller un petit peu plus s'il vous plaît?