Nick C

Hi, @sg01.

Do you use a caching plugin or service? It’s worth clearing caches after updating the plugin if so.

If that doesn’t fix the issue, your theme’s styles may need to be updated. There’s a blog post here with further info that you can share with your theme developer: http://www.studiopress.com/simple-social-icons-2-0/

You’re also welcome to link to your site if you wish – I’d be happy to take a closer look for you.

• This reply was modified 9 years, 4 months ago by Nick C.

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: http://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).

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:

@feastingnotfasting Your icons appear correctly for me in Chrome on your homepage and subpages. If you’re still experiencing issues, please open a new topic. I’d be happy to take a look.

@bemvestir I see your icons with background colours at http://wordpress-20418-45020-194591.cloudwaysapps.com/. Is there a specific page or browser that’s causing issues for you? Could you clarify what you see now and what you expect to be seeing? Again, it’s helpful to open a new topic for your site; it makes debugging and replying easier for us and prevents spamming other forum users with notifications. Thanks!