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)
-   -   Gradient in Page Menu Bar and Separation Bars (http://forum.bytesforall.com/showthread.php?t=2479)

clayphillips Jul 16, 2009 03:44 PM

Gradient in Page Menu Bar and Separation Bars
 
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

adelante Jul 20, 2009 11:15 AM

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.

brianlees Aug 20, 2009 01:26 PM

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.

Flynn Aug 23, 2009 11:23 AM

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;
}

brianlees Aug 25, 2009 07:29 PM

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

Flynn Aug 27, 2009 05:32 PM

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

rcarbaugh Jan 13, 2010 12:57 PM

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/

rickheck Jan 20, 2010 06:16 PM

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...

horsemansarts Feb 2, 2010 09:41 AM

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

DannyLife Feb 9, 2010 01:35 AM

Quote:

Originally Posted by horsemansarts (Post 24556)
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.

horsemansarts Feb 9, 2010 05:53 PM

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

DannyLife Feb 10, 2010 05:42 AM

Took some tweaking of your code to get it how I wanted but finally got there, thankyou so much for this!

horsemansarts Feb 10, 2010 05:48 AM

I am pleased to be able to make a contribution!
Best wishes,
Sharon
http://www.foleyo.com


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

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