Extra formatting of the Page Menu Bar
 

I figured out some other people would also be interested in the sort of formatting I intend to create for my static site's Page Menu Bar:

(1) Center the Page Menu items ("Home", "Contact Us", etc) instead of leaving them aligned to the left (default in Atahualpa).

(2) Colour the rest of the Page Menu Bar (the part that is not under the item buttons) in the same way as the buttons and not in light gray (default in Atahualpa).

(3) Place separators (such as "|", or ">>", or "-", etc) between the bar items.

There's other ways to format the buttons (animate them or produce a sound when the cursor hovers on, etc) but I think the previous 3 options would be enough to create a modern, sleek looking Page Menu Bar. All help / comments are welcome, thanks!

PD: Please see attachment for reference (the blue part is how I intend my Page Menu Bar to look).

I'm looking to do exactly that as well.

Anyone know how?

Where do you place the "|" at?

i have extra space between my post header and the post

driving me nuts

www.prolawncare.us

advice?

netninja,

this CSS showed up in your source and this is your problem:

td#header {
padding-bottom:15px;
}

I have no clue where that might come from, probably some setting in Ata. You could fix that by inserting this css:

td#header {
padding-bottom:0px !important;
}

You might not need the "!important" part. But there certainly is a more elegant solution, I just can't find it right now.

'%page-center' on the "Style & Edit HEADER AREA" page. It is right there.

'Background color' in "Page Menu Bar"

That's a difficult one. But you could at least get your "|" by using borders just like this: www.heavyconnection.net

How can I do that? That's exactly what I'm looking to do. (from your link)

I solved it by adding this

.page_item {
border-right: solid 2px #330000;
text-align: center;
}
#rmenu2 {
border-left: solid 2px #330000;
}

You'll need the left border on rmenu2. If you add right AND left borders to page_item, you'll end up with double borders between two buttons and single borders on the first and last.

Thank you, that worked.

Any way to shorten the borders? I don't want them the full length.

The borders are as long as the '.page_item's are high. You'd have to change the .page_item height.