OK, two things:

1) how can I get a gradient color background in the page menu bar rather than a solid background, and

2) is there a way to visually separate the page names with a vertical line or something similar.

Here is an example of what I would like to do: http://thepioneerwoman.com

Thanks.
Clay

try configuring page menu bar css, for background you need "background: url('');" or something like that (I dont exactly remember syntax).

For dividing bar into buttons, I suppose, we need to add some code to function that echoes bar itself, unless a better way supposed there.

I would like to do the same thing. I have a 1 pix gif that I would like to repeat across the entire menu bar. I added the following to the CSS Inserts, but it didn't work. So, I obviously don't have it right.

div.menu1 {
background:transparent url(wp-content/themes/atahualpa/images/menu-pattern.gif) repeat-x scroll 0 0;
}

I would also like to have the same image flipped vertically so it displays the gradient in the other direction and use that for the menu separators. Somehow, another theme I'm trying to roughly mimic (the Gear theme) does this but I can't figure out how. There is only one menu gif in the image folder, so they must be flipping it somehow via CSS.

The default background of the page menu bar is

div#menu1 ul.rMenu {
background:#FFFFFF none repeat scroll 0 0;
}

You could add a CSS Insert:

div#menu1 ul.rMenu {
background: #123456 url(/path/to/image.gif) repeat-x scroll top left;
}

The menu LI items are

div#menu1 ul.rMenu li {
background-color:#FFFFFF;
margin: -1px 0 -1px -1px;
}

The links inside the LI items are

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
color:#777777;
font-family:Arial,Verdana,sans-serif;
font-size:11px;
font-weight:normal;margin:0;
padding:4px 5px;
text-decoration:none;
text-transform:uppercase;
}

Flynn, this is awesome! If I wanted the background for the menu bar to show through all the menus (except for hover, of course), I would need to modify div#menu1 ul.rMenu li, right? Although, I'm not sure how to modify it to be "transparent." I tried


div#menu1 ul.rMenu {
background:transparent url(wp-content/themes/atahualpa/images/menu-pattern.gif) repeat-x scroll top left;
}
div#menu1 ul.rMenu li {
background:transparent;
margin: -1px 0 -1px -1px;
}


and it worked. However, each menu item still has a border around it. Basically, I want to only see the background image and then highlight with a color. Ideally, I would have an 1px image separate each menu option. The image is actually the inverse of the page menu background image, which is a vertical fade. So, it is just a fade in the other direction, giving the menu "buttons". It can be seen at www.lsrpa,org. Any ideas on how to do that? I don't see any way to insert code between the buttons. Perhaps there is a way via CSS to put the 1px image only on the right of each menu div with the rest of the menu transparent to see the page menu background? Or is this a bit too much for this theme? If so, not that big a deal. I'll figure out something with the look. This theme has been so flexible I'm going to recommend that the association I'm doing the website for purchase the theme. It will offer them so many options in the future when they are ready to tweak things.

BTW, the test site where I'm trying this at is testing.lsrpa.org.

Thanks

Brian

The <A>'s are styled too, the padding and borders are on them. I suggest using Firebug to see which style is on which element