Simple Social Icons Widget–Modifying Individual Colors?

[RavenManiac]

Is there anyway to modify the latest iteration of the Simple Social Icons CSS in Genesis 2.4.2 to allow for individual branded colors of each icon? This was possible in earlier versions, but the code no longer works.

Also, why isn't this an option for the plugin?

https://briangardner.com/customize-simple-social-icons/

[Brad Dalton]

Try this code

---

Tutorials for StudioPress Themes.

[RavenManiac]

I did. It doesn't work with Genesis 2.4.2 and later.

[Brad Dalton]

You might want to notify the author.

---

Tutorials for StudioPress Themes.

[RavenManiac]

Done. Thanks.

[Victor Font]

The new version of the plugin uses SVG images and each svg element has its own class. For example, the class for the Facebook icon is .social-facebook.

---

Regards,

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

[RavenManiac]

That should make things easier, but how would you write the code to overwrite the defaults? Here's what I tried, which doesn't work:

.social-facebook a {
	color: #3b5998 !important;
}

.social-facebook a a:hover {
	background-color: #3b5998 !important;
}

[Victor Font]

You don't need the a. The SVGs are wrapped by the link. The classes are just .social-facebook {} and .social-facebook:hover {}

---

Regards,

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

[RavenManiac]

Thanks Victor. Not sure what I'm doing wrong, but I can't seem to make this work. I'm inserting the modified code into the existing Simple Social CSS, which looks like this:

simple-social-icons/css/style.css
simple-social-icons/icons/LICENSE.txt
simple-social-icons/svgxuse.js
simple-social-icons/readme.txt
simple-social-icons/Gruntfile.js

.simple-social-icons svg[class^="social-"],
.simple-social-icons svg[class*=" social-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

.simple-social-icons {
	overflow: hidden;
}

.simple-social-icons ul {
	margin: 0;
	padding: 0;
}

.simple-social-icons ul li {
	background: none !important;
	border: none !important;
	float: left;
	list-style-type: none !important;
	margin: 0 6px 12px !important;
	padding: 0 !important;
}

.simple-social-icons ul li a {
	border: none !important;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	display: inline-block;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: normal !important;
	height: 1em;
	line-height: 1em;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	width: 1em;
}

.simple-social-icons ul.aligncenter {
	text-align: center;
}

.simple-social-icons ul.aligncenter li {
	display: inline-block;
	float: none;
}

.simple-social-icons .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

[RavenManiac]

@Victor, any idea as to what I'm doing wrong?

[Victor Font]

Add the code to the theme's style.css or use the WordPress customizer. Never modify plugin code.

---

Regards,

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

[RavenManiac]

This reply has been marked as private.

[Victor Font]

No one can see private replies except forum moderators.

---

Regards,

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

[Author]

Posts