Custom icon colors no longer work in version 3.0

  • Resolved brian007

    (@brian007)


    6 years ago

    I’ve been using the following CSS (Facebook example shown here) to style the icons with custom colors:

    .simple-social-icons li.ssi-facebook a:link,
.simple-social-icons li.ssi-facebook a:visited {
	background-color: rgba(59,89,152,1.0) !important;
}

.simple-social-icons li.ssi-facebook a:hover,
.simple-social-icons li.ssi-facebook a:active {
	background-color: rgba(59,89,152,0.7) !important;
}

    After upgrading to version 3.0, the custom colors are no longer displayed. Instead, I just get the default colors that are set in the widget, for all icons across the board. So it’s not nearly as attractive as it was.

    I’ve tried all the solutions that I’ve seen in this forum, including adding the function and Brian Gardner’s CSS tutorial, but nothing works.

    What can I do to get my custom colors back? I’d prefer reverting to the previous version of the plugin if necessary, if it’s impossible with this version.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Nick C

    (@modernnerd)

    Hi, @brian007!

    You can change your Simple Social Icons custom CSS to look like this:

    #simple-social-icons-2 li.ssi-facebook a:link,
#simple-social-icons-2 li.ssi-facebook a:visited {
    background-color: rgba(59,89,152,1.0) !important;
}

#simple-social-icons-2 li.ssi-facebook a:hover,
#simple-social-icons-2 li.ssi-facebook a:active {
    background-color: rgba(59,89,152,0.7) !important;
}

#simple-social-icons-2 li.ssi-pinterest a:link,
#simple-social-icons-2 li.ssi-pinterest a:visited {
    background-color: rgba(203,32,39,1.0) !important;
}

#simple-social-icons-2 li.ssi-pinterest a:hover,
#simple-social-icons-2 li.ssi-pinterest a:active {
    background-color: rgba(203,32,39,0.7) !important;
}

#simple-social-icons-2 li.ssi-twitter a:link,
#simple-social-icons-2 li.ssi-twitter a:visited {
    background-color: rgba(0,172,237,1.0) !important;
}

#simple-social-icons-2 li.ssi-twitter a:hover,
#simple-social-icons-2 li.ssi-twitter a:active {
    background-color: rgba(0,172,237,0.7) !important;
}

#simple-social-icons-2 li.ssi-youtube a:link,
#simple-social-icons-2 li.ssi-youtube a:visited {
    background-color: rgba(187,0,0,1.0) !important;
}

#simple-social-icons-2 li.ssi-youtube a:hover,
#simple-social-icons-2 li.ssi-youtube a:active {
    background-color: rgba(187,0,0,0.7) !important;
}
    Thread Starter brian007

    (@brian007)

    Thanks, Nick! That solved the problem. I really appreciate your help.

    Plugin Contributor Nick C

    (@modernnerd)

    You’re welcome, Brian! Thank you for letting us know it helped.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom icon colors no longer work in version 3.0’ is closed to new replies.

Tags