Individual images as navigation design TwentyTen

CMS & WordPress
1

Hi.

I can’t figure out a solution for changing the black bar in WP TwentyTen to individual background images behind each link using an image I created in Photoshop I have tried changing a few things in the CSS file but probably not the right changes. do I need to edit the functions file too?

Thanks

2

I think this is what you are talking about…
It sounds like you want to assign a background-image to the anchors or list items in the nav bar. First, you need to put the images in your site folder, probably in the “/twentyten/images” folder. Then, for the css, you need to apply the background-image to whatever element you want. If you wanted to put the same image on every nav item, you could probably do something like this:

.nav-menu li a {
background-image: url(‘images/yourimage.jpg’);
background-repeat: no-repeat;
}

I dont have the 2010 theme loaded up, so I’m not sure of the exact class names in the css selector. You would probably have to change the class name to hit the right item. If you wanted to have a different image for each nav item, you would have to make a css rule for each one, and target it more specifically. It might look something like this:

.nav-menu li.page-item-2 a {
background-image: url(‘images/yourimage.jpg’);
background-repeat: no-repeat;
}

.nav-menu li.page-item-3 a {
background-image: url(‘images/anotherimage.jpg’);
background-repeat: no-repeat;
}

No need to touch the functions file, its purely a matter of basic css. Hope that helps.

3

I have managed to put a background image in now. However they are all squashed together and not full size. This is how it looks now http://tinypic.com/view.php?pic=2nqehb4&s=6 but the image I created should look like this behind each link [URL=“http://tinypic.com/view.php?pic=a31ngp&s=6”]http://tinypic.com/view.php?pic=a31ngp&s=6 Besides this I would like to know how to add a background image each time a a new navigation item is made in Wordpress taking into account the text length of the new navigation item.

Thanks for helping

4

You could take an image of the left corner and right corner, apply one to the li tag as a background-image, and one to the anchor tag as a background-image, and fill in the middle with a background color. You could also apply both background-images to the li tag, and apply a background-color, or you could use css3 and set a background color and border-radius. Try this out, making sure the selector (li class) is correct:

.nav-menu li {
background-color: #31C3E5;
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}

Everything below the background-color sets the top left and right border radius, and applies it for each major browser so it is as compatible as possible on different browsers. It should size to fit each time you change or add a tab.