Posted 5 months ago #
I just installed Sociable today and found answers in these forums to work out all the kinks except the following:
Now all of my icons are working correctly and in the correct order, but have a strange amount of spacing between them.
I believe this may have to do with my usage of the "Sliding Door" theme.
How do I get the icons to appear one after the other, without the space in between?
Posted 5 months ago #
Have you tried setting the sociable settings to use the Sociable stylesheet? It might help your issue. Or look for "img" properties in the Sliding Door theme stylesheet and look for large margins and/or paddings.
~Anthony
Posted 5 months ago #
I tried playing around with the sociable style sheet but was unable to find the area that gets it to do what I wanted.
I'm unfamiliar with coding in general, so its very possible the sociable stylesheet has the capability - I just don't know how to do it =/
Do you know what parameters in the sociable stylesheet account for the spacing?
Thank you for you help, btw!
Your theme's primary stylesheet is overriding sociable's stylesheet. Open up style.css in your theme folder and find this code, which is the culprit:
#content p,
#content .post ul li {
font: normal 13px/20px Verdana, Helvetica, Sans-serif;
margin-bottom: 10px;
margin-top: 10px;
color: #eaeaea;
margin-right: 140px;
text-align: justify;
}This piece of code affects how unordered lists are displayed, and Sociable uses an unordered list to display the social media icons. Notice how it says margin-right: 140px. This is automatically adding a 140 pixel right margin to each list item (icon) in your post content.
Simply commenting out that line of code fixed the icon spacing problem, but I'm not sure if it would affect other parts of your site. You can give it a try (back up style.css if you're worried) and see if it adversely affects any other parts of your site.
An aside:
Just glancing at the code, it appears to me that Sociable's stylesheet *should* take precedence. Yoast uses the !important tag to attempt to do this, but for some reason that doesn't work in this case.
Ok, I've figured it out, and in doing so found the best solution. Open sociable.css and find this code:
.sociable ul li {
background: none;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 1px;
}Change this line: margin: 0;
To this: margin: 0 !important;
This should fix your problem. Let me know if it doesn't work.
Posted 5 months ago #
Asechrest you are my hero.
Posted 5 months ago #
Hi Asechrest,
I also have a spacing problem with my icons. I believe it is because of a div defined for my theme.
So if the sociable code is inserted inside that div, it might result in a spacing problem. How do I fix that?
Where is the sociable code inserted automatically?
The sociable code is automatically inserted after the content of your post. So it will be within whatever divs hold your post content.
Post a link to your site for further assistance.
Posted 5 months ago #
hey I'm trying to fix this on our site too- monetize * media dot com/blog. please advise on what to do...
i tried going to this sociable.css but wasn't sure how to get there... any other ways? i think the theme I'm using is Inove
hey I'm trying to fix this on our site too- monetize * media dot com/blog. please advise on what to do...
i tried going to this sociable.css but wasn't sure how to get there... any other ways? i think the theme I'm using is Inove
Using your FTP program, your WordPress file editor (if using WP2.8), or your server's filesystem (e.g. cPanel, etc.), navigate to /wp-content/plugins/sociable/sociable.css and open or download this file for editing.
Change this code:
.sociable ul li {
background: none;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 1px;
}to this:
.sociable ul li {
background: none;
display: inline !important;
list-style-type: none;
margin: 0 !important;
padding: 1px !important;
}
Posted 5 months ago #
thank you sir!!!
that worked brilliantly : )
You must log in to post.
