Simple Social Icons
[resolved] Colors wont change (14 posts)

  1. Paul
    Posted 3 years ago #


    I have tried to change the colours via the widget options but just remains grey.

    The live CSS doesnt change and is stuck at #999999 !important. Where can I access the CSS settings so change these manually. The CSS file in the plugin folder does not appear to be the one I need.

    Any ideas?


  2. Paul
    Posted 3 years ago #

    Never mind I altered the default values in simple-social-icons.php in order to achieve the colour change.

  3. Paul
    Posted 3 years ago #


  4. BritneyMuller
    Posted 2 years ago #

    A. I love that you solved this forum question yourself haha

    B. How the hell did you get those colors to change, I went into the php file and it seems the defaults still override my changes?


  5. photoMaldives
    Posted 2 years ago #

    Hi BritneyMuller - as a start, try something like this in your child theme style.css (I spotted this on another site) -

    .simple-social-icons .social-facebook a:hover {background-color: #4965a0 !important;}
    .simple-social-icons .social-flickr a:hover {background-color: #fc0589 !important;}
    .simple-social-icons .social-gplus a:hover {background-color: #dd4b39 !important;}
    .simple-social-icons .social-instagram a:hover {background-color: #406e94 !important;}
    .simple-social-icons .social-linkedin a:hover {background-color: #1b86bc !important;}
    .simple-social-icons .social-pinterest a:hover {background-color: #ca2027 !important;}
    .simple-social-icons .social-rss a:hover {background-color: #f38f36 !important;}
    .simple-social-icons .social-twitter a:hover {background-color: #00abf0 !important;}
  6. thecommunaltable
    Posted 2 years ago #

    photoMaldives, I used your provided coding and put it in my style.css, which changed the hover color to correspond with each social media site's color (ex: twitter is the iconic twitter blue, pinterest is red), but the background color still hasn't changed. Is there a way that I can change the background color of each icon to match the hover color that's currently in place?

    home page: http://thecommunaltable.net

  7. photoMaldives
    Posted 2 years ago #

    Hi thecommunaltable

    Do you want the icons to have colour all the time, and not just when hovered over ? If so, just use the same code as above, but remove the a:hover from each line. Then you can edit the colours as you wish - both 'at rest' and 'on hover' for each icon.

    (Tip : a very useful tool to quickly get the color you want is Instant Eyedropper, which sits in your system tray and lets you click any color anywhere on your screen, and copies it to clipboard.)

    Hope that helps.

  8. prayersnapples
    Posted 2 years ago #

    Worked great on the hover colors :) Thanks! Now I want to change the default background color (from the standard gray to a light brown). I figured I probably just need to add something else into that style sheet, but I wasn't sure what lol

  9. prayersnapples
    Posted 2 years ago #

    (Sorry to bother everyone!) I just figured it out after playing around a lil:

    .simple-social-icons .social-facebook a {
        background-color: #99cc00 !important;
    .simple-social-icons .social-facebook a:hover {
        background-color: #a69c91 !important;
  10. thecommunaltable
    Posted 2 years ago #


    I just deleted the a: hover from the coding, but it still shows the background as grey and only changes color when you hover over each icon...

  11. prayersnapples
    Posted 2 years ago #

    make sure you leave the letter 'a' there in the first part (just delete the : hover). I used the exact code above (in my last reply) on my homepage (the four circles in the middle) and it worked nicely: http://prayersandapples.com. Hope this helps!

  12. beatnikmik
    Posted 2 years ago #

    I am fairly new to wordpress.org, css and simple social.
    I have a
    1) custom theme from studio press
    2) downloaded simple-social widget
    3) installed simple social in header and set up urls

    Can you please tell me the steps I need to take to change the simple-social-icons from the default gray color to the colored social media icons?

    Your detailed steps are greatly appreciated.

  13. Go to Appearance -> Widgets.

    Find the widget you added. pop it open.

    Fill in the css hex color to the colors you want.

  14. katiekate
    Posted 2 years ago #

    Andrea Rennick that's beautiful! Doh!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simple Social Icons
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic