Are you wondering, “How do I fix the changes that AddThis made to their/your Smart Layer Buttons?” I have a fix for you.
I have been working on a new web design for my own website and so have been looking at it constantly. Suddenly, what was on my website changed. Frustrating to say the least for someone who designs very specifically, weighing design elements with each other.
Their new buttons are 50% larger and pushed together into one large mass of buttons. It creates a much bolder presence on your website, sticks farther out from the side over your content more than you may have planned and you may not like the change.
They also changed how the buttons move when you hover over them. Personally, I liked the way they moved before. Responses I had from others were, “Wow, that is cool”. Now it is not cool. It blips. Looks sort of broken.
AddThis – please tell your customers that you intend such a change. Send us an email. Give us a chance to adjust and make changed.
Anyways, if you want to get back the look of the earlier buttons, you can add the following code to your website’s CSS file.
If you had the buttons on the left:
div#at4-share {padding-left:10px;}
.atss a {margin-bottom:15px;width:32px;height:32px;padding: 0;}If you had the buttons on the right:
div#at4-share {padding-right:10px;}
.atss a {margin-bottom:15px;width:32px;height:32px;padding: 0;}If you want to increase how far the buttons move when your cursor hovers over them, you can add this to your CSS:
.atss a:hover {width:140px;}
I don’t remember how far out they went.
If you want to make them go farther out or not so far out, just change the number in the above code, ie instead of 140 put 150.
If you want the icons to stay on the right when the color bar moved out on hover, use this:
.atss a:hover span {margin:0 0 0 auto;}
If you want the icons to stay on the left when the color bar moved out on hover, use this:
.atss a:hover span {margin:0 auto 0 0;}
Happy Sharing!
PS. If this helped you, let me know below. If you have other additions to make this helpful, share that as well.
