[Support request] Lightweight social icons color in footer

[Fekry]

Hi there
I use CSS (below) for Lightweight social icons color in home page”s footer.

I wish to target the “footer” in all pages and posts with this CSS without affecting on sidebar social icons color (need all pages and posts” footer as homepage footer color).
Would you kindly help me to modify this CSS?
Thanks
………………..
body:not(.home) .lsi-social-icons .lsi-social-instagram a,
body:not(.home) .lsi-social-icons .lsi-social-instagram a:visited,
body:not(.home) .lsi-social-icons .lsi-social-instagram a:focus focus {
background: #DD2A7B !important;
}
body:not(.home) .lsi-social-icons .lsi-social-twitter a,
body:not(.home) .lsi-social-icons .lsi-social-twitter a:visited,
body:not(.home) .lsi-social-icons .lsi-social-twitter a:focus focus {
background: #55acee !important;
}
body:not(.home) .lsi-social-icons .lsi-social-facebook a,
body:not(.home) .lsi-social-icons .lsi-social-facebook a:visited,
body:not(.home) .lsi-social-icons .lsi-social-facebook a:focus focus {
background: #3b5998 !important;
}
body:not(.home) .lsi-social-icons .lsi-social-pinterest a,
body:not(.home) .lsi-social-icons .lsi-social-pinterest a:visited,
body:not(.home) .lsi-social-icons .lsi-social-pinterest a:focus focus {
background: #bd081c !important;
}
body:not(.home) .lsi-social-icons .lsi-social-linkedin a,
body:not(.home) .lsi-social-icons .lsi-social-linkedin a:visited,
body:not(.home) .lsi-social-icons .lsi-social-linkedin a:focus focus {
background: #0077b5 !important;
}

[Leo]

Hi there,

Try this instead:

body .footer-widgets .lsi-social-icons .lsi-social-instagram a,
body .footer-widgets .lsi-social-icons .lsi-social-instagram a:visited,
body .footer-widgets .lsi-social-icons .lsi-social-instagram a:focus focus {
    background: #DD2A7B !important;
}
body .footer-widgets .lsi-social-icons .lsi-social-twitter a,
body .footer-widgets .lsi-social-icons .lsi-social-twitter a:visited,
body .footer-widgets .lsi-social-icons .lsi-social-twitter a:focus focus {
    background: #55acee !important;
}
body .footer-widgets .lsi-social-icons .lsi-social-facebook a,
body .footer-widgets .lsi-social-icons .lsi-social-facebook a:visited,
body .footer-widgets .lsi-social-icons .lsi-social-facebook a:focus focus {
    background: #3b5998 !important;
}
body .footer-widgets .lsi-social-icons .lsi-social-pinterest a,
body .footer-widgets .lsi-social-icons .lsi-social-pinterest a:visited,
body .footer-widgets .lsi-social-icons .lsi-social-pinterest a:focus focus {
    background: #bd081c !important;
}
body .footer-widgets .lsi-social-icons .lsi-social-linkedin a,
body .footer-widgets .lsi-social-icons .lsi-social-linkedin a:visited,
body .footer-widgets .lsi-social-icons .lsi-social-linkedin a:focus focus {
    background: #0077b5 !important;
}

[Fekry]

It works for footer in entire site.
But now I want every social icon in “sidebar” to take its own color:
instagram background: #DD2A7B
twitter background: #55acee
facebook background: #3b5998
pinterest background: #bd081c
linkedin background: #0077b5
May you kindly help?

[Leo]

You need to have another set of CSS above but replace .footer-widgets with .sidebar

[Author]

Posts