[Plugin: Sociable] How do you resize the images so they are larger?

open sociable.css and try changing the following height and with values to 50px. This is on line 30 of version 3.1.1:

.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

You rock! This worked great and I had no idea to edit the .css file. Thanks a ton and sorry for the delayed response, I was out of town and not online for the most part and so I just discovered your answer.

No worries man… glad I could help.

On a related note – do the replacement images have to be .PNG files or can they be .JPGs

Thank you guys for this post!

I was able to modify my sociable pluggin to put other icons. Here is an example:

https://www.cyberanto.com/articles/cafe-world-from-zynga/

@benjaminjtaylor, I used .png icons, not .jpg. And the background was transparant. I did it all on Photoshop with files that I originally found on the net.

I just changed the size under sociable.css to 50 on height and width, like mfields recommended above, and nothing happened. Why?

Also, I would like to change the buttons to look like they do when hovered over. I.E., I want them brighter. How do I change that?

Thank you!!
Emily
https://www.childperspective.com

@emilyg – I had the same issue (WordPress 2.91, Sociable 3.5.2). I modified the sociable.css to set the size to 50×50 and the icons are still showing at their original size.

Anyone else experiencing this? Any suggestions for a workaround? It would be great if it were possible to specify this information in the WordPress Admin rather than having to modify the CSS file.

@cyberanto – I like the icons you’re using. Would you be willing to share the button artwork…or point us to the place where you found it.

@emilyg and @yogicoach

-you both have uploaded new icons first correct? Over the old icons?

@rvoodoo – Thanks for your reply. I didn’t realize initially that the stock icons are only 16x16px. In any case, changing the size to 50×50 should still have caused the icons to resize (though, they wouldn’t look very good).

I installed some new 32×32 custom icons in a new location, changed sociable.css to reflect the size and pointed Socialite to this directory and was able to get it to work as expected.

@emilyg – I had the same issue (WordPress 2.91, Sociable 3.5.2

I resize some icons and modify the CSS file to 50 and dont work until chose the option: Disable sprite usage for images? Then work perfectly

Thanks for all of the feedback. Unfortunately it seems the other more significant issue at this point is that the Sociable plug-in is not compatible with the Headway theme that I use. When Sociable is activated, my line spacing goes on the fritz. Bummer! Because, I really love the look of Sociable over my current Add to Any plug-in.

I’m trying to get the sociable icons to be centered on my page instead of being left justified. Any ideas on how to do that? The sociable css code is copied below. I’ve tried changing some of the values below from left to centered but it doesn’t seem to work? Thanks for any help!

div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: none;
float:left; /* IE FIX */
display: inline !important;
list-style-type: none;
margin: 0;
padding: 1px;
}

.sociable ul li:before { content: “”; }
.sociable img {
float: center;
width: 19px;
height: 19px;
border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Hi,
I am using WordPress Latest version – 2.9.2 and my sociable icons appear with a strange border around them.
Does anyone know how to fix this?
Here is the code I changed in CSS:
.sociable img ,.sociable a img {
float: none;
width: 32px;
height: 32px;
border: none;
margin: 0;
padding: 0px;
}
It was just to have 32px icons. The rest is just like the original. The icons are showing bigger as suposed but it always have a border. Even when I use the original icons.
If anyone knows why this is happening, please help me, because I don’t understand. Thanks

@nagurski2

try just adding:

.sociable {
     margin: 0 auto;
 }

to your theme’s style.css
(I prefer to add styles like that to my stylesheet rather than the plugins, so the changes don’t get lost when the plugin gets upgraded)

Thanks, I just added some styles for .sociable in my theme’s style. Now is working just fine. It was conflicting with another img style I had for posts.