Jump to content


Photo
- - - - -

Transparent background for the sidebars and the main column?


  • Please log in to reply
6 replies to this topic

#1 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 05 December 2011 - 03:33 PM

Hi,

I wish to make a mostly transparent background for the sidebars and the main column. I used the code below but it makes the text and any content transparent as well. Is there a way to do this without messing with the content itself?

Thanks!

Please Login or Register to see this Hidden Content



#2 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 05 December 2011 - 03:34 PM

I am guessing I may be choosing the wrong IDs?

#3 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 05 December 2011 - 11:07 PM

Could we see a link to your site?

The classes you used are used on different elements throughout the site, it would be better to use ID's which are unique to a given page.

If you get Google Chrome you can right-click and inspect any element. If the element looks like this for example:

Please Login or Register to see this Hidden Content

Use the id, not the classses and you will know you are only targeting that element. It looks like this in the CSS:

Please Login or Register to see this Hidden Content



#4 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 06 December 2011 - 07:40 PM

Kastelic,

First Thanks.
I meant to say classes when I said IDs. I've been picking classes because in this case the IDs don't make sense to me. For example, I am trying to change 2 text widgets, an rss widget, and the content column in the middle. I want just the grey color i'm putting behind them to have opacity but it does it to the text. Their ID is under "text-16". The reason I didn't use "text-16" is it sounds like a specific widget. So I guess I was supposed to go up higher to "list_sidebar_primary" and so on?. How do I know to go up besides trying?

I did try the ID instead of the class but it still changes the text as well. I might add I want this to apply to the background of any future widget added to the sides.

Thanks again.

Posted Image

#5 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 06 December 2011 - 07:41 PM

Please Login or Register to see this Hidden Content



#6 Danny

Danny

    Is Awesome!

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

Posted 06 December 2011 - 08:16 PM

Hi Ryan,

Have a play with the code below:

Please Login or Register to see this Hidden Content


Change the 0.01 to anything higher like 0.02 or 0.03 and it will get darked. I have also posted you a link to an article that talks about this subject.

Please Login or Register to see this Hidden Content



#7 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 12 December 2011 - 07:08 PM

I found that all this works except for IE you need to use this: /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70dedede, endColorstr=#70dedede); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#70dedede, endColorstr=#70dedede)"; of #70dedede 70 seems to equal 70% and then a color Also, Someone else posted if what you're applying this stuff to seems to disappear make it's "position relative".