Jump to content

My custom icon on header does not invert color

Go to solution Solved by tuanphan,

Recommended Posts

Hi there!

I have a problem with a custom icon I use on my page. The page is created with a black theme and I use white icons and text. On my header, I have replaced one of the social icons with a custom email icon that links to a page on my website.
My site has only two pages that have a white background, and every element inverts color to black except the email icon.
The outcome is to be invisible on these pages, is there a way to make this work?

One minor problem is also that when you click on the email custom icon, it seems like it loads the page twice.

https://fennel-opossum-bdzy.squarespace.com/


This is the code I have on custom CSS.

 

// Folder Indicator Arrow - Ghost // 

a.header-nav-folder-title:after {
    content: "▾";
}

// Remove Active Link Underline //
div.header-nav-item--active a {
    background-image: none !important;
  .header-nav-folder-item-content  {
  background-image: none!important;
}
}

/* Nav item hover color */
.header-nav-item a:hover {
    color: #44E3FF !important;
}

// Blog Pagination Background Color - Ghost //

.item-pagination--prev-next {
  background-color: #fff !important;
}

// Summary read more link //
.summary-read-more-link {border:2px solid #38383B; text-align: center!important; background:#38383B; text-transform:uppercase!important}
    
.summary-read-more-link:hover {background:gray!important; color:#FFF!important}

// remove footer links //
#footer-sections .sqs-block-html a {

  text-decoration : unset;
  
  }

/* footer links hover color */
footer.sections a:hover {
	color: #fff !important;
}


/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(3) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
   
    }    
    background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}



.sqs-svg-icon--list a:nth-of-type(3) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}


// List title carousel //
.user-items-list-carousel .list-item-content__title {
    font-family: exo;
 font-size: 1rem !important;
  line-height:1.3;
}


// List description custom font carousel//
.user-items-list-carousel .list-item-content__description {
    font-family: exo;
  font-size: 1rem !important;
  line-height:1.3;
}

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 1rem !important;
  }
}

//Hover button effect//
.sqs-block-button-element--small:hover{background-color:#44E3FF!important; color:#000!important;}



//custom button COA (secondary)//
#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary { 
background-image: linear-gradient(92.88deg, #000 18.16%, #000 13.89%, #44E3FF 84.72%); 
  
color: #fff !important; flex-shrink: 0; border: 1px solid cyan;
  width:100%;}


#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary:hover { 
background-color:#44E3FF!important; 
color: #fff !important;}

 

Edited by ManolisV
Link to comment
  • Replies 14
  • Views 712
  • Created
  • Last Reply

Top Posters In This Topic

On 5/23/2023 at 6:50 PM, ManolisV said:

The problem only consists with the pages that use white background. Currently I have two pages 
with this problem. 
image.thumb.png.b57058634ceeaaba899d1537e7b22c8b.png




https://fennel-opossum-bdzy.squarespace.com/blog-main/made-it-to-the-other-side

And also have this problem with the store page

Thank you!

 

With blog, add this to Design > Custom CSS

[class*="type-blog"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

image.png.ac11a30a88848e66c009a0e1ff895d0c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you @tuanphan!! This worked for the blog, you are awesome!!
Is it possible to have the same for the Store page? I tried to change it ("type-store") but nothing happened.

One last question, when I click the email icon, I can see that it loads the targeted page two times. Is this a problem due to the site being unpublished? Or is it a different problem?

Thank you!

Link to comment
On 5/25/2023 at 7:55 PM, ManolisV said:

Thank you @tuanphan!! This worked for the blog, you are awesome!!
Is it possible to have the same for the Store page? I tried to change it ("type-store") but nothing happened.

One last question, when I click the email icon, I can see that it loads the targeted page two times. Is this a problem due to the site being unpublished? Or is it a different problem?

Thank you!

#1. With product, use this code

[class*="type-products"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

#2. It looks fine on my Windows. Which device/browser do you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you for assisting me further on this!

1. I added the code in the custom CSS, but unfortunately, it does not work, is there any other possible solution?

2. This happens in both chrome and firefox, I use a desktop with windows 10

 

Link to comment
On 5/29/2023 at 2:30 PM, ManolisV said:

Thank you for assisting me further on this!

1. I added the code in the custom CSS, but unfortunately, it does not work, is there any other possible solution?

2. This happens in both chrome and firefox, I use a desktop with windows 10

 

#1. Can you send all current code after adding my code?

#2. I don't know this, it is fine on my laptop. Windows 10/Chrome

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan here is the current code


 

// Folder Indicator Arrow - Ghost // 

a.header-nav-folder-title:after {
    content: "▾";
}

// Remove Active Link Underline //
div.header-nav-item--active a {
    background-image: none !important;
  .header-nav-folder-item-content  {
  background-image: none!important;
}
}

/* Nav item hover color */
.header-nav-item a:hover {
    color: #44E3FF !important;
}

// Blog Pagination Background Color - Ghost //

.item-pagination--prev-next {
  background-color: #fff !important;
}

// Summary read more link //
.summary-read-more-link {border:2px solid #38383B; text-align: center!important; background:#38383B; text-transform:uppercase!important}
    
.summary-read-more-link:hover {background:gray!important; color:#FFF!important}

// remove footer links //
#footer-sections .sqs-block-html a {

  text-decoration : unset;
  
  }

/* footer links hover color */
footer.sections a:hover {
    color: #fff !important;
}


/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(3) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
   
    }    
    background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}

.sqs-svg-icon--list a:nth-of-type(3) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

[class*="type-blog"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}


[class*="type-products"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

// List title carousel //
.user-items-list-carousel .list-item-content__title {
    font-family: exo;
 font-size: 1rem !important;
  line-height:1.3;
}


// List description custom font carousel//
.user-items-list-carousel .list-item-content__description {
    font-family: exo;
  font-size: 1rem !important;
  line-height:1.3;
}

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 1rem !important;
  }
}

//Hover button effect//
.sqs-block-button-element--small:hover{background-color:#44E3FF!important; color:#000!important;}

//custom button COA (secondary)//
#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary { 
background-image: linear-gradient(92.88deg, #000 18.16%, #000 13.89%, #44E3FF 84.72%); 
  
color: #fff !important; flex-shrink: 0; border: 1px solid cyan;
  width:100%;}


#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary:hover { 
background-color: #44E3FF!important; 
color: #fff !important;}

//search bar//
.search-input {
background-color: #FFF!important;  border: none;
border-left: #44E3FF!important; 
border-top: #44E3FF!important; 
border-right: #44E3FF!important; 
border-bottom: #44E3FF!important
}

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.