Jump to content


Photo
- - - - -

Transparency in banner


  • Please log in to reply
5 replies to this topic

#1 lovethecuban

lovethecuban

    Member

  • Members
  • 18 posts

Posted 08 January 2013 - 11:14 AM

I am trying to create a semi-transparent header (ca 

Please Login or Register to see this Hidden Content

). I've created the image, but now can't set the page or content to any colour without it colouring in the background as well. Can you advise how to make the page white but not the header?

New website is 

Please Login or Register to see this Hidden Content

 

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 January 2013 - 11:51 AM

Hi,

 

What you will need to do is remove the color you have in the Content background option in Color Control. so that your content background becomes transparent.

 

Then you will need to add CSS, to make specific sections have a white background color.

 

As an example, the code below will give the Content Area a background color of white.

 

 

Please Login or Register to see this Hidden Content



#3 lovethecuban

lovethecuban

    Member

  • Members
  • 18 posts

Posted 08 January 2013 - 12:01 PM

Great, thanks. And to extend it over the nav bar? and then, I guess, move the banner down to meet the content/nav?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 January 2013 - 12:07 PM

You will need to add custom CSS for each area you wish to have a white background. I recommend you use Firebug or your browsers web developer tool and inspect the areas you want to add the custom CSS to.



#5 lovethecuban

lovethecuban

    Member

  • Members
  • 18 posts

Posted 08 January 2013 - 07:51 PM

Yes, I've tried that. But the inspect element tool is giving me terms that don't seem to work. I've tried to modify the .nav colour, but it doesn't respond the way the css above does. Can you tell me how to modify this specifically?

 

Re: above. Tweaked, got it to work.

 

Now having trouble with width of branding, can't get the width to change (match up with page width) -

Please Login or Register to see this Hidden Content

Thoughts?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 January 2013 - 12:08 AM

Your image exceeds the maximum width of the site.  In some browsers, images will scale, but not in IE9.

 

So, the simple solution is, look at the width of your layout and find out what that maximum number is (default I think is 1100px). Just resize your branding image to whatever number that is less 50px.  So, if it's 1100px, make the image 1050px wide, using your graphics editor.

 

Upload and replace the larger image.