[Plugin: Sociable] How do I turn off opaque icons to display full color

Do you mean the semi-transparent icons that become opaque when you hover over them? That is the default sociable style.

You can override this in the sociable.css stylesheet, but the better option is to override the sociable styles with your site’s stylesheet so that your changes will persist after upgrades.

Try adding this to your site’s stylesheet:

.sociable-hovers {
	opacity: 1.0;
	-moz-opacity: 1.0;
	filter: alpha(opacity=100);
}

Hope that helps!

— jm

Hi Jm

Thanks for your input.

I tried your suggestion and for some reason it didn’t work.

Would you happen to know what code in the sociable.css I need to change. I don’t mind having to alter it repeatedly… just as long as I know what to change.

Julia

Oops, sorry about that. I guess the sociable stylesheet loads after yours does. Two options: either edit the sociable.css stylesheet directly (same code as above) or add the “!important” flag after those changes in your site’s stylesheet. I just tried the second method and it worked, so give that a shot first:

.sociable-hovers {
	opacity: 1.0 !important;
	-moz-opacity: 1.0 !important;
	filter: alpha(opacity=100) !important;
}

Just remove the sections .sociable-hovers and .sociable-hovers:hover from your sociable.css

Woohoo, victory!

Thanks JM… high 5 mate ?? You’re a star ??

Now all I have to do is actually switch the images over to the larger ones and that’s easy (instructions being in the plugin itself).