Related Content: Customizing Thumbnail Style

Follow

The style of the thumbnails shown as part of the Related Content app can be customized by either using one of our preset themes, or by using some custom CSS.

Customizing Thumbnails with a Default Theme:

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

2.) On the 'Apps' page, in the 'Content Personalization' section, click on Settings next to one of the Related Content app locations.

rcsettingsbutton.png

3.) In the 'Layout' tab of the Related Content Settings window, choose one of our default themes from the Theme dropdown menu. You will see a preview of the theme on the righthand side of the window.

rcthumbnailtheme.png

Using Custom CSS to Customize the Thumbnails:

An example of some CSS code that would change the appearance of the thumbnails is:

Entire Card:

<style type="text/css">
.shareaholic-recommendation {
border-bottom: 3px solid blue;
}
</style>

Thumbnail:

<style type="text/css">
i.shareaholic-image.has-recommendation-image {
border-bottom: 3px solid blue;
}
</style>
Was this article helpful?