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 »

[SOLVED] Background image in menubar


  #1  
Old Aug 24, 2011, 08: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, 09:25 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 09: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, 09: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, 10:21 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 02: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, 04:31 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 01: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, 01: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, 06:12 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 06: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 02:49 PM
Set subpage menubar same as parent menubar stef Page & Category Menu Bars 2 Oct 27, 2010 03:37 PM
[SOLVED] Menubar + background color Bela Page & Category Menu Bars 2 Oct 13, 2010 04:58 PM
background image over-sized - Full Page Background Image prokopino Atahualpa 3 Wordpress theme 2 Mar 30, 2010 04:42 AM
Background Changer and Menubar Ddabrai Plugins & Atahualpa 0 Aug 7, 2009 05:02 AM


All times are GMT -6. The time now is 01:15 PM.


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