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.
You’d have to override the handlebars template for the topic list items as well as the topic list header (see Developer’s guide to Discourse Themes )
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.
<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>
8 Likes
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
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?
Right
In CSS the . denotes class, so you’d do
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: Cascading Style Sheets | MDN)
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:
td.tags {
width: 100px;
}
4 Likes
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 
Is the theme enabled? Did you refresh the topic list after adding the scripts?
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.
3 Likes
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
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:
<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: Who's Online Plugin (discourse-whos-online)
4 Likes
Good News: it technically worked.
Bad News: everything got thrown in a blender 
(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.
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
<th>Tags</th>
list/topic-list-item.raw
<td class="tags">
{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
</td>
Does that make sense?
2 Likes
I believe I’ve already done that. Those two code segments were part of the two templates already, if I’m not mistaken.
You are using the templates from core Discourse.
TLP has overridden those core templates here and here.
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)
Then add the elements highlighted here where they were positioned in the original core code that was posted.
5 Likes
Incredible, it worked! How would you stack each tag on top of each other, if possible?
Ex:
#tag1#tag2
instead of:
#tag1 #tag2
1 Like
Try:
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.
3 Likes
@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 
4 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.