Updated version no longer display different background icon colours

Thanks for this additional info, @bemvestir – it’s been helpful!

To restore the brand background color on hover, you could update the section of your theme’s stylesheet titled, “Customize the Simple Social Icons to match brand color”.

You’ll need to use the ssi- prefix instead of the social- one:

/* Customize the Simple Social Icons to match brand color
--------------------------------------------- */
  
.simple-social-icons li.ssi-dribbble a:hover {
	background-color: #ea4c89 !important;
}
 
.simple-social-icons li.ssi-email a:hover {
	background-color: #049fb3 !important;
}
 
.simple-social-icons li.ssi-facebook a:hover {
	background-color: #3b5998 !important;
}
 
.simple-social-icons li.ssi-flickr a:hover {
	background-color: #ff0084 !important;
}
 
.simple-social-icons li.ssi-github a:hover {
	background-color: #000 !important;
}
  
.simple-social-icons li.ssi-gplus a:hover {
	background-color: #dd4b39 !important;
}

.simple-social-icons li.ssi-instagram a:hover {
	background-color: #517fa4 !important;
}
 
.simple-social-icons li.ssi-linkedin a:hover {
	background-color: #007bb6 !important;
}
 
.simple-social-icons li.ssi-pinterest a:hover {
	background-color: #cb2027 !important;
}
 
.simple-social-icons li.ssi-rss a:hover {
	background-color: #ff6600 !important;
}
 
.simple-social-icons li.ssi-stumbleupon a:hover {
	background-color: #eb4823 !important;
}
  
.simple-social-icons li.ssi-tumblr a:hover {
	background-color: #32506d !important;
}
 
.simple-social-icons li.ssi-twitter a:hover {
	background-color: #00aced !important;
}
  
.simple-social-icons li.ssi-vimeo a:hover {
	background-color: #aad450 !important;
}
 
.simple-social-icons li.ssi-youtube a:hover {
	background-color: #bb0000 !important;
}

For me that restores the hover colors when I try it in Chrome dev tools:

Hi Nick,

The code works great for the brand background colors on hover.

However I also mentioned that google and instagram icons looked different. But to be more precise all the icons looked different – https://wordpress-20418-45020-194591.cloudwaysapps.com/wp-content/uploads/2017/01/screenshot_1.jpg.

The question is how can I retrieve the icons exactly as they are displayed on bemvestir.com, without the update.

Kind Regards

Elsa Soares

Hi, Elsa.

Glad that the CSS helped to restore the background colors on hover.

The icons were upgraded to new vector versions as part of the plugin update, which is why they look different: https://www.studiopress.com/simple-social-icons-2-0/

The Google+ and Instagram logos have both changed during rebranding, so you’re seeing the new versions of those icons. And all icons will appear sharper because they’re now vectors, which will change line thickness and appearance on some screens.

You could edit the vector icon files manually to make them thicker or use the old versions if you wanted to, but if it were my site I’d leave the icons as they are and gain the benefits of the shift to scalable vector graphics (crisper appearance on a wider range of screens and better accessibility).

Hi Nick,

Thank you for your support.

I’ll follow your advice by leaving the icons as they are ??

Happy new year!

Elsa Soares