Social share hover color

Support
#1

Hello. I trust you’re doing well.

I’d like to change the hover color of each of the social share icons… I’d like each to have a different hover color, for Facebook blue, for Twitter light blue, for LinkedIn another blue… etc… Currently as I hover over them they all are “sky blue”

Also, as I hover over them a square comes up, I’d like it to be a circle instead. Can those Icons be “circle” shaped instead? (In both normal and hover state)

Can you please help? I can’t seem to figure it out.

Thanks!

#2

Hello Jacko,

This is possible by adding some custom CSS. Please try this in X > Theme Options > CSS:

.x-entry-share .x-share-options a {
    color: #fff;
    background-color: #666;
    border-radius: 50%;
    padding: 0 10px;
}

.x-entry-share .x-share-options a i.x-icon-facebook-square:before {
    content: '\f39e';
}

.x-entry-share .x-share-options a i.x-icon-twitter-square:before  {
    content: '\f099';
}

.x-entry-share .x-share-options a i.x-icon-linkedin-square:before  {
    content: '\f0e1';
}

.x-entry-share .x-share-options a i.x-icon-envelope-square:before  {
    content: '\f0e0';
}

.x-entry-share .x-share-options a i {
    font-size: 24px;
}

.x-entry-share .x-share-options a i:before {
    position: relative;
    top: -4px;
}


/* Hover colors */

/* Facebook hover */
.x-entry-share .x-share-options a:first-child:hover {
    background-color: blue;
}
/* Twitter hover */
.x-entry-share .x-share-options a:nth-child(2):hover {
    background-color: lightblue;
}
/* LinkedIn hover */
.x-entry-share .x-share-options a:nth-child(3):hover {
    background-color: blue;
}
/* Mail hover */
.x-entry-share .x-share-options a:nth-child(4):hover {
    background-color: blue;
}

Please feel free to update the code above accordingly.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

Thank you very much for your help with this issue. Best regards!

#4

You’re welcome, Jacko.

#5

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