Change color of social icon block?

Is there a way to change the color of the social icon block from black or white using CSS? This is not the default social icons found in the footer, this is the social icon block that is manually added to the site.

There are three color options for the social links block - Black, White or Standard. Standard will use the color associated with the service.

If you want to specify a custom color yourself, you'd need to use some custom CSS to do so. Adding this to the CSS Editor inside the Style Editor should do the trick:

.socialaccountlinks-block .social-account-list a { color: #777777 !important; }

@eanderson - Thanks for your reply. I should have been more clear in my original question.

I would like to change the color of the icons to a color other than black, white or the color associated with the service. I'd like to match the colors of I've chosen in the style editor for my site.

Thanks.

I've updated my answer to include some CSS to override the default color choices.

@eanderson

I tried using the code you posted above to change the color of the social links but it didn't work. I am using the Native theme, do you know anything else I can do? I would really appreciate the help

@eanderson

I tried using the code you posted above to change the color of the social links but it didn't work. I am using the Native theme, do you know anything else I can do? I would really appreciate the help

@jnunez429 (I'm only looking at the CSS on the Squarespace Native demo, which doesn't display Social Icons) but if I had to guess I would start with:

.squarespace-social-buttons a { color: #777777 !important; }

*or also try:.squarespace-social-buttons .ss-social-button-list a { color: #777777 !important; }

@alanhouser

I tried using the codes you gave me and they didn't work. I used the site blocks to add the social media links if you go to my site you can see that I want to change the color of the icons about my picture.

blanellesworld.com

@jnunez429 Are you using the Social Icon Block? (see http://help.squarespace.com/guides/using-the-social-links-block ) ... you can change colors within those settings.

If you're aware of that, please switch to "dark" color, and I'll inspect it again. THX

Also please clarify— you're wanting all icons to be the same color too? Or did you want to control individual icon's colors? THX

@jnunez429 Native is an older template and has it's own social icon built into the template (does not rely a 'Social Links Block' being added). You can adjust the color of these icons in the Style Editor. Just click on the icons or look for in the Footer section for the colors.

http://cl.ly/VfRw

You should not need any custom CSS and be sure to remove any that you've added that did not work.

@alanhouser

I am sure that I am using the social icon block, I switched it to the dark color like you said. I want all the icons to be the same color which is the lavender that I have in my header.

@eanderson

Hey, I am aware that the Native template as a social links block already added in the footer section but i wanted to put another set at the top my site. But using the social link block I can only use three colors. Which is why I tried using your code.

Hi @eandersonIs there a way this code can be used to only affect a single page? I'm trying (with no luck) this;

.socialaccountlinks-block  #collection-56cc3f47ab48def1a6f8f560 { color: #ffffff }

Thanks!

Hi @eandersonIs there a way this code can be used to only affect a single page? I'm trying (with no luck) this;

.socialaccountlinks-block  #collection-56cc3f47ab48def1a6f8f560 { color: #ffffff }

Thanks!