Jump to content
Sign in to follow this  
dagreat8

Transparent Branding Section

Recommended Posts

dagreat8

I know this is a dead horse but I have tried everything in forums to make my branding section transparent and nothing works. It seems as though the branding section inherits the background color of the page. Please help thanks.

Share this post


Link to post
Share on other sites
WebWerx
@dagreat8: #branding .mainlogo-link, #branding .mainlogo-img ? Try replacing the BG color with an image and then set the opacity: http://www.w3schools.com/css/css_image_transparency.asp Get it? Don't think you can set opacity with a color. But you can with an image. ;-)

Share this post


Link to post
Share on other sites
dagreat8
Yea I know what you mean...I tried it but didn't work. It seems like the white color that is showing is part of the #page selector? Technically my branding section is transparent but it is showing through to the bottom layer of white...its driving me nuts.

Share this post


Link to post
Share on other sites
WebWerx
So you disabled the color selector completely?

Share this post


Link to post
Share on other sites
WebWerx
So dump the color and replace it with a BG. See if it works first. Then set the opacity. If it doesn't work, then look for something that is over riding it.

Share this post


Link to post
Share on other sites
dagreat8
no what I mean is no matter what I do to the top "selectable" layer ie #branding .mainlogo-link, #branding .mainlogo-img it has no affect unless I add a color or image then it covers the white below it. But if I decrease opacity or make it transparent then the white layer beneath it shows. This white layer is the #page I think...so id I make that transparent, it makes my whole site transparent.

Share this post


Link to post
Share on other sites
WebWerx
@rangealone & @simplemama: What did I miss here?

Share this post


Link to post
Share on other sites
dagreat8
OK I found a workaround but this is not the solution...this is sloppy code. I would appreciate help on doing this the right way. I basically made the whole page body transparent and then simply added a white background to the the content section only. Here are the two pieces of code I added: [code] #content .content-pad {background-color: white;} body #page {background-color: transparent;}[/code]

Share this post


Link to post
Share on other sites
batman
I've tried with: # branding. content {background-color: transparent! important;} I do not know if the correct code but for me it worked perfect. I hope it helps to you.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
catrina
A little correction in batman's solution: [code]#branding .content {background-color: transparent! important;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
batman
Thanks for the correction catrina [img]http://foro-mac.com.ar/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif[/img]

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob
Actually, if you know the element (using Firebug or Chrome's Element Inspection Tools), you can apply a transparency to a color as I did with this: [code].content .content-pad { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.30); }[/code] In that case, I applied a 30% transparency (0.30) to a white background (255,255,255) in the Content Pad (.content .content-pad). If you applied it to other sections, it should work, and customize to the color needed using RGBA decimal color codes. See: http://www.december.com/html/spec/colorrgbadec.html Added to Custom Code, it would apply site-wide or, if you wish, you can apply it to a particular page (if added to the element). Sorry guys, images are not the only thing you can make transparent.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx
@rangelone: Old Dog teaching old dog new tricks. Thanks for the "transparency tutelage"

Share this post


Link to post
Share on other sites
Danny
For more information on RBGa, please read through this guide! http://css-tricks.com/rgba-browser-support/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob
@webwerx, You don't get to be an old dog without learning a few tricks and teaching them to others along the way!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
WebWerx
@rangelone: Arooooo!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×