WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. marcdsmalley
    Member
    Posted 5 years ago #

    I changed the main sociable images that I use to be 50x50, but they still come up at 16x16. I can't seem to find where to change the size settings to the sociable plugin so that my images are bigger.

    I've uploaded the new images with the exact same names as the sociable ones, but they still don't come up 50x50.

    Any help would be greatly appreciated.

  2. Michael Fields
    Themer
    Posted 5 years ago #

    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;
    }
  3. marcdsmalley
    Member
    Posted 5 years ago #

    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.

  4. Michael Fields
    Themer
    Posted 5 years ago #

    No worries man... glad I could help.

  5. benjaminjtaylor
    Member
    Posted 4 years ago #

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

  6. cyberanto
    Member
    Posted 4 years ago #

    Thank you guys for this post!

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

    http://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.

  7. EmilyG
    Member
    Posted 4 years ago #

    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
    http://www.childperspective.com

  8. yogicoach
    Member
    Posted 4 years ago #

    @EmilyG - I had the same issue (WordPress 2.91, Sociable 3.5.2). I modified the sociable.css to set the size to 50x50 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.

  9. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    @EmilyG and @yogicoach

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

  10. yogicoach
    Member
    Posted 4 years ago #

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

    I installed some new 32x32 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.

  11. joaquinhc
    Member
    Posted 4 years ago #

    @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

  12. EmilyG
    Member
    Posted 4 years ago #

    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.

  13. nagurski2
    Member
    Posted 4 years ago #

    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);
    }

  14. magaworks
    Member
    Posted 4 years ago #

    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

  15. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    @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)

  16. magaworks
    Member
    Posted 4 years ago #

    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.

  17. racheldubois
    Member
    Posted 4 years ago #

    I'm still not getting it to work. To recap what I've done:

    1) uploaded a folder with 64x64 icons with the same names of individual icons (facebook.png, etc)

    2) inserted the URL of that folder into the Sociable Settings page under "Image Directory"

    3) Ticked the "Disable sprite usage" box just in case

    4) Changed the CSS Sociable file so that it says
    .sociable img {
    float: none;
    width: 64px;
    height: 64px;
    border: 0;
    margin: 0;
    padding: 0;
    }

    Still not working. Just showing text links:
    http://www.allfivesenses.com/power-off-weekend-diary/#comments

    What am I doing wrong??

  18. starbug72
    Member
    Posted 4 years ago #

    @mfields thanks for the tip. I changed the size in the CSS file but could only get it to 22 before the images were too grainy.

    @cyberanto curious where you found the icons? I really like those, though I'd rather have them in color.

  19. starbug72
    Member
    Posted 4 years ago #

    OK, answered my own question! Strangely enough there are a few 50px icons on the Blogplay.com homepage. Found a few other just with a google search.

  20. dontaylor
    Member
    Posted 4 years ago #

    After reading all of your helpful posts, I went searching for a good source of replacement icons. Here is a doozy:

    http://tinyurl.com/yexg5pq

    -Don

  21. jmklein
    Member
    Posted 4 years ago #

    I did all the same things as Rachel above and all I am getting is the links as well. So far, not too impressed with this plugin. I am going to rip it out and use sexy bookmarks. This is too much hassle for decent size icons that should come with the plugin.

  22. jmklein
    Member
    Posted 4 years ago #

    Perhaps I was too hasty in my comments above. With some fiddling I got it to work. For me it only worked if I replaced the images with the new ones by overwriting the ones in the old directory. Creating a new directory is too fiddly. I appreciate the free plugin, but believe it would be much better with larger icons as the default. It is working pretty well on all other accounts.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags