Blog

Customize Your Share Layer in Time for Halloween

One of the great things about Smart Layers is that there are lots of options that’ll let your site’s personality shine through. These examples of additional configurations will allow you to change things like the position of the buttons, which services show up, and even the hover color. Here are some of the styling options for the Share Layer that I frequently see publishers asking about, accompanied with ghouly examples. :)

Show Me The Services!

By default, the services that are displayed within the Share Layer are different for each individual user that visits your site. This is based on the user’s past sharing history, and the services that are most popular. Rather than having the default Preferred Services you can modify your Smart Layers code to choose which services will always appear for your visitors.

Here’s an example of how you could modify your Smart Layers code:

addthis.layers({
   'share' : {
   'services' : 'facebook,twitter,tumblr,pinterest_share,more'
  }
});

Which will show up like this:

But, I Want Them Over There!

Smart Layers also allows you to specify whether you want the share buttons to appear at a fixed position on either the left or right side of your website. To change the position, you would modify your Smart Layers code to look like this:

addthis.layers({
   'share' : {
   'position' : 'left'
  }
});

Although this change made the buttons appear on the left, suppose your Halloween-themed site with a banner that spans across the top. It would be better if you could also move the position down just a bit. That’s why the ‘offset’ option was added. With ‘offset’ you can specify the relative position from the top or bottom of the browser window. Here’s an example of how to add it to your code:

addthis.layers({
   'share' : {
   'position' : 'left',
   'offset' : {'top':'300px'}
  }
});

Turning Into a Pumpkin

Once you have the share buttons in the right spot, you might think to yourself that the hover color would look cooler if it were pumpkin-orange to match your jack o’lanterns rather than the default blue.

To change the color, all you need to do is apply some CSS. Here’s the class selector that’s needed to make that change:

.at-vertical-menu a:hover{
	background-color: #FF9100;
}

The Smart Layers API provides many other configuration options for the share buttons. For example, you can choose whether you want the Layer to appear only on desktops or mobile devices. You can also change the theme, or change the text displayed after sharing a page. If you have any suggestions for additional options that should be included in a future release, we’d be interested in hearing about them!

  • Jay JP

    Nice that we can offset the smart layers, just one thing though, i’m
    useing smart layers for joomla and I can’t find which file i’d have to
    add the offset tag too, can anyone please enlighten me on this? thanks
    ;)

  • Chris

    How does one change the font colour when you hover over the menu? – the default seems to be white which is invisible over a light coloured background.

  • Unfortunately, at the moment, we only support changing the hover color.

  • Matt

    The ‘offset’ option isn’t currently built into the Joomla module. If you want to add this option to your code, you will need to enable the “Custom Code” option, under Module Manager > AddThis Smart Layers > Options tab. Once you have the “Custom Code” option selected, you would need to generate code from our Smart Layers page for “A Website”.

  • Jay JP

    Ok i’m with you so far and managed to add the code created for “A Website” but please can you tell me where would I add the offset code {‘bottom’: ’50px’} for example? and would I include the { }? sorry for the noob question but after trying to add the offset to the code smart layers stopped showing up on my page so I think I must be putting it in the wrong place, any help is much appreciated! Here is my code so far without the offset.

    addthis.layers({
    ‘theme’ : ‘transparent’,
    ‘share’ : {
    ‘position’ : ‘left’,
    ‘numPreferredServices’ : 6
    },
    ‘whatsnext’ : {},
    ‘recommended’ : {}
    });

  • Jay JP

    Can nobody help me with my question below on the code I posted? I asked on the support page but no reply there either unfortunately. I hate to ask here but i’m still struggling with this so any help is much apprectiated, Thank you.

  • Matt

    Here’s an example of your code with adding an offset of bottom: 50px to the share layer.

    addthis.layers({
    ‘theme’ : ‘transparent’,
    ‘share’ : {
    ‘position’ : ‘left’,
    ‘numPreferredServices’ : 6,
    ‘offset’ : {‘bottom’: ’50px’}
    },
    ‘whatsnext’ : {},
    ‘recommended’ : {}
    });

  • Sorry we missed your earlier message, Jay. Matt replied below.

  • Elizabeth Winchenbach

    I really appreciate Add This – I have used it for many years. However, the explanations are not very helpful as you assume I am a full time programmer like you :) I work on my website very rarely and just tried to add the layers – I absolutely need to REMOVE the print option – I am a fine artist – and I need to ADD Pinterest. I have modified the code as suggested, but it doesn’t seem to change a thing – please help! Tell me exactly where to put all the code snippets, etc. I have no idea – and it’s not working. Here is one of my pages with the modified code that doesn’t change anything – http://www.APortraitForYou.com/clients/Base/

  • Hi, we replied to your other message. Don’t hesitate to email us if you have any questions: help@addthis.com

  • Kaia

    Is there a way to do multiple offsets? Such as:

    ‘offset’ : {‘top’ : ’30px’, ‘right’ : 50px;}

    As of right now I’m unable to make that work. (it’s the last line of the script) The follow is in the top right corner of the site.

  • Matt

    Hi Kaia, we currently only support either top or bottom for the ‘offset’ option. If you wanted to move the buttons to the left or right, you could add some CSS.