ホームページ制作|札幌
ホームページ制作|札幌
北海道札幌市北区北6条西6丁目2-1朝日プラザ偕楽園506号室
営業時間 7:00-24:00 TEL/FAX 011-768-8116
代表:グレン チャールズ ロウ
49 Online (オンライン中(39ゲスト Guests 10検索ボート Bots, )

Style WordPress Menu Items with Background Images

Every menu item in WordPress has a unique ID and they can be styled with background images if you want. You just need to find the id to style the items with CSS using background-images.

Finding the id with Google Chrome browser
If you have the Google Chrome Browser go to your page and right click on the thing you want to know the id of, then select Inspect Element from the menu. After that, a screen will pop up down the bottom of your browser. Select Elements if it isn’t already on that tab.

Finding the id with the Firefox browser
Right click on the object you want to find the id of, then click on Inspect Element from the menu. A screen should open at the bottom of the browser. Make sure it is on the HTML tab if it is not. Just by moving your mouse over lines of code, you can see which lines make the parts of the page.

Just the page source
Of course you can also just look at the page source (HTML code) in almost any browser, if you want to, but I like being able to mouse over things and get the highlighted boxes ;)

After you have the id you just need to add some lines of CSS to edit the menu. Here are some examples:


CSS Example 1:
ID-of-the-thing-here { background-image: url(/images/foo.gif) }

CSS Example 2:
ID-here { background-image: url(http://a4jp.com/images/icons/home2.png); other-bits-of-code-here-if-you-want–delete-this-if-you-do-not-use-it;}


* I usually use GIF, JPG or PNG files.

** GIF or JPG files work the best if you want your images to display on older mobile devices properly. For some reason the transparent part of PNG files becomes black on my 1st Generation iPod and older versions of Internet Explorer.


Glen Rowell
a4jp.com 


single.php

Comments

Alie says:

Loving the write-up… Cheers! Supporting the article… With thanks.

Birck Bichler says:

I really appreciate you writing this post. I have been looking all over for this type of info! Thank goodness I found it. You’ve made my day! Thanks again

Brendon Contrino says:

I just want to say I am new to weblogs but I truly savored this web page. I bookmarked it and will come back many times. Bless you for revealing your web page.

Hollis says:

This blog was… how do I say it? Relevant! Finally I found something which helped me.

Thanks a lot!

Janis says:

It’s the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I wish to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I wish to read more things about it!

Leave a Reply

A4JP.COM DESIGN
Copyright & NPO Study © 2024