Support » Plugin: Simple Social Icons » Colors wont change

  • Resolved Paul



    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?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Paul


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




    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?


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

    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:

    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.

    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

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


    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…

    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: Hope this helps!

    I am fairly new to, 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.

    Andrea Rennick


    Customer Care at Copyblogger Media and Studiopress

    Go to Appearance -> Widgets.

    Find the widget you added. pop it open.

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

    Andrea Rennick that’s beautiful! Doh!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Colors wont change’ is closed to new replies.