How To Add Shareaholic buttons to Montezume?

Yes, we’ll need to see how it looks on the site before we can offer any suggestions. Have you tried using a debug tool like Firebug for Firefox or Developer Tools on Chrome? Those types of tools can help you figure out what CSS is affecting different elements on your page, and can help you test CSS changes in real-time.

The sharing buttons from jetpack didn’t look right either (is that also “shareaholic”, I don’t think so b/c the CSS class it uses is called “sharedaddy”, but perhaps the problem is similar.).

I was able to correct the part that looked ugly by adding some code to the main style.css.

This is what was in the theme’s style.css:

.hentry ul li i, .comment-text ul li i {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
margin-left: -20px;
background: rgba(0, 0, 0, 0) url(https://manualassembly.net/wp-content/themes/montezuma/images/icons.png) -48px -84px no-repeat;
}

This is what I added to the main style.css file (the one you can edit from “Appearance > Edit CSS”:

div.sharedaddy .sd-content li i {
	background-image: none;
}

I used Chrome’s “inspect element” feature to figure out what the problem was and what to change to correct it.

@seanpk, in general, the theme’s files shouldn’t be directly modified. If the theme ever gets updated, then those modifications will be lost. Instead, a child theme should be created or, if the change is to just CSS files, then a stylesheet plugin like Lazyest Stylesheet or Custom CSS Manager should be used if the theme does not support a custom CSS option.

In the case of the Montezuma theme (which the original poster is using), changes to the CSS are done through the theme’s virtual CSS files, the settings of which are stored in a database so that a child theme doesn’t need to be created. The virtual CSS files are used to create the theme’s style.css file, so any direct modification of the style.css file will get overwritten the next time the virtual CSS files are saved.

I got mine to work by adding

div.sharedaddy .sd-content li i {
	width: 40px;
	height: 40px;
	background-image: none;
}

.shareaholic-share-buttons-container.diglett li.shareaholic-share-button a i {
	position: absolute;
	left: 10px;
	top: 10px;
	height: 30px;
	width: 40px;
}

to the CSS Stylesheet Editor at site.com/wp-admin/themes.php?page=editcss

… to the CSS Stylesheet Editor at site.com/wp-admin/themes.php?page=editcss

Yes, that address will work if you have JetPack installed and you’ve activated the JetPack Custom CSS option. If you don’t have JetPack installed, you can also edit one of Montezuma’s virtual CSS files. Most people use the various.css file, since it comes in towards the end after most of the other virtual CSS files.

Great news! We just released a CSS update that should make our share buttons show up correctly in Montezuma (if it’s not showing up for you, try clearing your browser cache)

The problem was that the theme was overriding our styles and therefore we had to add more specificity and !important a few things. If there’s anything else we can help you with, please check out Shareaholic Helpdesk

Thanks, Andy, that will be a big help to Montezuma’s users!