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

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 

A4JP.COM DESIGN

Copyright © 2019