Custom image and rollover images for menu?

[joshualindquist]

Is it possible to use images to customize the buttons in the main menu? They are default just text links to the K2 pages, but I'm wondering if I can replace the text links with images and even rollover images for those links.. anyone know?

[jess]

yes you can do both. to make the texts have images find this section in your css:

ul.menu li a {
font: 1em Verdana, Helvetica, Arial, Sans-Serif;
color: white;
margin: 0;
}
add

background: #FFFFFF url('image path') center no-repeat;
For the hover find:

ul.menu li a:hover {
background: #333;
color: #eee !important;
text-decoration: none;
}
for background change it to:

background: #333 url('image path') center no-repeat;

[joshualindquist]

Awesome Jesse, thanks! I have one problem I'm running into with the way I'm displaying my main menu now. I have it in the sidebar, and moved to the left. When I added the background code to my main CSS file, it did infact add the test image to my "Site Admin" button that is still in the upper right where the rest of the menu used to be, but the code I added to my sidebar file isn't picking up on the extra code to display the image for the links. Is there a way around this?

The site I'm editing to test this is: http://www.twoeyesforward.com/uplift

I'm trying to get a Wordpress site that looks like: http://www.upliftfitness.com

~ Josh

[offbeat]

Hey,

I'm in a similar situation. I want to use my own custom font in the top horizontal menu, so just saving as jpegs. Trying to use a different jpeg for each button/page

Tried the code that Jess has given, but it's unfourtunatly not working for me.

Any ideas?

[offbeat]

any help with this?