Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Social Icons Widget–Modifying Individual Colors?
Tagged: simple social icons
- This topic has 12 replies, 3 voices, and was last updated 7 years, 1 month ago by Victor Font.
-
AuthorPosts
-
March 11, 2017 at 1:16 pm #202884RavenManiacParticipant
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/March 11, 2017 at 1:34 pm #202886Brad DaltonParticipantMarch 11, 2017 at 1:37 pm #202887RavenManiacParticipantI did. It doesn't work with Genesis 2.4.2 and later.
March 11, 2017 at 1:38 pm #202889Brad DaltonParticipantMarch 11, 2017 at 1:42 pm #202891RavenManiacParticipantDone. Thanks.
March 11, 2017 at 1:47 pm #202892Victor FontModeratorThe 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?March 11, 2017 at 2:21 pm #202893RavenManiacParticipantThat 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; }
March 11, 2017 at 2:33 pm #202894Victor FontModeratorYou 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?March 11, 2017 at 3:11 pm #202897RavenManiacParticipantThanks 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; }
March 14, 2017 at 11:30 am #203086RavenManiacParticipant@Victor, any idea as to what I'm doing wrong?
March 14, 2017 at 1:09 pm #203100Victor FontModeratorAdd 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?March 14, 2017 at 3:45 pm #203108RavenManiacParticipantThis reply has been marked as private.March 14, 2017 at 9:51 pm #203118Victor FontModeratorNo 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? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.