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  ⬇️

@tuanphan @paul2009

This is the code I am using to colour code my blog categories:
 

/* Colour code blog categories */

a.blog-categories[href="/blog/category/Empowering+Our+People"] {
    background-color: #346bd2;
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

This is the code I am using to accomplish the same concept in the summary block:

.summary-metadata-item--cats a[href*="category=Empowering+Our+People"]{
  background-color: #346bd2;
  color: #FFFFFF;
  font-family: futura;
  font-weight: bold;
  font-size: 12px;
  padding: .4em .7em;}

For some reason, the same hex codes are showing up faded in the summary block. Is there a better way of doing this? 

1 hour ago, collgrimes said:

For some reason, the same hex codes are showing up faded in the summary block. Is there a better way of doing this?

This is because the .summary-metadata-item class has an opacity of 0.7 set. If you change this to 1, it will remove the "fade". For example:

.sqs-block-summary-v2 .summary-metadata-item {
  opacity: 1;
}

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

@paul2009 - thank you!