Hello,

I am trying to mimic the styling of the Page Menu Bar in the Bytes For All theme with settings in Atahualpa. I prefer Atahualpa because it allows 2-column layout, rotates header images, and just has way, way more options, but I prefer the Page navigation style in the original (http://www.bytesforall.com/wordpress-test/1/)

Is there a way to accomplish this without editing theme files?

Thanks,
Brendan

So, I am pretty close to it. Through a combination of editing the Page Menu Bar, bar1 and bar2 styles, and the CSS insert below, I am able to get the bar to mimic the behavior except for having them overlayed on the header image.

ul.rMenu-hor li {
margin-left: 10px;
}

You can use negative values for both margin and padding, too

I.e.

margin-top: -50px;

to move something 50 pixels higher than its standard position

Hi Flynn,

could You please be more specific? I don't see where I could put the negative margin/padding to push the page bar over the image.

As far as I understand I need:

- page bar pushed up
- bar 1 in the hover color of the menu items
- transparent color in the menu item borders (how?)
- the above code snippet to have a small gap at the left side (I would preger %page-center)

- A fine extra would be roundes corners at the menu items :-)

Greetings, Ralf

What version of Atahualpa and WP?
What is your URL?

Note this thread is 2 years old and lots has changed since then in the theme. You always have the option of addind CSS to the 'CSS Inserts' option - which is where you would want to put your css. For example if you have %image %pages you could use

div#menu1 {margin-top: -50px;}

to move the page menu over the image.

Hi Juggledad,

I use the most recent versions, WP 3.0.5 and Atahualpa 3.6.4.

I didn't think the differences ar that big (from the config standpoint ;-)

Cheers, Ralf

Edit: Got it to work with:

%bar1: height: 1px; background: #C0C0C0; border-top: solid 10px #C0C0C0; (Background ist still white, thus the border-top)
%page-center (border) solid 1px #c0c0c0 (Background) EEEEEE (Hover) C0C0C0
CSS Intert:

div#menu1 {borders: 1px #eeeeee; background: #c0c0c0; margin-top: -27px;}

ul.rMenu-hor li {margin-left: 10px;}

But unfortunately the active tab isn't coloured as set in (Hover), it's always the first item thats highlighted :-(

what's the url?

You have PM.

Try adding a z-index to pop the menu on top of the image

Sorry Juggledad I don't have the slightest clue what You mean. I'm just a user with next to no programming skills.

Greets, Ralf

change the css insert to

div#menu1 {
      borders: 1px #eeeeee; 
      background: #c0c0c0; 
      margin-top: -27px;
      z-index: 99;
}

Sorry, that didn't help.

Could it be that it's a problem of my setup with a lot of pages that show a category? I'll change that (tried short but that didn't help) to use %cat-center. BTW: I'd like to have one or two links to external websites in the navigation, is that possible with a category driven menu bar?

I'll go to bed now. Thanks for Your support :-)

try this

div#menu1 {
position:relative;
      borders: 1px #eeeeee; 
      background: transparent; 
      margin-top: -27px;
      z-index:99;
}
div#menu1 ul.rMenu {
	background: transparent; 
}

Hi Juggledad,

Do You ever sleep? :-)

We're almost there, but I see an upper and lower dashed border on the page bar. Where does that come from? I don't have any dashed lines defined!

One of the things with this, and really any theme, is that once you want to 'step outside the box' and go beyond what the theme options offer, you really need to learn some CSS to see how to make the customized changes you want, either that or you need to hire someone to do it.

three great resources are
1) http://w3schools.com/css which gives examples that you can play with to see what each CSS rule will do
2) FireBug in FireFox which allows you to examine each element and see the CSS that is applied to it. It even lets you change the css to see what effect it will have. and
3) this forum. doing a forum search will answer most questions including your current issue

Yup, understood. I'm going searching.

Thnaks anyway for the fast and competent help. I appreciate that very much.

Greetings, Ralf

So, everything works as wanted.

For all the people who search for this:

CSS insert:


div#menu1 {
position:relative;
border: 1px #eeeeee;
background: transparent;
margin-top: -24px;
z-index:99;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}


ul.rMenu-hor li {
margin-left: 10px;
}

Other settings:

%bar1 style: height: 1px; background: #C0C0C0; border-top: solid 10px #C0C0C0;

%page-center (border) solid 1px #C0C0C0 (Background) EEEEEE (Hover) C0C0C0

That did the trick for me. Solved. Thank You very much. Donations follow soon.

Ralf