The discussion revolves around reordering columns in the topic list on the Discourse front page. ibee asks if it’s possible to rearrange the columns, such as moving the ‘Users’ column to the left, for better readability. awesomerobot explains that this cannot be done through settings and that direct code edits would be lost during updates. They suggest two solutions: using CSS with flexbox to reorder table cells or overriding the topic-list template via a theme. ibee expresses interest in the template override method. yekta then asks for details on how to move the ‘Users’ column.
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)?
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 Simple Theme. Specifically, this file in that theme takes the core Discourse topic-list template and overrides it.
