Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Gradient in Page Menu Bar and Separation Bars


  #1  
Old Jul 16, 2009, 04:44 PM
clayphillips
 
5 posts · Jul 2009
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
  #2  
Old Jul 20, 2009, 12:15 PM
adelante
 
6 posts · May 2009
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.
  #3  
Old Aug 20, 2009, 02:26 PM
brianlees
 
16 posts · Aug 2009
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.

Code:
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.
  #4  
Old Aug 23, 2009, 12:23 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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;
}
  #5  
Old Aug 25, 2009, 08:29 PM
brianlees
 
16 posts · Aug 2009
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
  #6  
Old Aug 27, 2009, 06:32 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #7  
Old Jan 13, 2010, 01:57 PM
rcarbaugh
 
5 posts · Jan 2010
You could add a CSS Insert:

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



Flynn:
I used the code you put above to make a gradient .gif work in my page bar menu. Thank you so much. I also got some code from juggledad to extend the page menu bar to the full with of the page, rather than just the width of the menu items. (http://forum.bytesforall.com/showthr...+page+menu+bar)

I am very curious, however, as to the significance of the "#123456" background color call if it is going to be covered by a .gif. It would seem unnecessary, and indeed I did delete it with no apparent ramifications.

Is it unnecessary?
rcarbaugh
http://manhattangrace.org/wp/
  #8  
Old Jan 20, 2010, 07:16 PM
rickheck
 
139 posts · Oct 2009
Flynn:

The CSS doesn't seem to allow the background image to be in back of the menu items. The color of the menu item background (non-hover and hover) seems to 'paint over' the background image.

What is needed is a way to 'un-specify' the menu item background colors, which will allow the background image to show 'under' the menu text.

Thanks...Rick...
  #9  
Old Feb 2, 2010, 10:41 AM
horsemansarts
 
122 posts · Jul 2009
Anybody got this sorted out? I have the same desire... to have a completely 'transparent' menu background so that an image can show through.

Ideas?


Edited: Ah... never mind... I seem to have it sorted!! -SF

Last edited by horsemansarts; Feb 2, 2010 at 10:50 AM.
  #10  
Old Feb 9, 2010, 02:35 AM
DannyLife's Avatar
DannyLife
 
40 posts · Nov 2009
Quote:
Originally Posted by horsemansarts
Anybody got this sorted out? I have the same desire... to have a completely 'transparent' menu background so that an image can show through.

Ideas?


Edited: Ah... never mind... I seem to have it sorted!! -SF
Do you care to explain how? I've been trying to work this out for ages, but the colours of the page buttons don't let the background show through.
  #11  
Old Feb 9, 2010, 06:53 PM
horsemansarts
 
122 posts · Jul 2009
Hi,

I would have preferred to get even the parent hover to be transparent but I'm ok with how it ended up. Take a look at the site and let me know if this is what you had in mind.

http://www.pknraleigh.com/

To get the menu transparent I put this into the CSS inserts. I'm not sure if it is all necessary but it works for me.

Code:
div#menu1 {
border: none;
background:transparent;

}
div#menu1 ul.rMenu {
background:transparent;
}
div#menu1 ul.rMenu li {
background:transparent;
margin: 10px 0 10px 30px;
}

div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
background-color: transparent;
}
I hope this helps!
Sharon
  #12  
Old Feb 10, 2010, 06:42 AM
DannyLife's Avatar
DannyLife
 
40 posts · Nov 2009
Took some tweaking of your code to get it how I wanted but finally got there, thankyou so much for this!
  #13  
Old Feb 10, 2010, 06:48 AM
horsemansarts
 
122 posts · Jul 2009
I am pleased to be able to make a contribution!
Best wishes,
Sharon
http://www.foleyo.com

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Atahualpa Page Menu Bar -&gt; BFA Page Menu Bar? bhannemann Page & Category Menu Bars 16 Feb 21, 2011 05:49 AM
evenly spaced page menu bars phryedrice Page & Category Menu Bars 7 Aug 8, 2009 06:01 AM
How do I add an icon to a page menu link in page menu bar? bcorrigan Page & Category Menu Bars 9 Apr 6, 2009 03:35 PM
Centering BOTH Page and Category menu bars paulae Page & Category Menu Bars 1 Mar 21, 2009 10:09 AM
2 page menu bars (left and right side) possible ? Tigger Page & Category Menu Bars 2 Feb 8, 2009 03:50 PM


All times are GMT -6. The time now is 03:58 AM.


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