Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Adding an image to b/g of menu bar


  #1  
Old Mar 19, 2009, 09:21 PM
nickcee
 
27 posts · Feb 2009
Hi,

Can you tell me how I can add my .png image to the
background of my menu as well as the sub menu?

The .png is a transparent image. If there's a better way to make the b/g a transparent color please tell me. Thanks!
  #2  
Old Mar 20, 2009, 03:36 PM
wrastler
 
I was just about to ask this as well!

Has anyone had any luck? I have a background.gif, have gone to the "Page Menu Bar/Background Color" but can't post the same url there. And since my background is a pattern, it is impossible to match with a simple background color.

Anyone had any success?

Thanks!
  #3  
Old Mar 20, 2009, 05:06 PM
wrastler
 
Does this help...? Put this code into CSS inserts.

"That could be done with a background image

HTML Code:

ul.rMenu, ul.rMenu li {
background: #123456 url(/path/to/image.gif) repeat-x;
}

To have no image on sub levels

HTML Code:

ul.rMenu ul, ul.rMenu ul li {
background: #123456;
}

You might have to work on the positioning of the image, there are various techniques to do that, pixels, % or "top left" etc. http://www.w3schools.com/css/css_background.asp "
  #4  
Old Mar 20, 2009, 05:10 PM
wrastler
 
The only problem with this solution is that it looks like one background is pasted on top of another....not very pretty..


Any other solutions to use the same background url gif for menu, footer, sidebar and main body background?
  #5  
Old Apr 6, 2009, 12:07 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by nickcee
Hi,

Can you tell me how I can add my .png image to the
background of my menu as well as the sub menu?

The .png is a transparent image. If there's a better way to make the b/g a transparent color please tell me. Thanks!
The menu items are

ul.rMenu li

The menu is

ul.rMenu


ul.rMenu li {
background: url(/path/to/image.gif);
}
  #6  
Old Apr 13, 2009, 10:59 PM
nickcee
 
27 posts · Feb 2009
Thanks! I have the command working properly but now I realize that it would look better if the image is only active on mouseover. The way it looks right now isn't too nice.
  #7  
Old Apr 14, 2009, 08:18 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
In that case use

ul.rMenu li a:hover {
background: ...
}
  #8  
Old Apr 16, 2009, 06:56 PM
nickcee
 
27 posts · Feb 2009
It doesn't seem to be working now. I'm not sure why.
  #9  
Old Apr 16, 2009, 07:19 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Try this

ul.rMenu li:hover,
ul.rMenu li:sfhover {
background: ...
}
  #10  
Old Apr 16, 2009, 07:35 PM
nickcee
 
27 posts · Feb 2009
It's still not working. Here's a link to my site.

www.edenintegrativehealth.com

The transparent b/g image is only showing up after the mouse goes over and leaves "Programs for men" under "Programs".
  #11  
Old Apr 16, 2009, 07:58 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
I don't see any image applied at all. When you made the first post you were not a donor yet and I didn't look closely enough. If you just want to add transparency to the menu items, so that the background shines through, don't use images at all:

HTML Code:
 ul#rmenu2 li:hover,
ul#rmenu2 li:sfhover {
    filter: alpha(opacity=40);
    -moz-opacity:.40;
    opacity:.40;
}
try with the <A> instead if this doesn't work or looks bad

HTML Code:
 ul#rmenu2 li a:hover {
    filter: alpha(opacity=40);
    -moz-opacity:.40;
    opacity:.40;
}
Increase the values for less transparency
  #12  
Old Apr 27, 2009, 09:21 AM
rinoa3108
 
53 posts · Apr 2009
when adding the path to the code:

ul.rMenu li {
background: url(/path/to/image.gif);
}

do we add an absolute path? my images wont load up. also does it have to be a .gif?
  #13  
Old Apr 27, 2009, 08:52 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
When you reference images through CSS Inserts always use absolute paths since the CSS Inserts are being inserted into the HEAD section of each page and with permalinks ON the CSS i.e. for single pages would be in subdirectories, so relative URLs won't work throughout the whole site

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Adding image of quotes to blockquote SmartlyPretty Atahualpa 3 Wordpress theme 12 Sep 24, 2009 01:13 PM
Adding header image ZHowl Header configuration & styling 27 Jul 31, 2009 07:30 PM
How do I move drop down menu bar for pages under logo area and header image? barfarf Header configuration & styling 1 Apr 22, 2009 12:49 PM
adding opacity to menu bar background colors nickcee Page & Category Menu Bars 0 Mar 23, 2009 02:46 PM
How to put the page menu bar under the header image? manu Page & Category Menu Bars 1 Mar 9, 2009 09:39 AM


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


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