Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Atahualpa Page Menu Bar -> BFA Page Menu Bar? (http://forum.bytesforall.com/showthread.php?t=2010)

bhannemann Jun 11, 2009 12:45 PM

[SOLVED] Atahualpa Page Menu Bar -> BFA Page Menu Bar?

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?


bhannemann Jun 12, 2009 08:38 AM

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;

Flynn Jun 18, 2009 05:28 AM

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


margin-top: -50px;

to move something 50 pixels higher than its standard position

ralfsteck Feb 20, 2011 04:00 AM

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

juggledad Feb 20, 2011 07:05 AM

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
HTML Code:

div#menu1 {margin-top: -50px;}
to move the page menu over the image.

ralfsteck Feb 20, 2011 07:43 AM

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 :-(

juggledad Feb 20, 2011 12:09 PM

what's the url?

ralfsteck Feb 20, 2011 12:42 PM

You have PM.

juggledad Feb 20, 2011 01:27 PM

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

ralfsteck Feb 20, 2011 03:56 PM

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

juggledad Feb 20, 2011 04:11 PM

change the css insert to
HTML Code:

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

ralfsteck Feb 20, 2011 04:37 PM

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 :-)

juggledad Feb 20, 2011 07:28 PM

try this
HTML Code:

div#menu1 {
      borders: 1px #eeeeee;
      background: transparent;
      margin-top: -27px;
div#menu1 ul.rMenu {
        background: transparent;

ralfsteck Feb 21, 2011 01:46 AM

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!

juggledad Feb 21, 2011 05:14 AM

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 :)

ralfsteck Feb 21, 2011 05:32 AM

Yup, understood. I'm going searching.

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

Greetings, Ralf

ralfsteck Feb 21, 2011 05:49 AM

So, everything works as wanted.

For all the people who search for this:

CSS insert:

div#menu1 {
border: 1px #eeeeee;
background: transparent;
margin-top: -24px;
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.


All times are GMT -6. The time now is 03:44 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.