# How to have a Tag Column?

**URL:** https://meta.discourse.org/t/how-to-have-a-tag-column/112273
**Category:** Support
**Created:** [March 21, 2019, 5:30pm UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273 "2019-03-21T17:30:53Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 21, 2019, 5:30pm UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/1 "2019-03-21T17:30:53Z")

</div>

Hi,

How can there be a column on the homepage where it lists the tags used (if possible: if more than one, they’ll be stacked upon each other)? Thanks.

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/4/f4d31425b3cec2296493fdcbd789224b2dfee4f7.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 21, 2019, 5:46pm UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/2 "2019-03-21T17:46:29Z")

</div>

You’d have to override the handlebars template for the topic list items as well as the topic list header (see [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648) )

Adding this to `admin > customize > themes > edit HTML/CSS > desktop > </head>` gives you something to start with. You’ll need to add custom CSS to style as you see fit.

```plaintext
<script type="text/x-handlebars" data-template-name="topic-list-header.raw">
    {{#if bulkSelectEnabled}}
      <th class="bulk-select">
        {{#if canBulkSelect}}
          {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
        {{/if}}
      </th>
    {{/if}}
    {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
    {{#if showPosters}}
      {{raw "topic-list-header-column" order='posters'}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
    {{#if showLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
    {{/if}}
      <th>Tags</th>
    {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
    {{/if}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
    {{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">
    {{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

{{!--
  The `~` syntax strip spaces between the elements, making it produce
  `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
  with no space between them.
  This causes the topic-post-badge to be considered the same word as "text"
  at the end of the link, preventing it from line wrapping onto its own line.
