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

Custom Social Links Colour Issue



Site URL: https://rafida.org


We've added 3 custom social link icons on our BRINE website.

The icons are fine when there is an overlay behind the icons. They appear white with no issue. But when there is no overlay (and just a plain white background), the regular social link icons change to gray, but the 3 new custom icons remain white.

Two bits of code I'm using have been supplied below, and I've added screenshots showing the issue.

Website access:
pass: lastphasetesting3

Any ideas?


I adding the below code to custom CSS to change the colour, but the colour I pick only changes the standard icons and not the 3 custom icons.

  .tweak-social-icons-style-regular .SocialLinks-link-icon{
  fill: grey;
  .tweak-social-icons-style-regular .SocialLinks:hover .SocialLinks-link-icon{
  fill: grey;
  .tweak-social-icons-style-regular .SocialLinks:hover .SocialLinks-link:hover .SocialLinks-link-icon{
  fill: grey;

I've used the following code to add the 3 custom social icons:

.SocialLinks-inner a:nth-child(5){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f168b01b9ec1e5fe976efe3/1595312897641/4th.png") !important;
.SocialLinks-inner a:nth-child(6){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f16fa9a377d4a7f30b3e370/1595341466544/whatsapp2.png") !important;
.SocialLinks-inner a:nth-child(7){
  content: url("https://static1.squarespace.com/static/5e4d565f9a543a4fb8ddc540/t/5f16ed8b795a690f8322dacb/1595338123572/email.png") !important;



Screenshot 2020-09-18 at 03.40.44.png

Screenshot 2020-09-18 at 03.40.50.png

Edited by Rafida
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

As the Social Icons need to be grey on when displaying product items, or blog items, I've tried adding the below code in the Page Header Code Injection in the relevant blog and product databases.

Although, the end result is when I got to a product page item, or blog page item , the custom social icons are still white. Upon refreshing the page they change to grey.

Any idea why this is happening and how to make it so the custom social icons are grey without needing a manual refresh?


Code added in Page Header Code Injection in the relevant blog and product databases

.SocialLinks-inner a:nth-child(5){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(6){filter: brightness(50%);}
.SocialLinks-inner a:nth-child(7){filter: brightness(50%);}


Link to post
  • 0

Also with the above solution, the grey of the standard social icons is not the exact same grey as the additional custom social icons.

I think the better solution would be to somehow add CSS to tell it for change the custom icons to a specific grey is there is no overlay underneath.

Any ideas?

Link to post

Create an account or sign in to comment

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

  • Create New...