Thread Starter
Paul
(@armstrong698)
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?
Thanks!
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: http://thecommunaltable.net
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;
}
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…
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!
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
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!
