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

SOLVED: How to have CSS exceptions

Question

Posted (edited)

Site URL: http://www.wearehkers.com

Hello, I've injected a javascript and corresponding css to take active links black. I called the javascript selector .active-link and used the css code below:

.active-link {
  color: black !Important;
}

 

But there's one button in my header that I want to keep as an exception so that it doesn't go black when I'm on that page. I tried using the :not () code but it didn't seem to work. Does the :not () code work on squarespace? Below is what I've tried:

 

.active-link:not (.Header) {
  color: black !Important;
}

OR

.active-link:not (.Header-inner-top) {
  color: black !Important;
}

 

PS. This is on a template that is not live yet so my domain won't show what I'm talking about, here's a screenshot instead.

image.thumb.png.9d1d33b6b965a74f6446216e2e134b74.png

I don't want the subscribe button to go black as it is below

image.thumb.png.11b4e8f84fac9d18fcc47b9f4f976bb0.png

 

Edited by HKers

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
Posted (edited)
.active-link:not(.Header .active-link){

Give that a go

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)
.active-link:not(#header .active-link){

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
2 hours ago, rwp said:

.active-link:not(#header .active-link){

 

doesn't work i'm afraid 😞

Share this post


Link to post
  • 0

Can you make the button visible on your page so I can check it out please.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
18 minutes ago, rwp said:

Can you make the button visible on your page so I can check it out please.

It's on a different template and my current template doesn't have navigation links or buttons in the header so I'm not sure how make it visible without changing my live website 😕

Share this post


Link to post
  • 0

can you right click on the text of the button -> inspect element and post a screen shot?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
10 hours ago, rwp said:

.active-link:not(.Header .active-link){

Give that a go

 

Oh great thank you!!! It works!!!

Share this post


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