Remove "Share this Post" text from Social Buttons

Support
#1

I added this code to my functions.php so that social media buttons would appear on every post on the blog index page.

// Add social sharing buttons to all posts on blog page
function add_excerpt_social_sharing_icons ( $content ) {
echo do_shortcode (’

[x_share title=“Share this Post” facebook=“true” twitter=“true” google_plus=“true” linkedin=“false” pinterest=“true” reddit=“true” email=“true”]
’);
}
add_action(‘x_before_the_excerpt_end’, ‘add_excerpt_social_sharing_icons’);

It works, but I want to remove the text (“Share this post”) that appears above the buttons. I tried removing title=“Share this Post” from the above code, and also tried changing it to title="", but neither worked.

#2

Hello @bluekat,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

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

Thanks.

1 Like
#3

Perfect! Now how do I remove the light gray line that appears above and below the social buttons?

#4

Hi there,

Please try this code:

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

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

1 Like
#5

That worked. And that CSS Selectors guide is EXACTLY what I have been needing. That will help me figure out things on my own so much better!

I tried to use the guide to help me figure out how to remove the margins/padding from the share buttons. I can see that there is a top and bottom margin currently set for 20. But I cant figure out what class to apply it to. In the Inspect it shows

I tried

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

and

.x-share-options {margin: 0;}

but neither worked.

#6

Hi again,

Try this instead:

.x-entry-content p + div {
    margin: 0 !important;
}

Hope this helps!

#7

That did not do anything. Here’s the link and you can see the margin above and below the share buttons. http://www.superpussycat.com/blog/

#8

Hi again,

Thank you for the URL, please replace the previous code with the following one:

.entry-content.excerpt p + div {
    margin: 0 !important;
}

Hope this helps!

#9

That helped but there is still a bottom margin of 16.259 around the .entry-content.excerpt.

#10

Hey there,

Try adding the following code as well:

.blog .entry-wrap {
    padding: 0 30px !important;
}

Hope this helps!

1 Like
#11

Thanks Nabeel! that worked for the bottom margin.

But there is still a large space between the post excerpt and the share buttons which I would like to decrease some.

#12

Hello @bluekat,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS to remove spacing between social icons and excerpt:

.entry-content.excerpt p {
    margin-bottom: 2px;
}

Thanks.

1 Like
#13

Perfect. Thanks!