wordpress menu with flags

  • French

Here is how I included the flags in the WordPress 3 menu.

The following article is inspired by this one http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/.

Indeed, you must first setup these classes « francais » and « english » in the menu creation part as indicated in the article.

alternative css in wordpress 3 menu

alternative css in wordpress 3 menu

You have to input the classe in the Classes CSS (facultitaive) so it is understood by the web in CSS.

The attribut is optionnal, I put it but I could have put nothing ….

Of course, the images have previously been copied in the theme folder. Here, it is twentyten\images.

You have to modify the theme stylesheet style.css by adding :

#access li.francais a{
background: url(images/fr_FR.png) center left no-repeat;
padding-left: 18px;
}
/*background: url(images/wordpress.png) center left no-repeat;*/
#access li.francais a:hover {
background: url(images/fr_FR.png) center left no-repeat;
background-color: #333;
color: #fff;
}
#access li.english a {
background: url(images/en_US.png) center left no-repeat;
padding-left: 18px;
}
#access li.english a:hover {
background: url(images/en_US.png) center left no-repeat;
background-color: #333;
color: #fff;
}

Well, you can see I did not fully follow the indications of the previous article. The author wrote to add « #header ul.navigation li.about » which is in our example : « #header ul.navigation li.francais », it is not an issue as long as we indicate the right informations in style.css

Voila, I hope this would have helped you !!

Txia

____________________________________________
This entry was posted in Wordpress and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge
Please leave these two fields as-is: