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] Background image in menubar


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 Aug 24, 2011, 09:52 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
How do I get a background image to my menubar? Thx!
  #2  
Old Aug 24, 2011, 10:25 AM
juggledad's Avatar
juggledad
 
22,322 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
one way is to use a CSS insert
HTML Code:
div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
then set the other parts of the menu to a transparent color.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 24, 2011, 10:29 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Thx!

You say: then set the other parts of the menu to a transparent color.

How do I set a transparent color?
  #4  
Old Aug 24, 2011, 10:34 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Oh, what is the other way
  #5  
Old Aug 24, 2011, 11:21 AM
juggledad's Avatar
juggledad
 
22,322 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
background-color: transparent;

Quote:
Oh, what is the other way
beats me, but I'm sure there is another way
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Sep 20, 2011, 03:52 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
I do not get it how can I use: background-color: transparent; in > Header Area > Menu1 > Backgroud Color ? I can only use #xxxxxx code ?
  #7  
Old Sep 20, 2011, 05:31 AM
juggledad's Avatar
juggledad
 
22,322 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
If it won't work there then you'll need to do it in the CSS inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Sep 21, 2011, 02:07 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
So then it will be:

div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
div#menu1 {background-color: transparent;}

?
  #9  
Old Sep 21, 2011, 02:09 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
With:

div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
div#menu1 {background-color: transparent;}
  #10  
Old Sep 21, 2011, 07:12 AM
juggledad's Avatar
juggledad
 
22,322 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
that and you may need to add
HTML Code:
div#menu1 ul.rMenu {
background: transparent;
}
remember to think of HTML elements as layers of paper. The parent layer is at the bottom and the children on top. We look top down. You can decide what each layer's color is so if you have
HTML Code:
<div id="menu1" class="menu-small-menu-container">
</div>
the <div> is the first layer - if you color this blue or use an image , that is what you will see, but what if you add a UL to it so you have
HTML Code:
<div id="menu1" class="menu-small-menu-container">
	<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
	</ul>
</div>
If you add a color or image to the UL, it will cover the DIV's color/image. Then you add an LI
HTML Code:
<div id="menu1" class="menu-small-menu-container">
	<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
		<li id="menu-item-11">
		</li>
	</ul>
</div>
and it's color/image will overlay the UL's (which is overlaying the DIV's). Then you have a <A>
HTML Code:
<div id="menu1" class="menu-small-menu-container">
	<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
		<li id="menu-item-11">
			<a href="mydomain.com/page1">
			</a>
		</li>
	</ul>
</div>
and finally a SPAN
HTML Code:
<div id="menu1" class="menu-small-menu-container">
	<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
		<li id="menu-item-11">
			<a href="mydomain.com/page1">
				<span>HOME</span>
			</a>
		</li>
	</ul>
</div>
both of which can have a color or image so

the SPAN will be the most important
the A comes next
then the LI
then the UL
then the DIV
The amount of space each takes up will also effect what you see.

Hope this helps.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Sep 21, 2011, 07:18 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
div#menu1 ul.rMenu {
background: transparent;
}

Works fine now! Thx a lot I will donate soon again

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Varying how header image/menubar being displayed depends on what page levenssfeer Page & Category Menu Bars 5 Jul 10, 2011 03:49 PM
Set subpage menubar same as parent menubar stef Page & Category Menu Bars 2 Oct 27, 2010 04:37 PM
[SOLVED] Menubar + background color Bela Page & Category Menu Bars 2 Oct 13, 2010 05:58 PM
background image over-sized - Full Page Background Image prokopino Atahualpa 3 Wordpress theme 2 Mar 30, 2010 05:42 AM
Background Changer and Menubar Ddabrai Plugins & Atahualpa 0 Aug 7, 2009 06:02 AM


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


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