Individual tag colour for tags - ghost-blog

Question

I have about six tags that I use on my blog. On the index.hbs page, I display each post in a small box, with the title, tag and author. I was wondering if there was a way to style each of those tags a different colour. For example, tag-1 would be red, tag-2 would be blue, and so on.
Here is my current code for a item on the home page—
<div class="synk-item ff-card shape-rounded bg-white shadow-mild">
<a href="{{url}}">
{{#if primary_tag}}
<p class="post-category category-product no-margin">{{primary_tag.name}}</p>
{{/if}}
<h4 class="margin-top-fixed">{{title}}</h3>
</a>
<div class="margin-top-tiny vertically-center-items">
{{#if author.profile_image}}
<img class="icon-small shape-circular margin-right-fixed show-inline " src="{{author.profile_image}}" alt="{{author.name}}" />
{{/if}}
<p class="post-author text-small show-inline">{{author}}</p>
</div>
</div>
I'd like that primary tag to have a specific colour based on the tag. Is that possible?

Answer 1

First, you'd need to assign a class. All Ghost resources (tags, posts, users) have a "slug" property, that is used in URLs and is also valid for classes.
So you would do something like this:
{{#if primary_tag}}
<p class="post-category category-product no-margin tag-{{primary_tag.slug}}">{{primary_tag.name}}</p>
{{/if}}
Then assuming you have a primary tag called "Foo Bar" and one called "Buzz", the slugs would be foo-bar & buzz, and the classes would be tag-foo-bar and tag-buzz.
In your CSS you can then setup appropriate rules. A crude example would be:
.tag-foo-bar {
background: red;
}
.tag-buzz {
background: blue;
}