Simple Social Icons Background Color Issue

[joe1515]

I am using Simple Social Icon widget on two different widgets the footer, and Side Bar. Whenever I make a change to one of the widget background colors it overrides the other widgets background color. I am using the smart passive income theme.

Website address is http://www.socialsecurityteacher.com

http://www.socialsecurityteacher.com

[Victor Font]

That's the way the plugin works. You only have 1 instance of the plugin regardless of how many times you place the widget. The plugin also generates the CSS for the background color as inline CSS which makes it difficult to override. In order to have different background colors for the two widget areas, you have to write your on CSS and make sure it is placed after the CSS generated by the plugin.

The CSS for the footer widget is:

#simple-social-icons-20 .simple-social-icons ul li a, #simple-social-icons-20 .simple-social-icons ul li a:hover, #simple-social-icons-20 .simple-social-icons ul li a:focus {
    background-color: #8c8a84 !important;
    border-radius: 0px;
    color: #ffffff !important;
    border: 0px #ffffff solid !important;
    font-size: 33px;
    padding: 17px;
}

For the sidebar you would use:

#simple-social-icons-18 .simple-social-icons ul li a, #simple-social-icons-18 .simple-social-icons ul li a:hover, #simple-social-icons-18 .simple-social-icons ul li a:focus {
    background-color: #8c8a84 !important;
    border-radius: 0px;
    color: #ffffff !important;
    border: 0px #ffffff solid !important;
    font-size: 33px;
    padding: 17px;
}

What I've done is added the id of the widget itself as generated by WordPress. This allows you more granular control over the colors.

I would hook this code into the wp_head hook so it is written before the /head tag.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts