Jump to content
Sign in to follow this  
ryanjohnjackson

Transparent background for the sidebars and the main column?

Recommended Posts

ryanjohnjackson    0
ryanjohnjackson

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
ryanjohnjackson    0
ryanjohnjackson
I am guessing I may be choosing the wrong IDs?

Share this post


Link to post
Share on other sites
kastelic    6
kastelic
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
ryanjohnjackson    0
ryanjohnjackson
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
ryanjohnjackson    0
ryanjohnjackson
http://wppl.ryanjohnjackson.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ryanjohnjackson    0
ryanjohnjackson
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  

×