Jump to content

Change category link background to different colours

Recommended Posts

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!

 

image.thumb.png.5eef318f99ca8a8ebddde946d22eabe5.png

Link to comment

Try the solution in this thread:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

What's the password?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.
 

Current css has been customised in the summary-metadata, blog-meta-item--categories, blog-meta-section.  See below:
 
 
  .summary-metadata *{
font-family: itc-avant-garde-gothic-pro;
font-size: .9rem !important;
  font-weight: 600;
    text-transform: uppercase;
    background-color: #ff8800;
      color: white;
      letter-spacing: 0.8px;
    padding: 0.1em 0.5em;
margin-right: 0.1em;
display: inline-block;
}
 
.blog-meta-item--categories a {
background: #f18800;
    padding: 0.15em 0.5em 0.2em  !important;
  color: #FFF!important;
        letter-spacing: 0.8px;
      text-transform: uppercase!important;
          font-weight: 600!important;
  font-size: 1rem !important;
 
.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;
}

Screenshot 2023-06-27 at 14.58.56.png

Screenshot 2023-06-27 at 14.57.38.png

Edited by Ems-H
Link to comment

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;
}

image.thumb.png.375f171cd884cb8a69a6965432e63906.png

image.thumb.png.19780a9221c1823d97d1eba036d68a70.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;

}

Screenshot2023-06-27at14_57_38.thumb.png.31b0b29ea15ac4c869527ff08e0f12ad.png

Link to comment

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?

image.png.3b41f438db8982a7a5c80c8e388f5b89.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?


 image.png.10315e67e57f96122154f036790cc99a.png

image.png

Edited by Ems-H
Link to comment
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?


 image.png.10315e67e57f96122154f036790cc99a.png

image.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?
image.png
 
 
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?
image.png
 
 
Link to comment
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?
image.png
 
 
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?
image.png
 
 

I don't see images. Can you check again

image.thumb.png.c9e4d695c20b06c428a5a01fb1266e77.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
My apologies, see below with images:
 
1. Home page
Summary block
The category coloured box backgrounds are slightly faded. But only on the summary block. Any idea why please?
image.thumb.png.7df457242061200f49da7f0f35b637c9.png
 
 
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?
image.png.07750c4d482b8f6de7337fba3b9f8cd7.png
 
Link to comment

#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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.