Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #11326

    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:

    23rwple.png

    News Article:

    2innf5.png

    #71396

    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

    #71397

    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.

    #71398

    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

    #71399

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

    #71400

    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

    #71401

    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:

    Code:
    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;

    #71402

    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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Problems with Jetpack/WordPress Core’ is closed to new replies.