- This topic has 13 replies, 2 voices, and was last updated 4 years, 9 months ago by
.
Hi!
How can I change a color of social icons background (within widget)? I found here on this forum a CSS for changing colors of social icons but not for changing background color and background color when hover.
Thank you!
Hi @siminator,
I hope you are well today and thank you for your question.
You can try achieving this using Yellow Pencil editor as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Best regards,
Shufflehound teamSo it’s not possible to adjust the code below to do this?
.sh-footer .sh-footer-widgets i:not(.icon-link) {
color: rgb(31, 72, 171)!important;
}Yes, we can.
Could you please share me the page URL from your site where it is displaying so that I can help you?
The url is: http://www.blebetac.si (see footer).
You can change its color by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-social-widgets a.sh-social-widgets-item { background: #f5f5f5; } .sh-social-widgets a.sh-social-widgets-item:hover { background: #eee; }I can see it is working fine on your shared site as shown in the attached screenshot.
Please test it clearing your browser cache or using a different browser.
The “basic color” is okay (blue) but when I hover on an icon the color shouldn’t be grey but a bit brighter blue.
You can change the color value in the above code to whatever you want to use by referring the following pages.
https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/colors/colors_hex.asp
https://www.w3schools.com/colors/colors_picker.aspI changed it to this color: #00ccff but it doesn’t work. It’s still #eee.
Solution for this topic
Please try using below CSS code replacing the above shared CSS code.
.sh-social-widgets a.sh-social-widgets-item { background: #00a3cc; } .sh-social-widgets a.sh-social-widgets-item:hover { background: #00ccff !important; }Amazing. It works! Thanks!
You are most welcome here 🙂
