Individual tag colour for tags

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