Problems with Jetpack/Wordpress Core « Support Forum | Kriesi.at

Support Forum » Abundance

Problems with Jetpack/Wordpress Core

8 posts from 3 voices

Started 1 year ago by hsaleem1
Latest reply from Devin
This topic is not resolved

Tags:

hsaleem1
Member

Hello,

Jetpack adds some nice sharing links to WordPress. However, with Abundance, seems like the icons do no display correctly. The following images describe the problem:

Product Page:

News Article:

Posted 1 year ago #
Devin
Moderator

Hi hsaleem1,

If you could provide a link to the site it would help in possibly providing a fix for the issue. While we can't guarantee that all plugins (even jetpack) will work flawlessly with the theme, if we can provide a fix we will.

Regards,

Devin

Posted 1 year ago #
hsaleem1
Member

I made some CSS tweaks to get the alignment correct. Still, you could observe the issues at the following pages:

http://bombaysupplies.com/shopping-cart-updated-prices/ (Displayed correctly)
http://bombaysupplies.com/shop/wallets/wallet-for-men-2/ (Displayed incorrectly)

I added a couple of CSS modifiers to get the alignment correct, but the FB button still gets messed up. This happens only on product pages, the alignment on news pages is perfect.

Another issue noticed is when the sharing buttons are not under a commone "Share" button. The vertical alignment is messed up, and they dont come under a centrally aligned axis.

Posted 1 year ago #
Devin
Moderator

Hi hsaleem1,

I'm not having any issues with the display of them when I visit the pages now. Glad you were able to fix the alignment issues and feel free to post your additions for anyone who may be trying to use the same plugin and looking for a fix as well.

Regards,

Devin

Posted 1 year ago #
hsaleem1
Member

Somehow, the Facebook icon badge differs between the posts page and the product page.

Posted 1 year ago #
Mya

Hi hsaleem1,

Looks like there's a difference between the CSS for the two buttons. The one button has a background-position applied to it that I believe displays the "f" next to share. I suggest comparing the values in share-button-css then overwriting any settings in your custom.css.

Regards,
Mya

Posted 1 year ago #
hsaleem1
Member

Actually, I checked the CSS code and the CSS classes ".FBConnectButton" and ".FBConnectButton_Small" are responsible for calling an external sprite from the FB server and displaying it in the background. Both of the pages have the exact same code, yet, the display is different. Below is the derived CSS dump:

background-attachment: scroll; background-clip: border-box; background-color: #29447E; background-image: url(http://static.ak.fbcdn.net/images/connect_sprite.png); background-origin: padding-box; background-position: 0% -232px; background-repeat: no-repeat; border-bottom-color: #666; border-bottom-style: none; border-bottom-width: 0px; color: #666; cursor: pointer; display: inline-block; float: none; font-family: 'Expletus Sans', sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: normal; height: auto; line-height: 10px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: #666; outline-style: none; outline-width: 0px; overflow-x: visible; padding-bottom: 0px; padding-left: 1px; padding-right: 0px; padding-top: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; width: auto;

Posted 1 year ago #

Devin
Moderator

Hi hsaleem1,

Try adding this to your custom.css or Quick CSS:

.FBConnectButton .FBConnectButton_Text, .FBConnectButton_RTL .FBConnectButton_Text {
padding: 2px 6px 4px !important;
margin: 1px 1px 0 0 !important;
}

Regards,

Devin

Posted 1 year ago #

RSS feed for this topic