Change category link background on blog and summary block to different colours

I'm not able to change my category blocks on my blog posts and summary blocks to different colours, i followed a similar thread and copied the CSS and adjusted it accordingly but it still didn't work.

I tried this, but nothing changed, I'm wondering if its because I'm using a single column blog style?

a.blog-categories[href="/blog/category/Ongoing"] {
    background-color: #0CC0DF;
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

span.blog-categories-list a {
    padding: 0.15em 0.1em 0.15em 0.15em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
/* Ongoing */
span.blog-categories-list a[href="/all-topics/category/Ongoing"] {
    background-color: #0CC0DF;
}
/* Completed */
a.blog-categories[href="/all-topics/category/Completed"] {
    background-color: #0CC0DF;
}

10 hours ago, ArtificialVisions said:

I'm not able to change my category blocks on my blog posts and summary blocks to different colours, i followed a similar thread and copied the CSS and adjusted it accordingly but it still didn't work.

I tried this, but nothing changed, I'm wondering if its because I'm using a single column blog style?

a.blog-categories[href="/blog/category/Ongoing"] {
    background-color: #0CC0DF;
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

span.blog-categories-list a {
    padding: 0.15em 0.1em 0.15em 0.15em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
/* Ongoing */
span.blog-categories-list a[href="/all-topics/category/Ongoing"] {
    background-color: #0CC0DF;
}
/* Completed */
a.blog-categories[href="/all-topics/category/Completed"] {
    background-color: #0CC0DF;
}

What is the website URL?

https://choucaircapital.squarespace.com/config/

Dinosaur452

On 6/27/2024 at 2:12 AM, ArtificialVisions said:

https://choucaircapital.squarespace.com/config/

Dinosaur452

https://choucaircapital.squarespace.com/?noredirect

You can use this CSS code

span.summary-metadata-item [href*="category=Ongoing"] {
    background-color: #0CC0DF;
    color: #FFFFFF !important;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}
span.summary-metadata-item.summary-metadata-item--cats {
    opacity: 1 !important;
}

Perfect thank you!