You can customize the look of the sharing buttons with CSS, by targeting the sharedaddy container and its child elements, like so:
div.sharedaddy .sd-content {
/* Your custom CSS rules */
}
You can add your custom CSS rules to your theme’s stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard.
Hi Jeremy,
I found this code in the jetpack.css file:
‘#sharedaddy.jetpack-module div.module-image {
background-position: -710px 5px;
}’
So I figured the values were the ones I need to change. I took the code you suggested and entered it in Appearance > Theme Options > General > Custom CSS like this:
‘div.sharedaddy .sd-content {background-position: -210px 5 px;
}’
I tried a few different number values, but no visible change. What am I doing wrong? Sorry, I am a kind of a coding newbie…
Appreciate your help!
Regards,
Andrea
The .sd-content container doesn’t have any background, so you won’t see any changes when applying a background rule to that container.
You could align the buttons to the right and the Share text by adding this rule:
div.sharedaddy .sd-content ul li {
float: right;
}
div.sharedaddy h3.sd-title {
text-align: right;
}
You might need to adjust the margin and padding to fit your needs, but that should help.
Hi,
Half way there. The drop-down button moved to the right and is where we want it. Thanks for that!
BUT: Even though the “Share” text did get right-aligned within its little rectangular container (which I see when I inspect the element with Firebug), the whole text container is still stuck to the left side of the page. I tried applying some margin and padding values, but nothing’s moving. I cannot find how to push it to the right closer to the drop-down button. They are now practically on opposite sides of the page. Or, maybe if I knew how to increase the width of the space in which the “Share” text is right-aligned, that could do it…?
Thanks again,
Andrea
Could you post your site URL here? It might be easier to help if I could test things on your site.
Hi Jeremy,
Our site is under construction, but I could email you some screenshots, if you could tell me where to send them.
Thank you,
Andrea
@andreak22 I’m afraid screenshots may not be of much help; I would need to make some tests on your site to be able to help.
If you need more help with customizing the design of your site, you can post in the WordPress job board:
http://jobs.wordpress.net/
Hi Jeremy,
I tried the following code and now everything is moved to the right side, where we need it:
‘body #content div.sharedaddy h3 {
text-align: right;
width: 95%;
}
body div.sharedaddy .sd-content {
width: 4%;
}’
HOWEVER, the design of the footer got a bit messed up (it used to be a section “physically” separated from the main body and you could see the background image showing through). I think this little headache is more for the theme developers than for you, so I contacted them for help. Unless you think otherwise…?
Many thanks for your quick help before!
Have a nice weekend,
Andrea
