Customizing social sharing shortcode

Support
#1

I would like to customize the “CUSTOM SOCIALSHARING shortcode to 1) remove the title and space above it so it lies close to my preceding text 2) increase the size of the social icons and 3) decrease the space between icons. Please help:
SHORTCODE: [[share title=”" facebook=“true” twitter=“true” google_plus=“false” linkedin=“true” pinterest=“false” reddit=“false” email=“true”]]
PAGE: https://www.tellasia.org/thank-you/

ALTERNATIVELY, is there a shortcode for the new “SOCIAL” element that is highly customizable? If so just let me know that shortcode with full customization code (I’m sticking this into a text box as you can see on the page, so can’t get at the actual builder, have to customize inside the code)
thank you!

#2

Hi there,

Please add this code in X > Theme Options > CSS:

.x-entry-share p {
    display: none;
}

.x-entry-share .x-share {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.x-entry-share {
    padding: 0;
}

Here are some related links for further reading:

Hope this helps.

#3

Thank you! That got us 90% there… How can i increase the size of the icons?

#4

Hi Leanna,

Thanks for writing in!

You can certainly change the size by increasing the height and width of the icon. Please replace the CSS with this.

.x-entry-share p {
    display: none;
}

.x-entry-share .x-share {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 30px;
}
/* change the value if you want to increase more*/
.x-entry-share {
    padding: 0;
}

Hope this works for you.

Thanks

#5

Perfect thanks! How can i remove the line above and below the icons?

#6

Hello Leanna,

Please update this code:

.x-entry-share {
    padding: 0;
}

to

.x-entry-share {
    padding: 0;
    border: 0;
}

Hope this helps.

1 Like
#7

thank you!

#8

You are most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.