Using CSS To Use A Custom ShareThis Icon Or Image

It’s pretty annoying how little instruction there is to change the ShareThis icon to something else. So I took a stab at finding my own solution without needing to modify javascript code or API calls. Frankly, the freshest information about it was 2 years old. And very paltry and not very helpful.

The issue is that when you get the share widget from the ShareThis website, there are only a couple options for the styling of the button. And the javascript code that you get does not have an image URL in it that you could easily modify to your own image. I even tried copying the javascript that loads from the ShareThis site and loading it from my own site, with modifications. But that didn’t work. What I wanted was a large icon that when moused over would show the sharethis dropdown of all the social sharing options. However, there is no large icon option. Just a few different small icon options that were not going to match my client website icons. So, time to make it my way.

The image was going to appear in a group of icons for navigation. The sharethis icon needed to fit right into the middle of them. Since I was already using some hover css that I’m fond of using for icons like this, avoiding having to use jquery and for that, maybe making the site somewhat more accessible, I went ahead with that. I do this with an object tag to wrap a div inside a link tag, so it will validate.

Then all I did was create another div inside that one, to insert the sharethis javascript code. The HTML for the list menu item down to the javascript looked like this:

<li>
<a href="http://example.com/about">
<object>
<div class="menu-share">
---share this javascript goes here---
</div>
</object>
</a>
</li>


So there are the .menu-share div to show the button, as well as help me hide the image that sharethis will load, without hiding the functionality. All that’s left is the .css:

.menu-share {
background: url('images/share-icon.png') no-repeat 0 top;
height: 56px;
width: 57px;
float: left;
margin: 0 20px;
}
.menu-share:hover {
background-position: 0 -57px;
cursor: pointer;
}
.menu-share img {
display: none;
}


The last little bit just hides any image inside the div. It does not hide the background image, only images that load inside the div. However, all the javascript is still fully functional, loading the social media dropdown as it should.

About the Author

Tim Norton started designing websites in his free time in 2005 and it soon became a major source of income for his family. He taught himself coding, graphics, and whatever else relates to designing great websites. Get in touch at 6Webdesign.