Change category link background to different colours

Hi!

I have managed to customise the blog meta item categories and sections so my category links appear like the below. I am really happy with them, but I now wish for them to be different colours.

E.g.

Technology - green background

Events - orange background etc.

This is the code I used for the blog page

.blog-meta-section * {
background: #f18800;
    padding: 0.15em 0.1em 0.15em 0.15em  !important;
  color: #FFF!important;
        letter-spacing: 0.8px;
      text-transform: uppercase!important;
          font-weight: 600!important;
  font-size: 1rem !important;
}

IF any one can help that would be amazing! thanks!

Try the solution in this thread:

Yes I did thanks, it only changed the link in the navigation menu! 
I've got no clue how to do it to the blog meta section and by editing with the style I already have in place

Can you share your website URL?

https://burgundy-sepia-c5lz.squarespace.com/config/pages

Are you able to help please?

What's the password?

Can I share my password privately to you?

I've just emailed it to zygmunt@squarefortytwo.com

thanks!

Do you still need help?

Yes please

Password : Sapture1234

Something like this?

https://burgundy-sepia-c5lz.squarespace.com/all-topics

Wow exactly! Yes please!

I have the category labels on the blog pages and in the summary block.

Exactly like your screenshot is what I need to do.
 

First, remove this CSS code

.blog-meta-section * {
    background: #f18800;
    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;
}

Next, add this CSS code

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;
}
/* Technology */
span.blog-categories-list a[href="/all-topics/category/Technology"] {
    background-color: #f1f;
}
/* Events */
a.blog-categories[href="/all-topics/category/Events"] {
    background-color: brown;
}
/* Women */
a.blog-categories[href="/all-topics/category/Women+in+SAP"] {
    background-color: #000;
}

Thank you so much! This has worked on the blog pages 🙂 I am so grateful!

I am now trying to do this with the summary block on the home page please.  This is the code  I have entered. But is not applying any change. 

Can you see what I am missing please?

 span.summary-metadata a {

font-size: .9rem !important;

  font-weight: 600; !important;

    text-transform: uppercase; !important;

    color: #fff; !important;

      letter-spacing: 0.8px;

    padding: 0.1em 0.15em; !important;

}

/* Technology */

.summary-metadata a[href="/all-topics/category/Technology"] {

    background-color: #f1f;

}

/* Events */

a.summary-metadata[href="/all-topics/category/Events"] {

    background-color: brown;

}

/* Women */

a.summary-metadata[href="/all-topics/category/Women+in+SAP"] {

    background-color: #000;

}

Any chance you can help me with the above please? 

Also the  style has not applied to the actual blog post page itself

With Summary, First, remove this code

.sqs-block-summary-v2 .summary-metadata * {
    font-family: itc-avant-garde-gothic-pro;
    font-size: .9rem !important;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #f80;
    color: #fff;
    letter-spacing: .8px;
    padding: 0.1em 0.5em;
    margin-right: 0.1em;
    display: inline-block;
}

Next, use this code

span.summary-metadata-item.summary-metadata-item--cats 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;
}
/* Technology */
span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Technology"] {
    background-color: #f1f;
}
/* Events */
span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Events"] {
    background-color: brown;
}
/* Women */
span.summary-metadata-item.summary-metadata-item--cats a[href="/all-topics?category=Women+in+SAP"] {
    background-color: #000;
}

Blog itself, you mean this?

Amazing!! thank you.
 Yes I mean that - blog itself - same as your screenshot 🙂
Also one final thing, any idea why the text is not vertical centred in the background padding?

5 hours ago, Ems-H said:

Amazing!! thank you.
 Yes I mean that - blog itself - same as your screenshot 🙂
Also one final thing, any idea why the text is not vertical centred in the background padding?

 

Because the font. You can change to another font, it will fix itself. Or we can set some top padding to fix by this code

/* All topics */
span.blog-categories-list a {
    padding-top: 0.4em !important;
}
/* Homepage */
span.summary-metadata-item.summary-metadata-item--cats a {
    padding-top: 0.3em !important;
}
/* blog posts */
a.blog-item-category {
    padding-top: 0.4em !important;
}

With color, remove this code

.blog-meta-item--categories a {
    background: #f18800;
    padding: 0.15em 0.5em 0.2em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

use this new code

.blog-meta-item--categories a {
    padding: 0.15em 0.5em 0.2em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
/* Technology */
a.blog-item-category[href="/all-topics/category/Feature"] {
    background-color: #f1f;
}
/* Events */
a.blog-item-category[href="/all-topics/category/Events"] {
    background-color: brown;
}
/* Women */
a.blog-item-category[href="/all-topics/category/Women+in+SAP"] {
    background-color: #000;
}

Thank you tuanphan, that works and you have been amazing help!
Sorry if I am asking too much, there is still a bit of finessing on this job which I can't work out.
 

 

 

 

 

 

1. Home page

Summary block

The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please?

 

 

2. Individual blog post page

Any idea how I can add a bit of vertical padding/spacing in-between the category box and the author and date?

 

 

On 7/6/2023 at 9:14 AM, Ems-H said:

Thank you tuanphan, that works and you have been amazing help!
Sorry if I am asking too much, there is still a bit of finessing on this job which I can't work out.
 

are are you able to help?

 

 

 

 

 

1. Home page

Summary block

The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please?

 

 

2. Individual blog post page

Any idea how I can add a bit of vertical padding/spacing in-between the category box and the author and date?

 

 

I don't see images. Can you check again

#1. Add to Design > Custom CSS

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

(default is 0.7)

#2. Use this CSS

/* space category box - author date */
.blog-meta-item.blog-meta-item--categories {
    margin-bottom: 20px;
}

Amazing thank you!!

Hi All,

I'd love to be able to achieve this but I'm not sure what I'm doing wrong, here's a screenshot for example:

I used this:

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: 800 !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;
}
.sqs-block-summary-v2 .summary-metadata-item {
    opacity: 1 !important;
}

On 6/26/2024 at 3:21 AM, ArtificialVisions said:

Hi All,

I'd love to be able to achieve this but I'm not sure what I'm doing wrong, here's a screenshot for example:

I used this:

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: 800 !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;
}
.sqs-block-summary-v2 .summary-metadata-item {
    opacity: 1 !important;
}

Can you share link to page? We can check easier