Jump to content
Sign in to follow this  
fintan

Maintain branding opacity whilst making background transparent - nearly there!

Recommended Posts

fintan+    1
fintan

Hi All I'm trying to make the background of my site header transparent, which I've done. But the CSS i've used has some unwanted side effects: My logo has gone transparent My social icons are transparent My Nav is tranparent and the drop down has dissappeared Here's a link: http://keoghpublicity.com/about-us/ This is the CSS I am using:

#header {opacity:0.8;filter:alpha(opacity=80)}

All and any advise very welcome - Thanks -- Fintan

Share this post


Link to post
Share on other sites
Jackey    29
Jackey
I advise to not make the complete #header transparent but only the background. [code]section#branding div.content, section#nav div.content { background-color: transparent; }[/code] [code]section#nav div.texture, section#branding div.texture { background-color:white; opacity:0.8; filter:alpha(opacity=80); }[/code] Should work... give it a try!

Share this post


Link to post
Share on other sites
fintan+    1
fintan
Thanks Jackey Got my nav dropdown back :) but otherwise all still the same, although I'm starting to like the see through nav. If I could just get the logo back to full opacity I think I'd be happy to go with that. Thanks again for your time and help I really appreciate it. -- Fintan

Share this post


Link to post
Share on other sites
Jackey    29
Jackey
[code]#branding .mainlogo-img { opacity:1.0 !important; filter:alpha(opacity=100) !important; /* For IE8 and earlier */ }[/code] Should get your logo to full opacity

Share this post


Link to post
Share on other sites
fintan+    1
fintan
Thanks agian Jackey, still no joy though. Its strange 'cos if I use just #branding div.content, #nav div.content { background-color: transparent; } I get logos etc in 100% opacity with a transparent background, but tweeking it, adding color etc. doesn't seem to work. So when all 3 (as you give above) are used and I use Firebug to tweek the opacity, I can get the logo lighter with e.g. 0.3 but I can't go the other way and opacity: 1.0 just resolves at 0.8? Confused? Anyhoo thanks again - appreciate your time and effort. -- Fintan

Share this post


Link to post
Share on other sites
Jackey    29
Jackey
OK I don't give that easy... Another approach... Create a filler-80.png file with a 80% white color and place it in your /wp-content/uploads/ folder. Add this code: [code]section#branding div.content, section#nav div.content { background-color: transparent; } section#nav div.texture, section#branding div.texture { background: transparent url("/wp-content/uploads/filler-80.png") repeat; }[/code] (Remove the old stuff regarding this)

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
Let us know how Jackey's solution works for you!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
fintan+    1
fintan
Ah Haaaaaaaaa Kudos my friend, the power of lateral thought. IMPRESSIVE Worked perfectly, looks great, many thanks for the help, your persistance is really appreciated. Thanks -- Fintan

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  

×