Shop category links CSS

Hello ! I have been looking everywhere for a code but I couldn't find one that works for me so, here is my problem:

I want to change the look of the active link on my store category. I mostly want to remove the bold text, change it to uppercase and change the color.

The code I tried is the following:

Quote

li.category-item a:active{
     background-image: none!important;
    text-transform: uppercase;
    color: #f6855c !important;
}

But it doesn't do anything except changing the color of the links.

Thank you very much in advance

Hi. Can you share link to shop page? We can help easier

On 6/5/2021 at 3:30 PM, tuanphan said:

Hi. Can you share link to shop page? We can help easier

Thank you for your reply! 

https://fife-corn-tfef.squarespace.com/shop/prints

pw: adekan

Also, I just noticed that on the mobile version the description of the product goes under the "add to cart", is there a way to move it above ?

Thank you ! 

17 hours ago, CathyBCN said:

Thank you for your reply! 

https://fife-corn-tfef.squarespace.com/shop/prints

pw: adekan

Also, I just noticed that on the mobile version the description of the product goes under the "add to cart", is there a way to move it above ?

Thank you ! 

Add to Design > Custom CSS

/* shop links */
li.category-item a {
    font-weight: normal !important;
    color: red;
    text-transform: uppercase;
}

I see description above cart here? Did you solve it?

On 6/15/2021 at 11:11 AM, tuanphan said:

Add to Design > Custom CSS

/* shop links */
li.category-item a {
    font-weight: normal !important;
    color: red;
    text-transform: uppercase;
}

I see description above cart here? Did you solve it?

Oh thank you so much!

I was wondering if i could also change the active and hover links in the category bar ? i tried adding a:active but it doesn't seem to be working.

And yes I did solve it after some research on the forum.

Thank you again for your help 🙂 

12 hours ago, CathyBCN said:

Oh thank you so much!

I was wondering if i could also change the active and hover links in the category bar ? i tried adding a:active but it doesn't seem to be working.

And yes I did solve it after some research on the forum.

Thank you again for your help 🙂 

Use this code

a.category-link.active {
    color: violet;
}
a.category-link:hover {
	color: yellow;
}

On 6/17/2021 at 5:23 AM, tuanphan said:

Use this code

a.category-link.active {
    color: violet;
}
a.category-link:hover {
	color: yellow;
}

 

This does not seem to work.  I have also tried .blog-meta-item--category a 
Any ideas?

On 4/26/2023 at 3:02 AM, thedowntowncreative said:

This does not seem to work.  I have also tried .blog-meta-item--category a 
Any ideas?

Can you share link to page where you have problem? We can check it again easier

9 hours ago, tuanphan said:

Can you share link to page where you have problem? We can check it again easier

BIG thanks for your look into this.

https://officeproducts.squarespace.com/used-furniture/

On this blog page I have an archive block displaying categories that I have been trying to color when the particular category is active.

I also still have a text block with links to filter my categories, which I was also trying to color when one is active.

I think I'd prefer to use the archive group list, but wasn't sure which was possible.

On 4/29/2023 at 9:15 PM, thedowntowncreative said:

BIG thanks for your look into this.

https://officeproducts.squarespace.com/used-furniture/

On this blog page I have an archive block displaying categories that I have been trying to color when the particular category is active.

I also still have a text block with links to filter my categories, which I was also trying to color when one is active.

I think I'd prefer to use the archive group list, but wasn't sure which was possible.

What is password?

10 hours ago, tuanphan said:

What is password?

oh I thought I sent with the hide feature

officeproductstdc

A bit manually to handle this

With this url

https://officeproducts.squarespace.com/used-furniture/category/Used+Cubicles

try adding this to Settings > Advanced > Code Injection > Footer

<script>
   if (document.location.pathname.indexOf("/used-furniture/category/Used+Cubicles") == 0) {
    document.querySelector('body').classList.add('t-active')
}
</script>
<style>
  body.t-active a.archive-group-name-link[href*="Used+Cubicles"] {
    color: #f1f !important;
}
</style>

If it works, I will give code for other urls

10 hours ago, tuanphan said:

A bit manually to handle this

With this url

https://officeproducts.squarespace.com/used-furniture/category/Used+Cubicles

try adding this to Settings > Advanced > Code Injection > Footer

<script>
   if (document.location.pathname.indexOf("/used-furniture/category/Used+Cubicles") == 0) {
    document.querySelector('body').classList.add('t-active')
}
</script>
<style>
  body.t-active a.archive-group-name-link[href*="Used+Cubicles"] {
    color: #f1f !important;
}
</style>

If it works, I will give code for other urls

Boom! Works! SO Great! Thank you so so very much tuanphan! Incredible!

Indeed, if you could please provide an example for how I would implement only one more of the categories in addition to this one, so I can see how to cleanly add & order the code. Reason being, I will be changing the categories, taking out the world 'Used' off of each. Then I'll be able to add all the rest of the categories myself no problem, I think?

Is there any sort of way to automate a batch changing of names of categories?

21 hours ago, thedowntowncreative said:

Boom! Works! SO Great! Thank you so so very much tuanphan! Incredible!

