Here's some clarification regarding Shareaholic's CSS.
I installed Shareaholic on my
Montezuma test site, and here is what the icons looked like initially:
As you can see, they were very small and illegible.
This is the rule for Shareaholic's icons:
Code:
i.shareaholic-service-icon {
background-image: url("//dsms0mj1bbhn4.cloudfront.net/assets/pub/share-buttons/classic-etc.png");
background-position: 0 0;
background-repeat: no-repeat;
display: block;
position: relative;
width: 40px;
height: 40px;
border-radius: 4px;
}
It's a very general rule that lays out the formatting for Shareaholic icons, which use the HTML italics tag (<i>) to display its icons.
This is the rule for Montezuma's icons:
Code:
.hentry ul li i, .comment-text ul li i {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
margin-left: -20px;
background: transparent url(http://montezuma.inrgee.com/wp-content/themes/montezuma/images/icons.png) -48px -84px no-repeat;
}
Again, this rule is a fairly general rule for icons which are used in a list within the post contents. And Montezuma also uses the HTML italics tag to display icons! Notice that both sets of rules include property values for width and height. For Montezuma, the rule sets the height and width at 12px; for Shareaholic, the icons are set to 40px high and wide.
So that's the crux of the problem: Both the theme and the plugin coincidentally use the italics tag in a somewhat non-standard way for displaying icons, and because Shareahlolic puts its buttons inside a list structure, it's going to match the Montezuma rule. So which rule comes into effect? Because the Montezuma selector of
.hentry ul li i has a
higher specificity than the Shareaholic selector of
i.shareaholic-service-icon (13 vs. 11), the browser will use any properties which are in common from the Montezuma rule. That's why the width & height end up to be 12px square.
So what can be done about it? We can create a rule for the Shareaholic icons that has a selector with an equal or higher specificity than the Montezuma selector, and reset those common properties back to their original values. Here's the original Shareaholic CSS rule that's been slightly modified:
Code:
.shareaholic-canvas i.shareaholic-service-icon {
background-image: url("//dsms0mj1bbhn4.cloudfront.net/assets/pub/share-buttons/classic-etc.png");
background-position: 0 0;
background-repeat: no-repeat;
display: block;
position: relative;
width: 40px;
height: 40px;
border-radius: 4px;
margin: 0px;
}
This rule is basically the same default rule for the Shareaholic icon, but I added the
.shareaholic-canvas class at the front of the selector because the buttons are contained in a <div> with that class. Now the specificity value is 21, which means its properties will override any identical properties that were in the Montezuma rule. I also added the
margin property at the end because the Montezuma rule had also overridden another Shareaholic rule for
.shareaholic-ui i, which sets the margin around the icons to 0.
After adding the new rule to the end of my various.css virtual file, here's how the Shareaholic buttons now look:
You can also see the Shareaholic buttons at the bottom of any post on my test site.
So I hope that clarifies what the problem is between Shareaholic and Montezuma. Shareaholic could have saved a lot of trouble by adding the
.shareaholic-canvas class to the front of its CSS selector in the first place, since I would think that all Shareaholic buttons would be contained in that container. But there was no way for the Shareaholic developers to know that a theme (or even another plugin) would be using the italics tag for displaying icons, and the Montezuma developer could likewise not anticipate that plugin developers would use the italics tag for displaying graphical images. For those who may think that Montezuma is somehow broken and needs to be fixed, you would be equally justified in complaining on the Shareaholic support forum about why their plugin doesn't work with Montezuma when other Social plugins do. It's not a matter of one thing being broken and the other one not, but finding a way to make two pieces that do work, work together.
»
WordPress Themes »
Montezuma Theme »
