PopWP

WordPress and Genesis Tutorials

Customize Simple Social Icons

Last Updated on Favorited: 0 times

This post contains various customization options for Simple social icons plugin in Genesis.

How to start?

Simple social icons are easy to customize. However, it contains various !important rule which creates problems while customizing it.

To ensure that our custom CSS works and apply for simple social icons, we can remove the simple-social-icons/css/style.css file and add those CSS to the theme styles or in a new custom CSS file.

Follow Remove simple social icons plugin CSS

and then, Paste those CSS in the stylesheet file.

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

 

Customizations:

Above CSS is must be added at first.

Add any of the CSS files from the following options and change per your needs.

Option 1.

/* Simple Social Icons 1
--------------------------------------------- */



.simple-social-icons li.ssi-dribbble a {
		background-color: #ea4c89 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-dribbble a:hover {
	background-color: #ea4c89 !important;
}





.simple-social-icons li.ssi-email a {
	background-color: #049fb3 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-email a:hover {
	background-color: #049fb3 !important;
}



.simple-social-icons li.ssi-facebook a {
	background-color: #3b5998 !important;
	color: #fff !important;
}

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



.simple-social-icons li.ssi-flickr a {
		background-color: #ff0084 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-flickr a:hover {
	background-color: #ff0084 !important;
}


.simple-social-icons li.ssi-github a {
		background-color: #f6f6f6 !important;
	color:  #000 !important;
}

.simple-social-icons li.ssi-github a:hover {
	background-color: #000000 !important;
}



.simple-social-icons li.ssi-gplus a {
	background-color: #dd4b39 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-gplus a:hover {
	background-color: #dd4b39 !important;
}



.simple-social-icons li.ssi-instagram a {
		background-color: #517fa4 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-instagram a:hover {
	background-color: #517fa4 !important;
}


.simple-social-icons li.ssi-linkedin a {
		background-color: #007bb6 !important;
	color: #fff !important;

}

.simple-social-icons li.ssi-linkedin a:hover {
	background-color: #007bb6 !important;
}




.simple-social-icons li.ssi-pinterest a {
		background-color: #cb2027 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-pinterest a:hover {
	background-color: #cb2027 !important;
}


.simple-social-icons li.ssi-rss a {
	background-color: #ff6600 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-rss a:hover {
	background-color: #ff6600 !important;
}


.simple-social-icons li.ssi-stumbleupon a {
		background-color: #eb4823 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-stumbleupon a:hover {
	background-color: #eb4823 !important;
}

.simple-social-icons li.ssi-tumblr a {
	background-color: #32506d !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-tumblr a:hover {
	background-color: #32506d !important;
}

.simple-social-icons li.ssi-twitter a {
	background-color: #00aced !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-twitter a:hover {
	background-color: #00aced !important;
}

.simple-social-icons li.ssi-vimeo a {
	background-color: #aad450 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-vimeo a:hover {
	background-color: #aad450 !important;
}

.simple-social-icons li.ssi-youtube a {
	background-color: #bb0000 !important;
	color: #fff !important;
}

.simple-social-icons li.ssi-youtube a:hover {
	background-color: #bb0000 !important;
}


