Jump to content


Photo
- - - - -

Maintain branding opacity whilst making background transparent - nearly there!


  • Please log in to reply
7 replies to this topic

#1 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 19 January 2012 - 01:28 PM

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:

Please Login or Register to see this Hidden Content



This is the CSS I am using:

Please Login or Register to see this Hidden Content


All and any advise very welcome - Thanks
--
Fintan

#2 Jackey

Jackey

    Advocate

  • Members


  • 683 posts
  • LocationHelmond
  • Country: Country Flag

Posted 19 January 2012 - 03:49 PM

I advise to not make the complete #header transparent but only the background.

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content


Should work... give it a try!

#3 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 19 January 2012 - 04:16 PM

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

#4 Jackey

Jackey

    Advocate

  • Members


  • 683 posts
  • LocationHelmond
  • Country: Country Flag

Posted 19 January 2012 - 04:46 PM

Please Login or Register to see this Hidden Content


Should get your logo to full opacity

#5 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 19 January 2012 - 05:22 PM

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

#6 Jackey

Jackey

    Advocate

  • Members


  • 683 posts
  • LocationHelmond
  • Country: Country Flag

Posted 19 January 2012 - 06:03 PM

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:

Please Login or Register to see this Hidden Content


(Remove the old stuff regarding this)

#7 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 19 January 2012 - 06:05 PM

Let us know how Jackey's solution works for you!

#8 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 19 January 2012 - 07:19 PM

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