Jump to content

Cover page : change hyperlink style in CSS ?

Recommended Posts

Site URL: https://www.casegoods.in/404

Hi everyone, 
password of the website : CaseGoods_C3

over the past 3 weeks, I got my hands on how to find the right ".sqs" blocks with developer tools on a browser and use it to customise a big bunch of things with the Custom CSS area.

But somehow I'm not able to find the right one on the cover page I designed for the 404 error page. On this page I would like to update the hyperlink style, by default it's "active" and fade when mouse hover. I would like to give it a colour that changes on hover instead of the fading. 

When I'm in the custom CSS area, I'm able to see a change in the hyperlink style with my little CSS code update, but it only works there and not in the final online page no matter how many times I refresh or clear my browser cache https://www.casegoods.in/404

I tried a lot of blocks as you can see :

/*404 Link color fix*/
.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a {
    color: #05424d !important;}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a {
    color: #05424d !important;}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { 
  a {color: #05424d !important;}}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] li, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] li { 
  a {color: #05424d !important;}}

.sqs-slide-wrapper[data-slide-type="cover-page"] .alignment-center .layer-front .sqs-slide-layer-content {
    text-align: center;
  a {color: #05424d !important;}
}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul {
  a {color: #05424d !important;}
  a:hover {color: #ffffff !important;}

}

 

Not sure where I'm wrong, any thought ?

 

Screenshot 2020-06-10 at 7.33.35 AM.png

Screenshot 2020-06-10 at 7.33.46 AM.png

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Add to Page Settings > Advanced > Header

<style>
  /*404 Link color fix*/
.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a {
    color: #05424d !important;}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a {
    color: #05424d !important;}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { 
  a {color: #05424d !important;}}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] li, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] li a {color: #05424d !important;}

.sqs-slide-wrapper[data-slide-type="cover-page"] .alignment-center .layer-front .sqs-slide-layer-content {
    text-align: center;
  a {color: #05424d !important;}
}

.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul {
  a {color: #05424d !important;}
  a:hover {color: #ffffff !important;}

}
</style>

 

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, I need help with my Hyperlink style CSS.

I don't see changes when I use CSS.
Please review it. Thank you for your help.

https://www.lsdesignmarketing.com/

h1 a:link, h2 a:link, h3 a:link, p a:link {
  color: #2c87f0;}

h1 a:visited, h2 a:visited, h3 a:visited, p a:visite {
  color: #636;}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  color: #636;
  text-decoration: underline;
}

h1 a:active, h2 a:active, h3 a:active, p a:active {
  color: #c33;
  text-decoration: underline;
}

Link to comment

I updated and still doesn't work.
 

h1 a:link, h2 a:link, h3 a:link, p a:link {
  color: #2c87f0;
text-decoration: none;}

h1 a:visited, h2 a:visited, h3 a:visited, p a:visited {
  color: #636;
text-decoration: none;}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  color: #636;
  text-decoration: underline;
}

h1 a:active, h2 a:active, h3 a:active, p a:active {
  color: #c33;
  text-decoration: underline;
}

Link to comment
1 hour ago, lstrauss831 said:

I updated and still doesn't work.
 

h1 a:link, h2 a:link, h3 a:link, p a:link {
  color: #2c87f0;
text-decoration: none;}

h1 a:visited, h2 a:visited, h3 a:visited, p a:visited {
  color: #636;
text-decoration: none;}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  color: #636;
  text-decoration: underline;
}

h1 a:active, h2 a:active, h3 a:active, p a:active {
  color: #c33;
  text-decoration: underline;
}

Add to Home > Design > Custom CSS

div#content a:hover {
    color: #2c87f0 !important;
    text-decoration: none !important;
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.