• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Customize Simple Social Icons

Last Updated on July 6, 2018 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

  • Featured Post Widgets in Columns
  • Site Inner with container background in Genesis Sample
  • Simple Social Icons and Search widget after primary Navigation in Genesis Sample
  • Add Logo Between Site Title Area in Genesis
  • Expanding Search Box in Genesis

Categories: Free Content, Genesis Tutorials Tags: CSS, Simple Social Icons

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service