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 
5 Likes
[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.
Before:
After:
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.
11 Likes
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 
.
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!
4 Likes
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
3 Likes
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.
7 Likes
I believe @awesomerobot also reduced size slightly on the “box” category style by default to compensate for this, as well?
4 Likes
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 span.link-top-line {
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:
7 Likes
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
6 Likes
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.
3 Likes
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.
6 Likes
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.
5 Likes
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.
10 Likes
We don’t use tags and all our categories are colored the same, so maybe we are unique, but I am using OPPCSS 
to fix it I guess.
Was there a specific reason why the column was removed - specifically, is the team planning to utilise that space for something else?
If not, like many others, I preferred the older version.
Currently the page seems barren with the centre of the page very under utilised. It also impacts the feel of the page - what felt dynamic and interesting now feels somewhat boring and lacklustre. The category colour also served a very good useful purpose - a user can quickly scan down the page and see which topics they might be interested in because category colours are (if used correctly) part of the taxonomy system. They could easily be used as an indicator (particularly in the box style) while looking down the page.
As I mentioned in my post that was moved to a separate thread - this change in conjunction with something to utilise that space would be awesome, but without it, it is unfortunately not so great.
There are no behind the scenes plans. All the thoughts we’ve had about the change have already been discussed in this topic. The primary drivers behind the change are reducing the number of columns and increasing consistency of how titles and their metadata are displayed throughout the platform.
9 Likes
It definitely frees a lot of space in the centre of the browser.
I’m using Layouts Plugin - #220 by exetico plugin to display some custom html in a sidebar. You should consider the same. It reclaims the space and uses it well.
2 Likes
Thanks for clarifying 
Why? Were the number of columns causing some sort of issue previously? (I don’t get to read all the threads here unfortunately so may have missed the discussion on this). If the fact that it was sortable was an issue, why not just remove that functionality?
I don’t think the goal needs to be attempting to make all platforms carbon copies of each other, but rather to maximise what each platform has to offer while ensuring that each platform is recognisable as part of the same family. This was not violated with the previous version - you could instantly tell it was Discourse.
Unfortunately the new version sacrifices the optimal user experience of the desktop version, needlessly. The fact that users of @Emerald_Teas’s forum started a thread thinking it was a bug is a good sign it is unfortunately not a desirable change.
On reflection, when you go to forum’s like @Emerald_Teas, do you still think it’s a good fit? Unfortunately the box style is pretty much unusable now, and the bar version isn’t working so well either.