[fmbmParticipant]

hey guys, I did some customization to the social share buttons but for the life of me I can’t figure out how to get two little things right with it. How can I remove the hover background color and the text hover over that says “share with [social network]”?

[fmbmParticipant]

I’ve tried ‘.share’ ‘.x-share’ ‘.x-entry-share’ ‘.x-share-options’ and a few others but can’t seem to figure it out.

[Prasant RaiModerator]

Hey There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[fmbmParticipant]

This reply has been marked as private.

[fmbmParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the WP access info!

To resolve your issue with the background color of the social share buttons, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-entry-share .x-share:hover {
    background-color: transparent;
}

The code removes the background color. You might also need to adjust the height of the buttons because right now it looks like it is being cut off. Adding the code below will fix the buttons from being cut off.

.x-entry-share .x-share i[class*="x-icon"] {
    height: auto !important;
}

Please let us know if this has been helpful to you.

Cheers,
X

[fmbmParticipant]

worked perfect – thanks!

[Rue NelModerator]

You are most welcome! Glad it worked out for you 😉

[fernandocd79Participant]

Hi there,

I’m working on my site http://www.es-cuela.com

How can I make the social sharing buttons bigger? and how can I change the colors to match my site color style #0e032f and #26B295

One more question regarding social buttons, could I use the same social sharing buttons design/appearance in another section of the site but this time with a different behavior: just to link to my social sities (not for sharing the post/page)?

Thanks for your support

Fernando

[RadModerator]

Hi there,

Please add this CSS as well,

.x-entry-share .x-share {
    background-color: #26B295;
}

About the last question, sure, add this content to pages you wish to have the social linking instead of sharing.

<div class="x-share-options">
<a href="#share" class="x-share" title=""><i class="x-icon-facebook-square" data-x-icon=""></i></a>
<a href="#share" class="x-share" title=""><i class="x-icon-twitter-square" data-x-icon=""></i></a>
<a href="#share" class="x-share" title=""><i class="x-icon-google-plus-square" data-x-icon=""></i></a>
<a href="#share" class="x-share" title=""><i class="x-icon-linkedin-square" data-x-icon=""></i></a>
<a href="mailto:?subject=Home&body=Hey, thought you might enjoy this! Check it out when you have a chance: http://www.es-cuela.com/" class="x-share email" title=""><span><i class="x-icon-envelope-square" data-x-icon=""></i></span></a></div>

Just change the href’s URL to your social URL.

Cheers!

[fernandocd79Participant]

Hi guys,

Thanks for the code. I have the feeling that some post post has been lost.

– How can I make the social sharing buttons bigger (including icons and surrounding circle)?

The new code you sent to me (<div class=”x-share-options”> <a href=”#share” ……) only displays the icons and the link. Is there away the get the same appearance as the social sharing buttons (circle and icon)?

Thanks in advance

Fernando

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-share-options i {
    font-size: 50px;
    margin-top: 25%;}

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

Hope this helps – thanks!

[fernandocd79Participant]

Hi there,

Thanks. I’m getting there.

How can I add the circles around the icons (top right of the screenshot) in the same way they appear the the social sharing buttons (bottom of the screenshot)

Thanks in advance

Fernando

[RupokMember]

Hi Fernando,

Thanks for updating.
You can add this under Custom > CSS in the Customizer.

.x-share-options a.darkblueiconcolor {
  background: #fff;
  border-radius: 50%;
  padding: 30px 10px 10px;
}

Hope this helps.

Cheers!

[fernandocd79Participant]

Thanks so much

[Author]

Posts