[SOLVED] Changing page menu background to transparent...

ARealpolitik · #1 Oct 12, 2011, 01:05 PM

Ata 3.5.1

I have wrestled with this before but was not successful. Tried everything based on what I have read here. What am I doing wrong?

http://www.theblogfarm.com/

I currently have the below in HTML/CSSInserts

div#menu1 ul.rMenu { background: transparent !important; }
div#bfa_page_menu, div#menu1 { background: transparent !important; }

I do have it placed in CSS Inserts. Is this wrong spot?

I see I could/should have posted this in the Gold Forum... oh well.

juggledad · #2 Oct 12, 2011, 01:45 PM

where did you come up with the ID of 'bfa_page_menu'?

you need to set

HTML Code:

div#menu1 ul.rMenu li {
    background-color: transparent;
}

and

HTML Code:

div#menu1 ul.rMenu li.current_page_item a:link, 
div#menu1 ul.rMenu li.current_page_item a:active, 
div#menu1 ul.rMenu li.current_page_item a:hover, 
div#menu1 ul.rMenu li.current_page_item a:visited, 
div#menu1 ul.rMenu li a:hover {
    background-color: transparent;
}

ARealpolitik · #3 Oct 12, 2011, 02:01 PM

lol, from some page on this forum. I think I quit at that point...

Okay, will gladly try it but having a senior moment. Place in Inserts or edit code?

juggledad · #4 Oct 12, 2011, 02:03 PM

put it in CSS Inserts

ARealpolitik · #5 Oct 12, 2011, 02:09 PM

tried it, didn't work. Should I remove the current color setting in ata>page menu bar?

Never mind, that didn't work either...

This is what is in CSS Inserts:

h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
h2 { font-size: 28px; line-height: 1.3; margin: 1em 0 .2em; }
h3 { font-size: 24px; line-height: 1.3; margin: 1em 0 .2em; }
h4 { font-size: 19px; margin: 1.33em 0 .2em; }
h5 { font-size: 1.3em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 1.15em; margin: 1.67em 0; font-weight: bold; }

div#menu1 ul.rMenu li {
background-color: transparent;
}
div#menu1 ul.rMenu li.current_page_item a:link,
div#menu1 ul.rMenu li.current_page_item a:active,
div#menu1 ul.rMenu li.current_page_item a:hover,
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background-color: transparent;
}

juggledad · #6 Oct 12, 2011, 02:23 PM

oops, you also need

HTML Code:

div#menu1 ul.rMenu {
    background-color: transparent;
}

color is set at the <ul>, the <li> and the <a>

btw: this will make the hovers and active transparent also. If you want one of them set, remove the linee associated with it

ARealpolitik · #7 Oct 12, 2011, 02:32 PM

It appears to be working but my eyes are so bad and the colors so close I cant tell. It looks like maybe just the borders still have color. Let me know what it looks like on your screen.

http://www.theblogfarm.com/

Got it, could change the border to transparent on the page menu bar... thanks.

ARealpolitik · #8 Oct 12, 2011, 03:10 PM

Hate to show my ignorance but when I hover over the link the background color shows. Tried a couple things but did not work.

Help!

I do have the:

div#menu1 ul.rMenu li a:hover {
background-color: transparent;

juggledad · #9 Oct 12, 2011, 03:38 PM

add in

HTML Code:

div#menu1 ul.rMenu li:hover,div#menu1 ul.rMenu li.sfhover {
background:transparent;
}

ARealpolitik · #10 Oct 12, 2011, 05:30 PM

That did it... Fantastic, I would never have figured that out. You are a genius, or damn close.

Thanks