Two instances of Simple Social Icons on one page, two different color schemes

[mscwebmaster]

Using Executive Pro child theme and modifying, but I don't think that matters. I've just done one icon for the time being.

I have Simple Social Icons at the top under the slider. I've styled these so that they're black with a white background.

When I put a second instance of this in the Footer 3 widget, the style reverts to the default for both.

The Footer 3 widget background is black. I'd like those Simple Social Icons to be white on a black background.

Is there a way to make this so? I've tried changing each instance with the CSS

This is my failed attempt at modifying the CSS, so yes, I slapped some !importants in there in a futile attempt to override the properties.

 #simple-social-icons-4 > .simple-social-icons ul li a, #simple-social-icons-4 .widget .simple-social-icons ul li a:hover {
	background-color: #fff!important;
	border-radius: 0;
	color:#000!important;
	font-size:21px;
	padding:11px!important;
}

#simple-social-icons-4 > .simple-social-icons ul li a:hover {
	background-color: #fff!important;
	color: #999;
}

#simple-social-icons-6 > .simple-social-icons ul li a, #simple-social-icons-4 .simple-social-icons ul li a:hover {
	background-color: #000!important;
	border-radius: 0;
	color:#FFF!important;
	font-size:21px;
	padding:11px;
}

#simple-social-icons-6 > .simple-social-icons ul li a:hover {
	background-color: #000!important;
	color: #666!important;
}

http://janine.mscstaging.com

[nutsandbolts]

Try using .footer .simple-social-icons or .footer-widgets .simple-social-icons to see if that makes a difference. I've had better luck in the past styling them based on location.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[mscwebmaster]

Locality-based (didn't quite work) and installing Genesis Style Trump, THEN using my !importants on my locality-based selectors. All fixed. Thank you!

.home-slider .simple-social-icons ul li a, .home-slider .widget .simple-social-icons ul li a:hover {
	background-color: #fff!important;
	border-radius: 0;
	color:#000!important;
	font-size:21px;
	padding:5px;
}

.home-slider .simple-social-icons ul li a:hover {
	color: #999!important;
}

.footer-widgets .simple-social-icons ul li a, .footer-widgets .simple-social-icons ul li a:hover {
	background-color: #222!important;
	border-radius: 0;
	color:#FFF!important;
	font-size:21px;
	padding:5px;
}

.footer-widgets .simple-social-icons ul li a:hover {
	color: #666!important;
}

[Author]

Posts