The topic list doesn't need a category column

My forum is on v2.2.0.beta5 +24
Next days, categories will be displayed below titles ?
Is it possible to choose the display ?
For me anciant display is more easy to read titles and if possible I would like to keep it…

I have mixed feelings about this! On the one hand it’s always nice to simplify and I get how it didn’t make a ton of sense to have categories as its own sortable column (didn’t even realize it had been sortable, actually!)

On the other hand I agree with the several comments that the new layout makes the topic title column feel a lot more crowded than it did previously. (And on a desktop-sized screen, results in a lot of negative space in the center so feels kind of unbalanced).

My main complaint is it makes it harder / just visually more jarring to quickly scan the list of topic titles. I think @ralph1 is spot on about that. To help mitigate that, I’d definitely be in favor of both de-bolding and lightening the category names.

Personally I think I’d prefer some kind of “pseudo-column” with category still displaying to the right of the topic title, just without a column header (particularly if the box style is still an option…the emphasis / info hierarchy is really out of whack in that case). But I think any de-emphasis of categories will help a lot in bringing me around on this change :slight_smile:


I hate this. How do I change it back???

It is so hard to visually look and scroll through pages. We don’t care about categories this much. We just want people looking through all the threads.

1 Like

CSS is quite easy, in my experience :wink:

Fair enough, I’m not too worried about it & will try some tweaks for this. But of course I always like when Discourse core has the best most beautiful CSS possible so it’s one less thing for me to worry about :wink:


[Edit: Corrected the CSS to work on all categories.]
[Edit2: Needed to add “display: block;” to the container after a recent Discourse change.]

I haven’t tested this much, as I only just did it, but I made this CSS change which others may find useful, if they dislike the new topic list layout.



CSS code:

.topic-list-item .link-bottom-line {
	float: right;
	margin-top: 0.2em;
	display: block;

.topic-list-item .link-bottom-line .badge-wrapper.bullet {
	float: right;
	margin-left: 1em;

.topic-list-item .link-bottom-line .discourse-tags {
	float: right;
	margin-left: 1em;

Add it as a Component here in the Admin / Customize / Themes area:

(n.b. CSS in screenshot is an older/ version. CSS in text above is the one to use. Screenshot is just to show you where to paste it.)

(I only added for Desktop as the new stock layout probably makes sense on phones.)

And then add that Component to some or all of your Themes in the same area.


I like this change. I’ve had a setting “category badge move” in the topic list previews plugin (TLP) for a while, which made the same move. Thankfully, it’s no longer necessary :+1:.

That said, @merefield is working on a setting for TLP that adds the category column back in for those who like it. Long live pluralism!


Love this change, and the extra horizontal space meant I could increase the font size of topic titles.

No extra vertical space consumed, as I already had preview images which gave extra height. Forum after change on left, (different forum) pre-change on right


I believe a large part of why it looks more noisy than meta is your site’s category styling is the fact that it’s set to box styling.

Setting it to bullet (like it is on meta) or bar will result in significantly less color on the categories.


I believe @awesomerobot also reduced size slightly on the “box” category style by default to compensate for this, as well?


Alright I wanted to share some CSS I used to bring this back closer in line with previous behavior. Similar to the one @LeoDavidson shared above but a couple differences:

  • Only modifies the topic list for large screen widths
  • Uses absolute positioning so that the categories appear aligned left
  • A bit better handling for long topic titles

(We have lots of other CSS customizations so the specific values may need to be tweaked for a default install! Screenshots below of the before / after on our forum.)

IMO this is best of both worlds — when viewing on a large screen / browser window, it takes advantage of the space and is much easier to read the topic titles. But categories is no longer a sortable column, so still a bit cleaner than before. On narrower widths it switches to categories displaying beneath topic titles, which makes sense for the smaller size.

@media (min-width: 1125px) {
    #list-area td.main-link.clearfix {
        display: flex;
        align-items: center;
	#list-area {
	    float: left;
	    max-width: 500px;
	    line-height: 1.5em;
    #list-area .topic-list .link-bottom-line {
	    position: absolute;
	    left: 540px;
    .suggested-topics .link-bottom-line {
        float: right;
    #list-area .topic-list th, .topic-list td {
	    padding: 10px 5px;
    #list-area .topic-list span.badge-category .category-name {
	    max-width: 250px;

(EDIT: my first stab at this caused wonky behavior for the suggested topics list; should be fixed now)

Before CSS tweaks:

After CSS tweaks:


I had the same idea with the responsive windows and the width of the category, that’s why I didn’t want to use the theme component.

I used @LeoDavidson css as a base so it’s a bit different of your work. But I noticed a little issue with the topic excerpt (it was put below the category name, not below the topic title), and since I didn’t want to hide it, I did some things here and there

Since we are in the spirit of sharing, here’s my css:

@media (min-width: 960px) {
    .topic-list .link-bottom-line {
        float: right;
        margin-top: 0.250em;
    .topic-list .has-excerpt .link-bottom-line {
        margin-top: -20px;
        float: none;
    .topic-list .link-bottom-line .badge-wrapper.bullet {
    	float: right;
    	margin-left: 1em;
    	margin-right: 0.250em;
    	width: 145px;
    .topic-list .link-bottom-line .discourse-tags {
    	float: right;
    	margin-left: 1em;
    .topic-list .has-excerpt .topic-excerpt {
       padding-top: 20px;

I didn’t try yours @bts, maybe you don’t have this issue at all.

BTW, the theme component was not announced here, you can add a category column without all of these tweaks by using this : Add Category Column


Not a big fan of this change

The old topic list was more readable. I usually do a quick visual scan of the topic list when I open the site to see if there’s anything new I need to read

With this change, more vertical space is taken up by each topic (because categories are moved under the title) making at top-to-bottom reading of the topic list more interrupted (little bits of color and info that wasn’t necessary before) and requiring me to scroll the page to see the same amount of information

I think the best solution would be to de-emphasize category names altogether. Use color to indicate what category a topic belongs to; omit full category name but give user an option to see it by hovering the thread title or opening the thread

Suggested change would look something like this:

But would just omit the category name altogether.

1 Like

How would you tell categories from tags in that scenario? They would look identical under your proposed design.

1 Like

I really like the proposed category colouring on the topic list:


Some suggestions:

  • Some extra margin between the category and tags (or float tags right and category left)
  • Colour the tags
  • Use icons on the tags

Also, the bold text of the category helps distinguish it.


After checking a few forums, I have a little feedback.

Do we still need this limit on desktop?

.topic-list span.badge-category .category-name {
    max-width: 150px;

It made sense with a column, but now it seems a little short for the space we have.


Totally agree, I’ve already bumped mine up, it’s way too conservative! I have mine: max-width: 350px;

Yes agreed, we can relax that cc @awesomerobot. Another side effect of category in a column is that category names had to be relatively short.

I still don’t think they should be enormous but they can be moderate length now with no real risk.


I’ve removed the restriction from desktop entirely. Previously long category + subcategory names could break the layout fairly easily, with the new layout you really have to be looking to do it intentionally by naming a category with 50 W’s or something.


We don’t use tags and all our categories are colored the same, so maybe we are unique, but I am using OPPCSS :joy: to fix it I guess.