Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Social Icons cannot change styling
Tagged: css, plugin, simple social icons
- This topic has 7 replies, 4 voices, and was last updated 10 years, 8 months ago by wesmcdermott.
-
AuthorPosts
-
August 19, 2013 at 9:39 am #57325wesmcdermottMember
Hi,
I've been trying to change the styling of the icons, both in the widget area, and the simple-social-icons.php file, but they don't seem to work. The colours are staying as default. I'm using the Genesis 2.0 theme and site address is wesmcdermott.co.uk
http://www.wesmcdermott.co.ukAugust 19, 2013 at 1:04 pm #57391pixelherderMemberHi Wes,
I changed the styling of my Simple Social Icons in the widget box interface. It was super easy. Have you tried doing it that way?
August 19, 2013 at 1:30 pm #57393wesmcdermottMemberHi,
Yes, I have tried in the widget interface...
August 19, 2013 at 1:34 pm #57395SusanModeratorI'm not able to look at your site right now, but if you hover over the social icons on your site in Firebug, are you seeing anything that might indicate the icon colors are being controlled by force in the stylesheet? I know some themes force the colors to match the theme's colors.
Like I said, I'm not able to look at your site at the moment, so can't point you further, but wanted to offer that suggestion.
August 19, 2013 at 7:51 pm #57474pixelherderMemberYou're right Susan, it's in the CSS. Wes, have a look in Firebug and you'll see where you need to change the color in the stylesheet.
August 19, 2013 at 9:12 pm #57483devParticipantIt looks to me that you are using the Genesis Framework as your theme. Is that what you want to do? What I see is the styling for the icons is in the HTML itself. I don't know why.
<style type="text/css" media="screen"> .simple-social-icons ul li a, .simple-social-icons ul li a:hover { background-color: #eeeeee !important; -moz-border-radius: 3px -webkit-border-radius: 3px; border-radius: 3px; color: #333333 !important; font-size: 21px; padding: 11px; } .simple-social-icons ul li a:hover { background-color: #f25123 !important; color: #ffffff !important; }</style>
The style.css is not going to override this, TTBOMK.
I suggest you use a child theme instead, but maybe you are doing something that is simply beyond my pay-grade.
August 19, 2013 at 10:50 pm #57486SusanModeratorI've had the chance to look at your site, and @Dev is correct - it looks like you are using the Genesis framework, and not a child theme.
Right at the top of the stylesheet it says this:
/* WARNING - Please read the notice below:
This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances. Please do all modifications in the form of a child theme.
Copy the contents of this file to the child theme. Do not use @import, as the CSS included with Genesis might change in the future.So, either build your own child theme, using the Genesis framework, or use the Sample child theme. Once you do that, you will be able to modify the code for the colors of the simple social icons.
August 21, 2013 at 6:19 am #57887wesmcdermottMemberHi,
Thanks all for your input. Turns out I had 2 simple social icon widgets, one in the sidebar and one in the footer. Whatever changes I made to the sidebar icons, the footer widget was causing them to stay as they were.
Regarding the framework issue. I am using Genesis Framework and not the sample child theme. I'll be sure to change that asap. Is there an easy way paste over all the edits I already made to the framework to the sample child theme? Is it simply a case of copy and paste all files?
Many thanks.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.