--}}
<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{#if showPosters}}
  {{raw "list/posters-column" posters=topic.featuredUsers}}
{{/if}}

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="tags">
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
</td>

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

{{raw "list/activity-column" topic=topic class="num" tagName="td"}}

    
</script>

```

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 21, 2019, 11:52pm UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/3 "2019-03-21T23:52:11Z")

</div>

Hi Kris, thank you for the help.

Before I get into this, I sincerely apologize for my ineptitude. Well, I was digging through the code and saw

> [@awesomerobot](#):
>
> \<td class=“tags”\> {{discourse-tags topic mode=“list” tagsForUser=tagsForUser}} \</td\>

I figured this is the column for tags. So I tried adding this CSS but nothing happened.  
`td.class { .tags { display: default } } `

Why isn’t this working?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 22, 2019, 12:01am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/4 "2019-03-22T00:01:41Z")

</div>

> [@nexo](#):
>
> I figured this is the column for tags.

Right

> [@nexo](#):
>
> So I tried adding this CSS but nothing happened.  
> `td.class { .tags { display: default } }`

In CSS the `.` denotes class, so you’d do

```scss
td.tags { // This means "td with the class 'tags'"
 // Styles go here
}

```

`display: default;` doesn’t actually mean anything, `default` is not a valid value for `display` (there are a lot of possible values though [display CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display))

What are you trying to do with CSS here?

The code above when added to a theme should put tags in a separate column, but the column is unrestricted so if there are many tags it will be very wide. One thing you might want to do is add CSS to limit the width… you’d do that like this:

```scss
td.tags {
  width: 100px; 
}

```

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 12:12am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/5 "2019-03-22T00:12:26Z")

</div>

Thanks Kris.

I placed the script into `</head>` of Desktop and I placed `td.tags { width: 100px; } ` in CSS. Yet, I don’t see a new separate column for tags 🤔

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 22, 2019, 12:54am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/6 "2019-03-22T00:54:18Z")

</div>

Is the theme enabled? Did you refresh the topic list after adding the scripts?

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 1:04am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/7 "2019-03-22T01:04:35Z")

</div>

[![Image from Gyazo](https://global.discourse-cdn.com/meta/original/3X/0/0/00d6a87bbcd03a82d8f72567d0ced04c5b5ca336.gif)](https://gyazo.com/b52fd0ad1bfc26904dd34147802f3033)  
Yes, the theme is enabled.

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/e/ded468cd101906ca47604cfd4e91f5bfe2d8510e.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 22, 2019, 1:09am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/8 "2019-03-22T01:09:38Z")

</div>

Ah, are you using a plugin (looks like topic list previews)? it’s probably overriding the template too… so it’s overriding anything you do in a theme. You’d have to edit the template in the plugin.

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 1:17am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/9 "2019-03-22T01:17:28Z")

</div>

Ah, yes I am using that plugin. I’ll see if I can do what you said… There isn’t a way to overlap the plugin?  
Also are you sure it’s because of the plugin? Because I disabled it through the settings to check, and the column still doesn’t appear

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/3/53dd5bb22d8867f7bf1ee5d114dc7beabe4572e6.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 22, 2019, 1:27am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/10 "2019-03-22T01:27:13Z")

</div>

I think there’s a way to override plugin templates with a theme component. I haven’t tested this, but try replacing the two script tags in the code that @awesomerobot shared with these:

```plaintext
<script type="text/x-handlebars" data-template-name="javascripts/topic-list-header.raw">

<script type="text/x-handlebars" data-template-name="javascripts/list/topic-list-item.raw">

```

Based off of this post: [Discourse Who's Online - #186](https://meta.discourse.org/t/whos-online-plugin-discourse-whos-online/52345/186)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 22, 2019, 1:28am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/11 "2019-03-22T01:28:51Z")

</div>

I’m pretty sure, this is what it looks like for me without any plugins or themes installed.

 ![20%20PM](https://global.discourse-cdn.com/meta/original/3X/6/d/6d6cfae006a5d9d5a860706ee53d66df926172aa.png)

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 1:40am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/12 "2019-03-22T01:40:27Z")

</div>

Good News: it technically worked.  
Bad News: everything got thrown in a blender 😅

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/1/71f004ed8f8b401a662b230ea20bf7cf41d9e0f4.png)  
(it looks like this with TLP both enabled and disabled)  
The Topic List Preview isn’t doing its job anymore and the spacing got smaller again (Originally, I edited the spacing between topics to be wide). From what I see, some of the things I edited/hid with CSS got disregarded with the script.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 22, 2019, 1:45am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/13 "2019-03-22T01:45:28Z")

</div>

Ah yeah, you will need to copy/paste all the code from those two TLP templates and then add the code below to the relative place in the templates:

**topic-list-header.raw**

```plaintext
<th>Tags</th>

```

**list/topic-list-item.raw**

```plaintext
<td class="tags">
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
</td>

```

Does that make sense?

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 1:57am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/14 "2019-03-22T01:57:18Z")

</div>

I believe I’ve already done that. Those two code segments were part of the two templates already, if I’m not mistaken.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/e/1e8bfbb336707983fb6599758489add753169e48.png)

![image](https://global.discourse-cdn.com/meta/original/3X/e/5/e52f4d67f19626cd115ea0c078707a59b50c314c.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 22, 2019, 2:08am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/15 "2019-03-22T02:08:43Z")

</div>

You are using the templates from core Discourse.

TLP has overridden those core templates [here](https://github.com/angusmcleod/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/topic-list-header.raw.hbs) and [here](https://github.com/angusmcleod/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs).

You would need to take the code from those TLP templates and add each set of template code to its respective script tag (mentioned [here](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/10))

Then add the elements highlighted [here](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/13) where they were positioned in the original core code that was posted.

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 2:56am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/16 "2019-03-22T02:56:48Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/0/e/0ecdb355b15eef5f3deef198856cf1b40746a316.png)  
Incredible, it worked! How would you stack each tag on top of each other, if possible?  
Ex:  
`#tag1`  
`#tag2`

_instead of:_  
`#tag1 #tag2`

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 22, 2019, 3:06am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/17 "2019-03-22T03:06:02Z")

</div>

Try:

```css
td.tags .discourse-tags {
  display: flex;
  flex-direction: column;
}

```

Also, I imagine you will want to remove the default tag placement under the topic title. Look for the first occurrence of `{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}` in the template.

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [March 22, 2019, 3:28am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/18 "2019-03-22T03:28:44Z")

</div>

@awesomerobot @tshenry Thank you both sooooo much! I really learned a lot today and it wouldn’t have been possible without both of your generous efforts. Thank you, again. Have a great night ❤

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 21, 2019, 3:28am UTC](https://meta.discourse.org/t/how-to-have-a-tag-column/112273/19 "2019-04-21T03:28:52Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.