Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


  #1  
Old Jun 11, 2009, 11:45 AM
bhannemann
 
2 posts · Jun 2009
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
  #2  
Old Jun 12, 2009, 07:38 AM
bhannemann
 
2 posts · Jun 2009
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;
}
  #3  
Old Jun 18, 2009, 04:28 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #4  
Old Feb 20, 2011, 03:00 AM
ralfsteck
 
55 posts · Oct 2009
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

Last edited by ralfsteck; Feb 20, 2011 at 03:03 AM.
  #5  
Old Feb 20, 2011, 06:05 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 20, 2011 at 03:09 PM.
  #6  
Old Feb 20, 2011, 06:43 AM
ralfsteck
 
55 posts · Oct 2009
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 :-(

Last edited by ralfsteck; Feb 20, 2011 at 07:20 AM.
  #7  
Old Feb 20, 2011, 11:09 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what's the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Feb 20, 2011, 11:42 AM
ralfsteck
 
55 posts · Oct 2009
You have PM.
  #9  
Old Feb 20, 2011, 12:27 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try adding a z-index to pop the menu on top of the image
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Feb 20, 2011, 02:56 PM
ralfsteck
 
55 posts · Oct 2009
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
  #11  
Old Feb 20, 2011, 03:11 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
change the css insert to
HTML Code:
div#menu1 {
      borders: 1px #eeeeee; 
      background: #c0c0c0; 
      margin-top: -27px;
      z-index: 99;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Feb 20, 2011, 03:37 PM
ralfsteck
 
55 posts · Oct 2009
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 :-)
  #13  
Old Feb 20, 2011, 06:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try this
HTML Code:
div#menu1 {
position:relative;
      borders: 1px #eeeeee; 
      background: transparent; 
      margin-top: -27px;
      z-index:99;
}
div#menu1 ul.rMenu {
	background: transparent; 
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Feb 21, 2011, 12:46 AM
ralfsteck
 
55 posts · Oct 2009
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!
  #15  
Old Feb 21, 2011, 04:14 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Feb 21, 2011, 04:32 AM
ralfsteck
 
55 posts · Oct 2009
Yup, understood. I'm going searching.

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

Greetings, Ralf
  #17  
Old Feb 21, 2011, 04:49 AM
ralfsteck
 
55 posts · Oct 2009
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

Bookmarks

Tags
page menu bar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Page tab height issue: page link tabs higher than page menu bar Fux Page & Category Menu Bars 13 Oct 30, 2010 03:42 AM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 10:18 AM
Bug: Atahualpa 3.0 Theme Options > Page Menu Bar bseppa Page & Category Menu Bars 5 May 9, 2009 08:59 PM
How do I add an icon to a page menu link in page menu bar? bcorrigan Page & Category Menu Bars 9 Apr 6, 2009 02:35 PM
Atahualpa 3.0 Theme Options > Page Menu Bar - Page Error on Save bseppa Atahualpa 3 Wordpress theme 9 Dec 12, 2008 05:35 PM


All times are GMT -6. The time now is 01:51 AM.


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