Simple Social Icons cannot change styling

[wesmcdermott]

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.uk

[pixelherder]

Hi 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?

[wesmcdermott]

Hi,

Yes, I have tried in the widget interface...

[Susan]

I'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.

[pixelherder]

You'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.

[dev]

It 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.

[Susan]

I'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.

[wesmcdermott]

Hi,

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.

[Author]

Posts