Formatting Classic Social Sharing

Support
#1

Hi there,

Do you know how I could change the colour of the lines, text, and icons of the classic social sharing element?

I appreciate that you have a new, more easily customisable social element, but the classic one is much easier to implement if you just want a basic social media block, so I would like to stick with that one if at all possible.

Thank you!
EW

#2

Hello @riugn557,

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS to change social icon color. Please note that the code I am sharing will affect the social icons that’s inside content area;

.entry-wrap .x-entry-share .x-share {color: #ddd;}

.entry-wrap .x-entry-share .x-share:hover {background-color: #ddd; color: #fff;}

Thanks.

#3

Hi @Prasant,

Is there any way this CSS affects the opacity of the background-color on hover?

I’ve added this below; the color I’m using is a very dark blue but displaying as a sort of grey on hover. Adding “opacity: 1.0;” doesn’t change this. Do you know what’s going on?

/* Classic Social Sharing */
.entry-wrap .x-entry-share .x-share {
color: #012E40;}

.entry-wrap .x-entry-share .x-share:hover {
background-color: #012E40;
color: white;
border-radius: 50px;
}

Thanks in advance!

#4

Hi there,

You can update this code:

.x-entry-share .x-share:hover {
    color: #fff;
    background-color: #333;
}

and change the value of the background color to an RGBA value so that you can control the color’s opacity:

.x-entry-share .x-share:hover {
    color: #fff;
    background-color: rgba(51, 51, 51, 0.8);
}

Hope this helps.

#5

Hi Jade,

Maybe I didn’t explain right; I don’t want to change the opacity, but it looks like it already did, since my darkblue is displaying as a grey. Any (opacity) change in either hex or rgb don’t make a difference in how it looks.

The strange part is that the color and border-radius do work well. So I thought that maybe there was a change in another part of this CSS that affected the background-color.

#6

Hi there,

Thanks for making it clear,

By default, the links should show up as blue as what you have set in the Theme Options but the social icon’s hover background is set by this code that was previously suggested:

.x-entry-share .x-share:hover {
    color: #fff;
    background-color: #333;
}

If you want the hover background color to be blue, you may update the code to:

.x-entry-share .x-share:hover {
    color: #fff;
    background-color: hsl(193,99%,50%);
}

Hope this helps.

#7

Hi Jade,

I think I’m going nuts. Because your idea, using hsl, works with your color blue. When I put my own color blue in, it displays as grey again.

My RGB is (1, 46, 64), so I’ve used the color converter on w3school to get the correct hsl : (197, 97%, 13%)
And when I put this in my CSS is comes out as grey again.

I don’t know how to add a secure note to this reply with my login details, so you can see what I mean. Should I open a new topic?

#8

Hi there,

All you have to do is to edit the background color value in the code provided and also, the values are not limited to hsl and rgb values. You can also use a hex value for it.

I tried this in the code inspector panel and it seems to work:

.x-entry-share .x-share:hover {
    color: #fff;
    background-color: hsl(197, 97%, 13%);
}

https://www.hexcolortool.com/

In case the issue persists, please post a new thread and add your login details in a secure note.

Thank you.

#9

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