WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Paul
    Member
    Posted 1 year ago #

    Hi

    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?

    http://wordpress.org/extend/plugins/simple-social-icons/

  2. Paul
    Member
    Posted 1 year ago #

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

  3. Paul
    Member
    Posted 1 year ago #

    Resolved

  4. BritneyMuller
    Member
    Posted 9 months 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?

    Thanks!

  5. photoMaldives
    Member
    Posted 9 months 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
    Member
    Posted 9 months 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
    Member
    Posted 8 months 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
    Member
    Posted 8 months 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
    Member
    Posted 8 months 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
    Member
    Posted 8 months ago #

    HI,

    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
    Member
    Posted 8 months 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
    Member
    Posted 7 months ago #

    Hello,
    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.
    Mikki

  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
    Member
    Posted 6 months ago #

    Andrea Rennick that's beautiful! Doh!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic