Is it possible to re-order the topic list columns (Front Page)?

Dev
1

Hello,

Is there any way to reorder columns as shown in the screenshot below?

columns
columns1131×554 63.8 KB

Note: I switched the order of elements (users first instead of topics) on my browser and changed a few properties on Mozilla’s installation to get the above.

Why:
It always feels weird (to me) whenever I have to look to the far left to read a list of items on websites. I find content that’s a bit centered easier to digest but that could be a weird personal quirk.

I would appreciate pointers on the best way to go about it;

  • Is there a way to do it from discourse settings?

  • changing the order directly from discourse source code?

  • Develop a new front page design entirely (a la wordpress themes)?

  • CSS only?

  • ???

2

There’s no way to do this with the settings, and if you directly edit the source of Discourse you’ll lose progress whenever you update.

I think there are two ways this could work, both of these require using a theme so you can upgrade Discourse without losing your work:

  • CSS only: It wouldn’t be a completely trivial task because you’d be editing how the table layout works. The way I would approach it would be by defining each row in the table (tr) as a flex item, you’d then be able to order the cells in the row (td) by using the order property of flex box.

  • Overriding the topic-list template. This is quicker to do, but would likely require more ongoing maintenance to keep up with updates. You can take a look at this theme here to get an idea of how it works: Sam's personal "minimal" topic list design. Specifically, this file in that theme takes the core Discourse topic-list template and overrides it.

8 Likes
3

Thanks @awesomerobot

I think I can work with overriding the template.

4

please tell me how did you change the position of Users column and moved it to the left?