Jump to content

Colour coding blog post "card"

Go to solution Solved by jpeter,

Recommended Posts

  • Solution

@JoshA You can use the following CSS below. This adds CSS variables to the blog-item container and then uses them in the category-* classes that is set on each "card". 

CSS

.blog-item {
  --pamphlet: red;
  --report: blue;
  --definition: green;
  --imagination-lab: pink;
  --declaration: black;
  --article: gray;
  --data-study: tomato;
}

.category-pamphlet { background-color: var(--pamphlet) !important; }
.category-report { background-color: var(--report) !important; }
.category-definition { background-color: var(--definition) !important; }
.category-imagination-lab { background-color: var(--imagination-lab) !important; }
.category-declaration { background-color: var(--declaration) !important; }
.category-article { background-color: var(--article) !important; }
.category-data-study { background-color: var(--data-study) !important; }


Screenshot

Here's a screenshot of Chrome dev tools open. You'll notice that each card has a class set based on the category in with the following  format, "category-*" .

image.thumb.png.9ebf9eb53ff83e4119e5edc2e420e747.png

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.