How to change CSS on specific tags

Developer help
1

From my humble understanding I assume we lack filters on actual CSS classes.

I wonder the best approach with less coding and/or Javascript as possible, to select specific tags.

That’s Discourse:

<div class="discourse-tags" role="list" aria-label="tags"><a href="/tag/control" data-tag-name="control"
		class="discourse-tag box">control</a><a href="/tag/distopia" data-tag-name="distopia"
		class="discourse-tag box">distopia</a><a href="/tag/realidad" data-tag-name="realidad"
		class="discourse-tag box">realidad</a></div>

data-tag-name could be used as selector to change easily CSS code with a solid and elegant method.

So, what’s I’m looking for in Ghost?

I want to display a clear differentation between #music and #posts but sharing common tags between the collections.

For instance:

<div class="item-tags global-tags">
	<a href="/tags/music/">music</a><span><a href="/tags/self/">self</a></span>
</div>

What’s your best suggestion? Handlebars can help and be used as workaround?

2

if you can edit the theme, yeah, add the slug of the tag as a class. Some themes already do this.

3

Nice, do you remember one of them?

4

Nope! Sorry, I look at a dozen themes a week, and that sort of thing doesn’t stick. :)

1 Like
5

Okay, let’s share the code:

	<div class="item-content">
		{{^if is_special}}
		<div class="item-tags global-tags">
			{{>members/visibility_label}}
			{{#if tags}}
			{{#foreach tags}}
			<a href="{{url}}" class="tag-link {{slug}}">{{name}}</a>
			{{/foreach}}
			{{/if}}
		</div>
		{{/if}}
		<h2 class="item-title"><a href="{{url}}">{{title}}</a></h2>
		{{#has any="excerpt,custom_excerpt"}}
		{{#if show_excerpt}}
		<p class="item-excerpt{{^if feature_image}} no-image{{/if}}">
			{{#if custom_excerpt}}{{custom_excerpt}}{{else if excerpt}}{{excerpt}}...{{/if}}
		</p>
		{{/if}}
		{{/has}}
	</div>

It probably could be improved but it’s a good start :v:

1 Like