Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] Page menu bar gif image full width


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 11, 2010, 12:23 AM
rcarbaugh
 
5 posts · Jan 2010
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #2  
Old Jan 11, 2010, 10:21 AM
juggledad's Avatar
juggledad
 
22,379 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
...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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 11, 2010, 03:14 PM
rcarbaugh
 
5 posts · Jan 2010
...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...
  #4  
Old Jan 12, 2010, 06:42 AM
juggledad's Avatar
juggledad
 
22,379 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 13, 2010, 01:43 PM
rcarbaugh
 
5 posts · Jan 2010
That worked perfectly. Thank you so much.
rcarbaugh

Bookmarks

Tags
page menu background

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu bar buttons the same flexible width like fluid layout Tigger Page & Category Menu Bars 6 May 14, 2011 01:58 PM
Page menu bar: first menu item as a image unelma Page & Category Menu Bars 2 Dec 5, 2009 12:52 AM
Want centred navigation to be full width Babs Page & Category Menu Bars 3 Jul 17, 2009 03:00 AM
how to extend the added image to your layout width in menu bars? and some other Q's ppat2 Page & Category Menu Bars 1 May 5, 2009 06:28 PM
[SOLVED] Howto: Align page menu bar with left sidebar or opacity overlay width iroQuai Page & Category Menu Bars 1 Mar 7, 2009 06:01 PM


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


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