Changing the color of individual social media icons AND Why does the behavior of the social media block not work like other sites?

Hi,

I am new to Squarespace and am trying to design a website integrating the social link blocks. My website is (colthawley.com). I am trying to mimic in particular the website of one of my favorite bands, Vacation Manor (www.vacationmanor.com). You can find the social media icons clearly at the bottom of their webpage.

So I started simple: I want to change the individual color of the social media icons like with what they have. I have tried scouring forums and Google for code to do this but with no luck, and I am not new to understanding a bit of code or searching forums. The only code I can find is changing the color of ALL the icons. That seems to be very popular and easy with CSS Code, but that is not what I want. 

Also, something I noticed is that there is a behavioral difference in how the icons interact with a cursor between my site and others. There's also the website of another artist I love, Eric Johnson (www.ericjohnson.com). Both VM and EJ use Squarespace (as I use F12 to analyze the webpages and see I see "squarespace.com" names), and their icons behave the same. There seems to be a "box" that outlines the block that when the cursor hovers over it, they all become a bit transparent. Then when you hover over one, it becomes brighter. I know that hover colors are something you write CSS Code for, but my website doesn't behave like theirs in the former way.

This has all seemed too difficult for someone like me who is good with computers, code, and searching deep in forums and youtube comment sections for help. I know many people have used Squarespace and made very customized sites. I also notice that the transparency seems to be a bit too good at keeping the same amount of dimming across the board. Either they coded it really really well (and major props to them to them!), or there's a feature I am just missing that has this code all built in and is still unavailable for some reason. So I assumed that because multiple sites have the same function, it was due to my Personal payment plan not having the "premium block features" or the "Complete Customization CSS and JavaScript" so I upgraded to the Business plan. However, nothing changed and no new features have opened up.

Here are some pictures from VM's Website:

None Selected: .

Hovering inside Block Box (They Grey Out): 

Hovering Over Spotify: 

Hope this all made sense, and I would really appreciate any help with this issue. Thanks so much in advance!

Thank you very much for that explanation, that makes more sense now. I went to that link you gave, and inputted the code and it totally works! Thank you for the speedy reply, and hopefuly this will help others down the road with SS 7.0 to 7.1 changes. 🙂 

On 1/5/2023 at 5:11 PM, paul2009 said:

Hi Colt

The example site was built on Squarespace 7.0. Social Link Blocks on Squarespace 7.0 have an option to set the colour to "Standard" where each icon matches the service's branding. For example, the Facebook icon will be blue and YouTube will be red. It also has the hover features that you describe.

However, on Squarespace 7.1 the Social Link Block has different options. You can assign any colour, but it will be used for all icons. It is not possible to use their default branding colours using the built-in options, but you can add some custom CSS to mimic Squarespace 7.0 icons on your Squarespace 7.1. I put together a quick guide here: Add brand colours to social link icons on Squarespace 7.1.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 are you able to share the code for the Tik Tok logo please?