Jump to content


Photo
- - - - -

content box colour/opacity


  • Please log in to reply
11 replies to this topic

#1 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 01:10 AM

How to give the content box (I only managed to add borders) a background with some, say 50%, opacity? Opacity doesn't seem to work, and when I try to make borders opaque, the whole text becomes opaque too?

Please Login or Register to see this Hidden Content



#2 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 09 February 2011 - 02:11 AM

Opacity hasn't really fully evolved yet, not completely and fully supported by all browsers. You need to use a semi-transparent png graphic of the color you like as the div background. If you don't have Photoshop or another graphics editor you should be able to find a generator or plugin of the sort. Thanks, Bryan

#3 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 11:29 AM

Hi Bryan,

Thanx for reply.

I understand that not all browsers fully support transparency, but I guess the majority of them do.

What did you mean by saying that opacity hasn't fully evolved yet? Did refer to opacity in platformpro or in general?

I was thinking about a transparent box like in

Please Login or Register to see this Hidden Content

, which is done in css, but doesn't seem to work when I incorporate it to platform pro. I guess .pngs would be too much hassle, wouldn't css be a better option? but how.. is the question :)

#4 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 11:30 AM

Please Login or Register to see this Hidden Content



#5 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 09 February 2011 - 02:11 PM

Hey Rafal - Check out this link:

Please Login or Register to see this Hidden Content

Should be able to give you some more insights... Also, personally I don't feel PNGs are too much of a hassle, but that's up to you ;)

#6 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 02:14 PM

Kate, thanks for suggestions. Well, I'd go for pngs too, but that would only give me more work figuring out how to place them on my website :)

#7 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 09 February 2011 - 02:18 PM

We can help you with the placement ;)

#8 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 02:50 PM

Kate, this sounds convincing :) What should I start with?

#9 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 09 February 2011 - 05:25 PM

Rafal, Do you have photoshop? If not it would be hard to create your own transparent image. There is a work around for CSS tranpsarency, but it would require some code changes anyway to reorder some things:

Please Login or Register to see this Hidden Content



#10 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 07:23 PM

Hi Adam, Yes, I do, I have a PS. So I could start from there. But would I need just a slice of a png that would be multiplied or a full image? I'll have a look at the link and I'll see maybe it'll help. Thanx, august

#11 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 09 February 2011 - 07:57 PM

Yeah... just create a small, transparent PNG in the color/opacity you want. Then you can add that as a background to an element. By default, background elements repeat both x and y (side to side, top to bottom). So the one image will fill up the entire element you've specified.

#12 augie_12

augie_12

    Member

  • Members
  • 12 posts

Posted 09 February 2011 - 08:46 PM

My goodness that was easy! Thank you so much guys! Pngs did the trick! ;)I shouldn't have been so skeptical about them ;) Is there a way to reduce the opacity of the border itself, so that it mingles with the background in a less intrusive way? I used this code for the bckgrd and padding: #column-main { border: 1px solid #1D5069; padding-top: 2em; padding-left: 1em; padding-right: 1em; background: URL('http://augie.home.pl/wp-content/themes/platformpro/images/box_trans.png'); } Thanks a lot once again! august