.simple-social-icons ul li a {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.simple-social-icons ul li a:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

Option 2

/* Simple Social Icons 2
--------------------------------------------- */

.simple-social-icons li.ssi-dribbble a {
	border: 0px solid #ea4c89 !important;
	color: #ea4c89 !important;
}

.simple-social-icons li.ssi-dribbble a:hover {
	background-color: #ea4c89 !important;
}

.simple-social-icons li.ssi-email a {
	border: 0px solid #049fb3 !important;
	color: #049fb3 !important;
}

.simple-social-icons li.ssi-email a:hover {
	background-color: #049fb3 !important;
}

.simple-social-icons li.ssi-facebook a {
	border: 0px solid #3b5998 !important;
	color: #3b5998 !important;
}

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

.simple-social-icons li.ssi-flickr a {
	border: 0px solid #ff0084 !important;
	color: #ff0084 !important;
}

.simple-social-icons li.ssi-flickr a:hover {
	background-color: #ff0084 !important;
}

.simple-social-icons li.ssi-github a {
	border: 0px solid #000 !important;
	color: #000 !important;
}

.simple-social-icons li.ssi-github a:hover {
	background-color: #000 !important;
}

.simple-social-icons li.ssi-gplus a {
	border: 0px solid #dd4b39 !important;
	color: #dd4b39 !important;
}

.simple-social-icons li.ssi-gplus a:hover {
	background-color: #dd4b39 !important;
}

.simple-social-icons li.ssi-instagram a {
	border: 0px solid #517fa4 !important;
	color: #517fa4 !important;
}

.simple-social-icons li.ssi-instagram a:hover {
	background-color: #517fa4 !important;
}

.simple-social-icons li.ssi-linkedin a {
	border: 0px solid #007bb6 !important;
	color: #007bb6 !important;
}

.simple-social-icons li.ssi-linkedin a:hover {
	background-color: #007bb6 !important;
}

.simple-social-icons li.ssi-pinterest a {
	border: 0px solid #cb2027 !important;
	color: #cb2027 !important;
}

.simple-social-icons li.ssi-pinterest a:hover {
	background-color: #cb2027 !important;
}

.simple-social-icons li.ssi-rss a {
	border: 0px solid #ff6600 !important;
	color: #ff6600 !important;
}

.simple-social-icons li.ssi-rss a:hover {
	background-color: #ff6600 !important;
}

.simple-social-icons li.ssi-stumbleupon a {
	border: 0px solid #eb4823 !important;
	color: #eb4823 !important;
}

.simple-social-icons li.ssi-stumbleupon a:hover {
	background-color: #eb4823 !important;
}

.simple-social-icons li.ssi-tumblr a {
	border: 0px solid #32506d !important;
	color: #32506d !important;
}

.simple-social-icons li.ssi-tumblr a:hover {
	background-color: #32506d !important;
}

.simple-social-icons li.ssi-twitter a {
	border: 0px solid #00aced !important;
	color: #00aced !important;
}

.simple-social-icons li.ssi-twitter a:hover {
	background-color: #00aced !important;
}

.simple-social-icons li.ssi-vimeo a {
	border: 0px solid #aad450 !important;
	color: #aad450 !important;
}

.simple-social-icons li.ssi-vimeo a:hover {
	background-color: #aad450 !important;
}

.simple-social-icons li.ssi-youtube a {
	border: 0px solid #bb0000 !important;
	color: #bb0000 !important;
}

.simple-social-icons li.ssi-youtube a:hover {
	background-color: #bb0000 !important;
}



.simple-social-icons ul li a {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.simple-social-icons ul li a:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

Option 3

/* Simple Social Icons 3
--------------------------------------------- */


.simple-social-icons li.ssi-dribbble a, .simple-social-icons li.ssi-dribbble a:hover {
	color: #ea4c89 !important;
}

.simple-social-icons li.ssi-email a, .simple-social-icons li.ssi-email a:hover {
	color: #049fb3 !important;
}


.simple-social-icons li.ssi-facebook a , .simple-social-icons li.ssi-facebook a:hover{
	color: #3b5998 !important;
}


.simple-social-icons li.ssi-flickr a, .simple-social-icons li.ssi-flickr a:hover {
	color: #ff0084 !important;
}


.simple-social-icons li.ssi-github a, .simple-social-icons li.ssi-github a:hover {
	color: #000 !important;
}


.simple-social-icons li.ssi-gplus a, .simple-social-icons li.ssi-gplus a:hover {

	color: #dd4b39 !important;
}



.simple-social-icons li.ssi-instagram a, .simple-social-icons li.ssi-instagram a:hover {
	color: #517fa4 !important;
}


.simple-social-icons li.ssi-linkedin a, .simple-social-icons li.ssi-linkedin a:hover {
	color: #007bb6 !important;
}



.simple-social-icons li.ssi-pinterest a, .simple-social-icons li.ssi-pinterest a:hover  {
	color: #cb2027 !important;
}


.simple-social-icons li.ssi-rss a, .simple-social-icons li.ssi-rss a:hover {
	color: #ff6600 !important;
}



.simple-social-icons li.ssi-stumbleupon a, .simple-social-icons li.ssi-stumbleupon a:hover {
	color: #eb4823 !important;
}

.simple-social-icons li.ssi-tumblr a, .simple-social-icons li.ssi-tumblr a:hover {

	color: #32506d !important;
}



.simple-social-icons li.ssi-twitter a, .simple-social-icons li.ssi-twitter a:hover {

	color: #00aced !important;
}


.simple-social-icons li.ssi-vimeo a, .simple-social-icons li.ssi-vimeo a:hover {

	color: #aad450 !important;
}


.simple-social-icons li.ssi-youtube a, .simple-social-icons li.ssi-youtube a:hover  {
	color: #bb0000 !important;
}




.simple-social-icons ul li a {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.simple-social-icons ul li a:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

.simple-social-icons ul li a {
	background-color: transparent !important;
}

.simple-social-icons ul li a:hover {
	background-color: transparent !important;
	color: auto;
}

 

Still, Sometimes !important rule overwrite the default CSS. SO make sure to check everything.

It is recommended to check the additional CSS for :hover and :focus as the default is #000 and #fff is set.

Related Posts

Reader Interactions