Indeed, if you could please provide an example for how I would implement only one more of the categories in addition to this one, so I can see how to cleanly add & order the code. Reason being, I will be changing the categories, taking out the world 'Used' off of each. Then I'll be able to add all the rest of the categories myself no problem, I think?

Is there any sort of way to automate a batch changing of names of categories?

I changed the category names...took off the 'Used' portion of them. Your code that you gracefully provided still works after I modified for 'Cubicles' and not 'Used+Cubicles'. 

I applied the code to the rest of the categories, successful except that 'Tables' and 'Height Adjustments Tables' both become shown as active. AS WELL AS the categories that have the word 'Tables' in another Archive block on the page for a separate blog page, New Furniture (see attached). Is there a way to exclusively single out these similar categories? 

MANY MANY THANKS!!
 

I will explain the code & you can try it by yourself first, then if it doesn't work, let me know, I will give the code

This code doesn't 2 things

• Find all pages that contain text: /used-fu.....Cubicles in url
• A class name t-active to the body tag

This code will change the color of the category link that contains the word: "Used+Cubicles" when users on /used...Cubicles page

On 5/6/2023 at 3:18 AM, tuanphan said:

I will explain the code & you can try it by yourself first, then if it doesn't work, let me know, I will give the code

This code doesn't 2 things

• Find all pages that contain text: /used-fu.....Cubicles in url
• A class name t-active to the body tag

This code will change the color of the category link that contains the word: "Used+Cubicles" when users on /used...Cubicles page

Cool. Yea I was able to apply this successfully to the rest of the categories. Thank you!

HOWEVER, what is happening is it is highlighting other categories that have the same word. For example, for "Tables", it is identifying "Height Adjustment Tables" and changing the color of that category as well (see attachment).

How do I make it exclusively single out each category?
Thanks again.

You can change this style code to exact page url

<style>
  body.t-active a.archive-group-name-link[href*="Used+Cubicles"] {
    color: #f1f !important;
}
</style>

with Tables link, it should be

<style>
  body.t-active a.archive-group-name-link[href="/used-furniture/category/Tables"] {
    color: #f1f !important;
}
</style>

With Height Adjustable Tables, it should be

<style>
  body.t-active a.archive-group-name-link[href="/used-furniture/category/Height+Adjustable+Tables"] {
    color: #f1f !important;
}
</style>

22 hours ago, tuanphan said:

You can change this style code to exact page url

<style>
  body.t-active a.archive-group-name-link[href*="Used+Cubicles"] {
    color: #f1f !important;
}
</style>

with Tables link, it should be

<style>
  body.t-active a.archive-group-name-link[href="/used-furniture/category/Tables"] {
    color: #f1f !important;
}
</style>

With Height Adjustable Tables, it should be

<style>
  body.t-active a.archive-group-name-link[href="/used-furniture/category/Height+Adjustable+Tables"] {
    color: #f1f !important;
}
</style>

 

 

Works very well. SO great! Thank you very much for your help, and best to you in all your Squarespacing.

Cheers

Hey @tuanphan! Is it possible to do this for manually created category links on a blog page?

Trying to have the active category turn #FF33BB when on that category page, on this page here: https://armadillo-rhombus-7pce.squarespace.com/kaleidoscope - password is "hello".

Thanks for all you do!

On 6/16/2023 at 7:54 AM, PatrickJ said:

Hey @tuanphan! Is it possible to do this for manually created category links on a blog page?

Trying to have the active category turn #FF33BB when on that category page, on this page here: https://armadillo-rhombus-7pce.squarespace.com/kaleidoscope - password is "hello".

Thanks for all you do!

Try Code Injection > Footer

<script>
   if (document.location.pathname.indexOf("kaleidoscope/category/HOPE") == 0) {
    document.querySelector('body').classList.add('hope')
}
</script>
<style>
  body.hope div#block-f6c7c08928d92681dfe9 h1 {
    color: #ff33bb !important;
}
</style>

On 6/20/2023 at 12:13 AM, tuanphan said:

Try Code Injection > Footer

<script>
   if (document.location.pathname.indexOf("kaleidoscope/category/HOPE") == 0) {
    document.querySelector('body').classList.add('hope')
}
</script>
<style>
  body.hope div#block-f6c7c08928d92681dfe9 h1 {
    color: #ff33bb !important;
}
</style>

 

No luck 😬

And just a note, the links have changed - I tried updating your code to reflect the changes, so that may be what went wrong, but I couldn't figure it out.

19 minutes ago, PatrickJ said:

No luck 😬

And just a note, the links have changed - I tried updating your code to reflect the changes, so that may be what went wrong, but I couldn't figure it out.

Can you remove other code, just add above code only?

Maybe some other code conflict together

On 6/25/2023 at 12:31 AM, tuanphan said:

Can you remove other code, just add above code only?

Maybe some other code conflict together

Didn't seem to work 😬

I also unfortunately had to change the way that section was built for design purposes, so it would be different now, but it didn't seem to work even before I changed it.

On 7/13/2023 at 11:47 AM, PatrickJ said:

Didn't seem to work 😬

I also unfortunately had to change the way that section was built for design purposes, so it would be different now, but it didn't seem to work even before I changed it.

Can you duplicate the site & add me as a contributor? I can check in backend easier