Customize the Headline Image of your Share Buttons

Follow

If you'd like to customize the "Sharing is Caring" (or other) Headline image with your own custom image, you can replace one of the default Headline images with your image by including some custom CSS in your site's CSS stylesheet.

 

How to add your custom headline image to Shareaholic Share Buttons

1) Add the following CSS code to your site's template or CSS stylesheet:

.shareaholic-share-buttons-heading { 
     background: url('http://dsms0mj1bbhn4.cloudfront.net/assets/pub/share-buttons/share-headers-new/sharing-caring.png') 0 0 no-repeat;
     height: 65px;
     margin-bottom: -15px !important;
}
.shareaholic-share-buttons-heading-image { display: none; }

WordPress Users: To find the correct place to insert this CSS code, go to Appearance then Themes from your WordPress Admin Dashboard. Then, click on the Customize button for your current theme. This will bring up a different 'Customize' view.

1) From the toolbar on the left, select the "Additional CSS" section at the bottom. Paste the above code into this box.

2) Replace the URL in the example above with the URL of your custom headline image path and adjust the height and margin-bottom property values to meet your needs.

This will apply to all Share Buttons apps where a Headline image has been selected in your Share Button settings. Remember to empty all caches in any caching plugins along with your browser's cache after applying the custom style to see the changes take affect on your site.

 

If you'd prefer to use JavaScript instead of CSS:

 var changeImage = setInterval(function(){ if(jQuery && jQuery('.shareaholic-share-buttons-heading-image').length) { jQuery('.shareaholic-share-buttons-heading-image').attr('src', 'image source url here'); clearInterval(changeImage); } }, 50);

Not quite what you're looking for?

Get Help
Have more questions? Submit a request
Powered by Zendesk