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] Page menu bar gif image full width (http://forum.bytesforall.com/showthread.php?t=5243)

rcarbaugh Jan 10, 2010 11:23 PM

[SOLVED] Page menu bar gif image full width
 
What a terrific theme! I have spent hours modifying it and feel like I haven't scratched the surface.

Project lately is to put a gradient .gif behind the page menu bar. I have it working for the menu items, but it doesn't go completely across the page, only under the links. So then, I called the same .gif to be a background for the bar, using some html that I have found here on the forum.

However, since I have a flat background color set up in the options for the page menu, and even though I have used the CSS insert below, the .gif appears to be UNDER that flat background color for the rest of the menu bar to the right. I have left the .gif background a little wider than the menu bar so that you can see what I mean. Here's the website link: MGT Blog.

Here is the pertinent CSS Insert html I have currently:

ul.rMenu, ul.rMenu li {
background-color: transparent;
background: url(http://www.manhattangrace.org/wp/wp-...tgradient2.gif) repeat-x;
}

/* ================================================== */
/* menu background */
/* ================================================= */
div#menu1 {
height: 35px;
margin-top:0px;
background-color: transparent;
background: url(http://www.manhattangrace.org/wp/wp-...tgradient2.gif) repeat-x;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

juggledad Jan 11, 2010 09:21 AM

...ah what tangled code we weave when first we pratice CSS... (apologies to Sir Walter Scott)

the menu area can be confusing because of the layering and classes and id's and levels, but think of layers of like in a drawing program, you put one down, then the next on top then the next on top of that. Some can completely cover the other, or just partially cover the layer below it.

What is the effect you want? If you make the background the same gradient as the menu items, you won't see a division

To get an idea of what each area covers. add this at the end of your css inserts
HTML Code:

div#menu1,
ul.rMenu li,
ul.rMenu li ul,
ul.rMenu {
        border: solid 1px red;
}


rcarbaugh Jan 11, 2010 02:14 PM

...A layer by any other name would still be on top. (apologies to Shakespeare)

Thanks for writing back so quickly. I pasted your code, and it did as I suspected.

It is also understandable that the color background happens AFTER the CSS Insert>background .gif call, so the background flat color overwrites the .gif that the CSS places in the background of the menu bar.

What I am looking for is that my gradient .gif under the page menu bar would continue to the width of the window (99%), and not simply stop at the end of the page link options. I realize that will limit my division possibilities, (can I use the border top,right,bottom,left dialog to make left and right only borders?) but the page looks odd to me with the menu bar stopping part way across. I would give up the division between menu items to have the gradient go full width.

Admittedly having no clue the complexity of this upgrade request, here's an idea: In the Page Menu Bar options for background colors, include an option for .gif or flat background color, requiring (or suggesting) that the .gif is in the /images folder. This would be much like the header image dialog. It would completely eliminate this discussion, of course. But for all I know, it could take re-coding the entire theme... (I don't even know why we use .gifs here, and .jpgs for the header image.)

As an educational aside, what is "#123456" referring to in this CSS line which calls up the .gif for the menu bar?:
background: #123456 url(http://www.manhattangrace.org/wp/wp-...pa344/images/m...

juggledad Jan 12, 2010 05:42 AM

try this, change
HTML Code:

ul.rMenu,
div#menu1 {
height:35px;
margin-top:0px;
background-color:transparent;
background:url(http://www.manhattangrace.org/wp/wp-content/themes/atahualpa344/images/mgtgradient2.gif) repeat-x;
}

to
HTML Code:

ul.rMenu,
div#menu1 {
height:35px;
margin-top:0px;
background-color:transparent;
background:url(http://www.manhattangrace.org/wp/wp-content/themes/atahualpa344/images/mgtgradient2.gif) repeat-x !important;
}

I don't see the #123456 anywhere in the code

rcarbaugh Jan 13, 2010 12:43 PM

That worked perfectly. Thank you so much.
rcarbaugh


All times are GMT -6. The time now is 09:29 PM.

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