• 0
Sign in to follow this  
Followers 0

Transparent background for the sidebars and the main column?

Question

Posted · Report post

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!

	.widget-pad, .mcolumn-pad{
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: #f7f7f7;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #e6e6e6;
	border-right-color: #e6e6e6;
	border-bottom-color: #e6e6e6;
	border-left-color: #e6e6e6;
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

I am guessing I may be choosing the wrong IDs?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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: [code]
[/code] Use the id, not the classses and you will know you are only targeting that element. It looks like this in the CSS: [code]#the-header{ background: black; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. [img]http://i.imgur.com/VCKnd.png[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

http://wppl.ryanjohnjackson.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Ryan, Have a play with the code below: [code] .widget-pad { background-color: rgba(0, 0, 0, 0.01); } .mcolumn-pad { background-color: rgba(0, 0, 0, 0.01); } [/code] 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. http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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".

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  
Followers 0