linds28 58 Share Posted July 23, 2013 (edited) 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 July 23, 2013 by linds28 ColeH_design and Ari 2 Link to post
-1 eanderson 11,864 Solution Share Posted July 24, 2013 (edited) 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 July 24, 2013 by eanderson Template Developer at Squarespace, @esquareda on Twitter. Link to post
0 linds28 58 Author Share Posted July 24, 2013 @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. Link to post
0 eanderson 11,864 Share Posted July 24, 2013 I've updated my answer to include some CSS to override the default color choices. Template Developer at Squarespace, @esquareda on Twitter. Link to post
0 jnunez429 0 Share Posted May 21, 2014 @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 Link to post
0 jnunez429 0 Share Posted May 21, 2014 @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 Link to post
0 Alan-Squareflair 2,562 Share Posted May 21, 2014 @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; } Link to post
0 Alan-Squareflair 2,562 Share Posted May 21, 2014 *or also try:.squarespace-social-buttons .ss-social-button-list a { color: #777777 !important; } Link to post
0 jnunez429 0 Share Posted May 22, 2014 @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 Link to post
0 Alan-Squareflair 2,562 Share Posted May 22, 2014 (edited) @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 May 22, 2014 by alanhouser Link to post
0 eanderson 11,864 Share Posted May 22, 2014 @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. Link to post
0 jnunez429 0 Share Posted May 22, 2014 @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. Link to post
0 Meijer 0 Share Posted February 23, 2016 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! Link to post
0 Meijer 0 Share Posted February 23, 2016 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! Link to post
Question
linds28 58
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 linds28Link to post
Top Posters For This Question
4
3
3
2
Popular Days
May 21
4
May 22
4
Jul 24
3
Feb 23
2
Top Posters For This Question
jnunez429 4 posts
eanderson 3 posts
Alan-Squareflair 3 posts
linds28 2 posts
Popular Days
May 21 2014
4 posts
May 22 2014
4 posts
Jul 24 2013
3 posts
Feb 23 2016
2 posts
13 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment