Customize the Headline Image of your Share Buttons

Follow

If you'd like to customize the "Sharing is Caring" Headline image, you can either choose from one of our preset choices, or use custom CSS to replace one of the default Headline images with your own image.

To Select a Preset Headline Image:

1). Login to Shareaholic.com and select your site from the My Sites dropdown menu at the top of the page.

2). From the Apps page, scroll down to the Share Buttons box in the 'Social Settings' section and find the entry for the Share Buttons you wish to edit. Then, click on the settings button to access its settings.

share-settings.png

3). In the Layout tab of the Share Button Settings window, choose from our default headlines by using the Headline dropdown menu.

 

 

To Add Your Own Custom Headline Image:

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 bolded 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.

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. Finally, from the toolbar on the left, select the "Additional CSS" section at the bottom. Paste the above code into this box, replacing the bolded URL with the URL of your custom headline image path.

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);
Was this article helpful?