Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
linds28

Change color of social icon block?

Question

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.

Edited by linds28

Share this post


Link to post

13 answers to this question

Recommended Posts

  • -1

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; }

Edited by eanderson

Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Edited by alanhouser

Share this post


Link to post
  • 0

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


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...