Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Shareholic doesn't work with this theme


  #1  
Old Nov 8, 2013, 05:44 AM
truelight
 
10 posts · Nov 2013
I just try shareholic plugin, but it doesn't appear with the full size icon share, just 1/3, Is there any way to fix it?

I change to another and it become normal again with a full size icon, so that I think the problem is about this theme, can we fix it ?
  #2  
Old Nov 8, 2013, 07:41 AM
juggledad's Avatar
juggledad
 
23,575 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the url pointing to the issue?
Quote:
I change to another and it become normal again
'another' what? theme? plugin? host? site?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 8, 2013, 08:38 AM
truelight
 
10 posts · Nov 2013
sr, I forgot : http://quotesaboutbeinghappy.us/prim...happy-couples/

I change to another theme and it normal again, but with monte zuma it just appear 1/3 the icon , you can see the list icon share below :" sharing is caring "
  #4  
Old Nov 8, 2013, 10:46 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
The problem is not really with Montezuma. The problem is that Shareaholic doesn't make its CSS specific enough, so their CSS clashes with Montezuma's CSS. It's been covered in this thread as well as this thread. Both Montezuma and Shareaholic use the italics tag (<i>) for their icons. The reason why you don't see the problem with other social plugins is that they probably don't use the italics tag for their icons, or their CSS is more specific. And you don't see the problem with other themes because other themes probably don't use the italics tag for displaying icons. Is Montezuma wrong for using the italics tag in a non-standard way? I don't think you can say that, because Shareaholic is using it in the exact same way, and that's where the problem occurs.

In my opinion, it's up to plugin developers to make their CSS as specific as possible, because 1) theme developers should make their CSS simple enough for others (web developers and plugin developers) to override/customize, and 2) theme developers can't anticipate all the different ways that a plugin developer may use a particular element. All Shareaholic had to do was include the Shareaholic classes in it's CSS selectors and there wouldn't be a problem with any theme (or any other plugin), but instead they made their selectors too general.

[Edited]: I tried to look at your site to see if I could give you some CSS to fix your problem, but for some reason I keep having problems loading it.

[Edit2]: @truelight, I was able to finally access your site. If you follow what I did in my next post below and copy the new CSS rule to the bottom of your various.css virtual CSS file, that should fix your Shareaholic problem as well, even though you are using a different button layout than I am.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Nov 8, 2013 at 05:52 PM. Reason: Added instruction for truelight.
  #5  
Old Nov 8, 2013, 12:40 PM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Nov 8, 2013 at 09:46 PM.
  #6  
Old Nov 9, 2013, 06:14 AM
truelight
 
10 posts · Nov 2013
Dear, there was some problem after I add the code to my various.css. I attached the image, The icon don't change to normal
Attached Thumbnails
Click image for larger version

Name:	345345.png
Views:	365
Size:	225.9 KB
ID:	2438  
  #7  
Old Nov 9, 2013, 09:42 AM
juggledad's Avatar
juggledad
 
23,575 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you forget to press 'SAVE' beczause that CSS is not in your css file
HTML Code:
	margin-bottom:			0;
}
.credit-link a {
	color:					#aaaaaa;
	font-weight:			bold;
	text-decoration: 		none;
}

  <<<<<<<=======missing

.sub-menu:before, .sub-menu:after,
.cf:before, .cf:after,
.row:before, .row:after,
.row20:before, .row20:after,
.row:before, .row:after,
.row:before, .row:after,
.row:before, .row:after,
.lw:before, .lw:after {
  	content: "."; 
  	display: block; 
  	height: 0; 
  	clear: both; 
  	visibility: hidden;
	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Nov 9, 2013, 09:46 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
Did you remember to click the Save Changes button? Because when I look at your CSS, I don't see the new rule in there.

[edited]: Oops, Juggledad beat me to it.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #9  
Old Nov 10, 2013, 12:16 AM
truelight
 
10 posts · Nov 2013
I'm so sorry , I forgot to click save, thank you everyone, I worked , I'm really like it

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Has anyone got the Bug Library plugin to work with this theme? IZZO Montezuma Theme 4 Dec 2, 2012 03:46 PM
How can I work on new theme / not messing up current theme? RedCairo New Versions, & Updating 4 Jun 6, 2012 02:53 PM
Will Atahualpa Theme work for this design I have? Lash Atahualpa 3 Wordpress theme 1 Dec 3, 2011 06:33 AM
No theme changes work glennvogelsang Header configuration & styling 0 Feb 2, 2011 02:55 PM


All times are GMT -6. The time now is 05:25 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.