Customize the Headline Image of your Share Buttons

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

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

Comments

Powered by Zendesk