Support » Plugin: Simple Social Icons » custom colors on footer widget not working in ver 3

  • After upgrading to version 3, the custom colors for the simple social icons placed in the footer widget is not working. I am using the simple social icon at 2 places. The placement in the custom widget at the top seem to work properly. However, the placement in the footer widget does not show the custom colors. Please help.
    Thank you.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Jen Baumann

    (@dreamwhisper)

    Thanks for reaching out about this.

    The latest version of Simple Social Icons allows different settings for each widget location. So, you should be able to set the desired color in the widget settings and save the new settings.

    You can read more about the update at https://studiopress.blog/simple-social-icons-3/

    Thank you for the support.

    The settings within the widget remains intact after the upgrade. However, the colors set for individual social icons were done using CSS code. The following CSS code is no longer working under version 3.

    
    .simple-social-icons li.ssi-facebook a {
        background-color: #3b5998 !important;
    }
    .simple-social-icons li.ssi-gplus a {
        background-color: #dd4b39 !important;
    }
    .simple-social-icons li.ssi-instagram a {
        background-color: #9b3f71  !important;
    }
    .simple-social-icons li.ssi-twitter a {
        background-color: #00aced !important;
    }  
    .simple-social-icons li.ssi-youtube a {
        background-color: #bb0000 !important;
    }
    
    Plugin Contributor Nick Cernis

    (@modernnerd)

    Thanks for the custom code you’re using, @peterlaz.

    You can try adjusting this code to use the ID of the social widget instead. For example:

    #simple-social-icons-4 li.ssi-facebook a {
        background-color: #3b5998 !important;
    }
    
    #simple-social-icons-4 li.ssi-gplus a {
        background-color: #dd4b39 !important;
    }
    
    #simple-social-icons-4 li.ssi-instagram a {
        background-color: #9b3f71  !important;
    }
     
    #simple-social-icons-4 li.ssi-twitter a {
        background-color: #00aced !important;
    }
      
    #simple-social-icons-4 li.ssi-youtube a {
        background-color: #bb0000 !important;
    }

    Thanks for the amended code. It works like a charm.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.