Archived topic

Lightweight social icons color in footer

3 replies · Started by Fekry on May 31, 2020

Viewing posts 1–4 of 4

May 31, 2020 at 12:22 pm #1309058

Hi there
I use CSS (below) for Lightweight social icons color in home page"s footer.
https://www.screencast.com/t/4pqhYR665xH
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;
}

May 31, 2020 at 5:59 pm #1309247

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;
}

June 1, 2020 at 2:55 am #1309557

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?

June 1, 2020 at 9:30 am #1310070

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

This archived topic is closed to new replies.

Start building better websites today.