coloured category boxes for blog

Hi

I want to create buttons around the blog categories at the top of each blog post as well as the main blog page on my site. Each category needs a different colour background. I have managed to do this in the summary block (elsewhere on the site) but not on the blog page itself.

I would also like to remove the comma between the categories. Is this possible?

Below is the code I have used for one of the categories.

.summary-metadata-item--cats a[href*="category=health"]{
  background-color:#F4F7DE;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 400;
   padding: .4em .7em;}

Any help I can get would be great!

Many thanks 🙂

Please share a link to the page.

https://keyboard-maracas-aats.squarespace.com/blog/category/calm

Password: Talya

13 hours ago, trs27 said:

https://keyboard-maracas-aats.squarespace.com/blog/category/calm

Password: Talya

You can use this CSS code

a.blog-categories[href="/blog/category/calm"] {
    background-color: #f1f5f8;
    padding-left: 5px;
    padding-right: 5px;
}
a.blog-categories[href="/blog/category/health"] {
    background-color: #f8f9e9;
    padding-left: 5px;
    padding-right: 5px;
}

20 hours ago, trs27 said:

I would also like to remove the comma between the categories.

You can remove the commas with the following CSS:

/* Hide commas in blog categories */
.blog-categories--comma {
  display:none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️