I would like to put an icon in my page menu links. I am using a page menu bar at the top of the header and figured out how to stylize the text and background color. What I want to do now is put a 15x15 px icon to the left of the titles in this bar.

Is there a post here that already covers this topic?

my site in development is at:
http://depts.washington.edu/ophthweb/wordpress/

I want to put the icons in front of the links at the top of the page.

Thanks in advance,

Bill

I'm still trying to figure out how to do this.
I think the div is called, li .page_item page item-XXX (the page ID), as that's what Web Develper in FF tells me.

I think I want to add some css like:
a {
padding-left: 20px;
background-image: url(/to/file/img.jpg);
background-position: left center;
background-repeat: no-repeat;
}
But I can't figure out where to put this CSS.

thanks for any help,

Bill

Try

ul.rMenu li a {
background-image: url(path/to/image.gif) !important;
padding-left: 30px !important;
}

Adding !important here just to be sure

Thanks Flynn, that works!

What I want though is to have this a different icon for each menu option. I know the page numbers, so what do you think I need to do call each individual one?

Great Theme.

I love that I can do most of the work w/o editing the files themselves. Really makes the site sustainable by multiple folks.

Solved it!
I didn't realize until I read a post by jutta that I can put HTML in titles of post/pages.

so what I did was add a div tag around the page title and than added the CSS in the insert section.

Voila!

Great board here at Bytes for All, you never know where you will learn stuff!

However, problem with my last method, is I don't know how to do an image swap in a hovered stage,

and even worse: the div tags show up in the title field! This will be an accessibility problem!

so I'm back to thinking this has to happen with the ul.rMenu li a CSS.

Drats!

Flynn,

so what I want to do is stylize each line item anchor tag separately.

Right now I have two of them,

<li class="page_item page-item-659"> and 
<li class="page_item page-item-661">

and I want to get different background-image: CSS selectors in each of them.

Say,

background-image: url(/ophthweb/wordpress/images/uw-icon-blk.png);

in the first one, and

background-image: url(/ophthweb/wordpress/images/som-icon-blk.png);

in the second one.

The of course I will add some different hover stuff.

How do I stylize those

page-item-XXX separately?

thanks for your help,

Bill

/* enough to set the padding once */
ul.rMenu li a {
padding-left: 30px !important;
}
ul.rMenu li.page-item-659 a:link,
ul.rMenu li.page-item-659 a:visited,
ul.rMenu li.page-item-659 a:active {
background-image: url(path/to/image-659.gif) !important;
}
ul.rMenu li.page-item-659 a:hover {
background-image: url(path/to/image-659-hover.gif) !important;
}
ul.rMenu li.page-item-661 a:link,
ul.rMenu li.page-item-661 a:visited,
ul.rMenu li.page-item-661 a:active {
background-image: url(path/to/image-661.gif) !important;
}
ul.rMenu li.page-item-661 a:hover {
background-image: url(path/to/image-661-hover.gif) !important;
}

However doing this with 2 different images (one for default, one for hover state) will cause a short delay the first time a given menu tab is being hovered, because the hover image needs to be loaded. It also creates 2 hits to the server for each menu tab. To avoid this use ONE "container image" that contains both the default and the hover image, for both the default and the hover state and change only the position of the "container image" on hover:

ul.rMenu li.page-item-661 a:link,
ul.rMenu li.page-item-661 a:visited,
ul.rMenu li.page-item-661 a:active {
background: url(path/to/image-661-complete.gif) no-repeat scroll bottom left !important;
}
ul.rMenu li.page-item-661 a:hover {
background: url(path/to/image-661-complete.gif) no-repeat scroll top left !important;
}


You'd create a new blank, transparent image image-661-complete.gif with about 3 or 4 times the height of the original images image-661.gif and image-661-hover.gif, and paste (in i.e. Fireworks: "import") both these images into the "container image" image-661-complete.gif, positioning one at the top and one at the bottom.

It is easier than it may sound and worth the effort because the hover effect will be very smooth.

Thanks Flynn,

That work, but I had to make a small change to your CSS shorthand: changed "background-image: (url...)..." to:

"background (url..)..."

I appreciate your help.

And I can't say enough about how flexible the theme is. Having the ability to store HTML and CSS in the theme settings will make updates and upgrades so much easier.

Regards,

Bill

Originally Posted by bcorrigan

Thanks Flynn,

That work, but I had to make a small change to your CSS shorthand: changed "background-image: (url...)..." to:

"background (url..)..."

You're right, sorry for that