Social icons idle background color

[studioubik]

Hello !

I would like to change the color of the circles around the social icons of my site dev.studio-ubik.com . Previously I had my topbar and footer in a dark color and those social icons circle where nicely visible, but now that I’ve changed for a lighter background (close to white) those circles are hardly visible at all. I guess those circles are partly transparent. Where can I change the color of the circles ?

I have a second question : is there a way to make the footer “stick” to the bottom of the page. If one views the site with a large monitor, there is an area with the site’s background color underneath the footer, and I would like the footer to always be the last element at the bottom of the site.

Thanks in advance for your reply.

[tristup]

Hi Jerome,

Thanks for reaching out.
It is not very clear what color you want to change. If you want to change the background color of the Social Icon you need to override the following custom CSS code.

.x-colophon.bottom a, .x-colophon.bottom .x-social-global a
{
    color: rgb(255,140,0);
}

By adding the following code with your preferred color into the Theme Options > CSS.

.x-colophon.bottom a, .x-colophon.bottom .x-social-global a
{
    color: #ff00ff !important;
}

If you want to change the background color of the circles that comes when you hover over the Social Icon, you need to use the following code and change the selector for each social icon.

.x-social-global a:hover.facebook 
{
    background-color: #ff00ff !Important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Unfortunately, there is no option to set the footer sticky, but you can set a minimum height to the content section so the footer always gets that much space.

Hope it helps.
Thanks

[studioubik]

Hello Tristup,

Thank you for your reply. Unfortunately the first code you provided changes the color of the icons, and the second code changes the color or the hovered circles, but I don’t want to change those. I want to change the color of the idle (non-hovered) circles. Could you tell me how to do that ?

[tristup]

Hi Jerome,

It is not possible to recognize the section for which you want to change color. I would request you please provide any screenshot marked with the section you want to change color, so we can help you on this.

Thanks

[studioubik]

On the first screenshot I changed this footer background to black : I can see the circle around the social icons. Nice. On the second screenshot, footer background back to a lighter color : I can’t see the circle. Not nice. I want to change the color of the circle otherwise the circle is close to invisible.
Hope this is clearer.

[tristup]

Hi Jerome,

Thanks for clarifying it. You need to add the following custom CSS code into the Theme Options > CSS, by changing the color as per your choice.

footer .x-social-global a 
{
    background-color: rgba(55,55,55,.2) !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[studioubik]

Hello Tristup,

Yes ! That’s exactly it, thanks a lot ! However, this seems to “kill” the hover over color , which I didn’t want to change. Do I have to add the css you gave in your first answer for each social icon or is there another way ?

[tristup]

Hi Jerome,

Glad that it works, and you can add the hover CSS from my first reply to get the Hover color.

Thanks