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 |
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. |
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 { |
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; } |
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 |
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
|
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/ |
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... |
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 |
Quote:
|
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 { Sharon |
Took some tweaking of your code to get it how I wanted but finally got there, thankyou so much for this!
|
|
All times are GMT -6. The time now is 11:11 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.