Support » Plugin: Simple Social Icons » Custom icon colors no longer work in version 3.0

  • Resolved brian007

    (@brian007)


    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 Cernis

    (@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;
    }

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

    Plugin Contributor Nick Cernis

    (@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.