Excellent, thank you! I’m trying to change the margin of the group of buttons, but I can’t seem to get it to work. I thought
.shareaholic-share-buttons-container ul.shareaholic-share-buttons {
margin: 0 0 0 30px !important;
}
would do it, but I can’t get the margin to be anything other than the default. Any ideas?
If you use Chrome, you can sample-edit the CSS for any page by utilizing the Inspect Element tool (right-click anywhere on a page to access this through the shortcut menu and quickly jump to the HTML that corresponds with the element you clicked to pull up the menu).
This is a great way to directly see how different styles will affect the layout of your page (or the elements contained) before you make any actual changes to your files. I think this will help you with tinkering to get the exact look you wish to achieve. 🙂 Good luck!
Yes, that’s what I did to find the selector I’m trying to change. I’m pretty sure it’s not working because the Shareaholic CSS (which is remotely hosted, so I can’t edit it) has it marked as !important, so my own style is unable to override it.
Try targeting .shareaholic-canvas instead… This will apply the style to all of the apps. If you’d like to only target a specific one, use [data-app-id=”xxx”] instead of .shareaholic-canvas where the x’s are replaced with the app’s unique ID number, which you can find with Inspect Element or through the Edit panel for the app on the Available Apps settings screen.
I want the entire row of buttons, but NOT the entire “widget”, to be indented slightly. You can see in this example post how it looks right now — if I indent the whole thing (.shareaholic-canvas) it indents the “Share This Post” header as well, which is not helpful. The problem is that the arrow on the header is covered up by the buttons, so I just need to move them over slightly. It doesn’t seem practical to have to apply a style to each button individually when there’s a wrapper around the row, I’m just not given the ability to edit it.
The easiest thing would be to modify the image so that nothing needs to be moved, but to do what you require in CSS, just shift the heading to the left and then shift the canvas the same amount to the right.
.shareaholic-share-buttons-container .shareaholic-share-buttons-heading {margin-left:-30px;}
[data-app="share_buttons"] {margin-left:30px;}
Or target specific apps if you only need this style applied to certain share bars.
OK, thanks — don’t know why I didn’t think of that. I did it with
div.shareaholic-canvas {margin-left: 20px;}
.shareaholic-share-buttons-container .shareaholic-share-buttons-heading {margin-left:-20px;}
