# Modernizing our Topic List HTML - preparing themes, components and plugins
**URL:** https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654
**Category:** Announcements
**Tags:** new-feature
**Created:** [November 19, 2021, 6:19pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654 "2021-11-19T18:19:22Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 19, 2021, 6:19pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/1 "2021-11-19T18:19:22Z")
Our topic list markup has been largely unchanged since the Discourse project began. To take advantage of the latest web technologies, we’re planning some changes which will improve the theming potential of Topic Lists.
To make the transition as smooth as possible, we’ll be making these changes step-by-step, and hope the migration to be completed some time in Q1 2022.
## ✅ Step 1: Updating CSS selectors
We’ve [recently added](https://github.com/discourse/discourse/commit/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e) `.topic-list-header` , `.topic-list-body` and `.topic-list-data` classes to begin the transition.
- `thead` now has a class of `topic-list-header`
- `tbody` now has a class of… you guessed it! `topic-list-body`
- `td` elements now also have `topic-list-data` classes attached to them as well
For the vast majority of sites, this change will be totally seamless. However, complex themes/plugins which override our core templates will need some updates.
#### Updating existing template overrides
If possible, we recommend that you remove template overrides and use a combination of CSS and plugin outlets for customization. If removing the overrides isn’t an option, then you will need to manually update your overrides to include the new classes.
The templates that have had classes added to them are:
- [`/templates/components/topic-list.hbs`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs)
- [`/templates/list/category-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/category-column.hbr)
- [`/app/templates/list/posters-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr)
- [`/app/templates/list/posts-count-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr)
- [`/app/templates/list/topic-list-item.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr)
- [`/app/templates/topic-list-header-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr)
- [`/app/templates/topic-list-header.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr)
## 🔲 Step 2: Changing element types
The next step in this process will be to convert the existing `table` elements, into more suitable elements.
#### Preparing custom stylesheets targeting `table` elements
For now, you should remove any references to `table` , `thead` , `tbody` , `tr` , `td` from your custom stylesheets, and replace them with the new classes. Then, when we eventually change the element types, your custom theming should continue to work without a hitch.
We’re excited to see what our community of theme and plugin developers will be able to build following these changes! 🥳
---
### Author:  [@dfabulich](https://meta.discourse.org/u/dfabulich)
#### Post date: [November 19, 2021, 8:06pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/6 "2021-11-19T20:06:36Z")
> [@jordan.vidrine](#):
>
> To take advantage of the latest web technologies, we’re planning some changes which will improve the theming potential of Topic Lists.
Can you share a little more about what’s happening here?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 19, 2021, 8:16pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/7 "2021-11-19T20:16:34Z")
The tl;dr is that we’re not going to be using the HTML `table` element for topic lists any more, they behave in some odd ways that aren’t great if you want to make significant changes with CSS.
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [November 19, 2021, 9:18pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/8 "2021-11-19T21:18:59Z")
This is huge - I’m so excited to move away from tables. It’ll allow much more flexible and simple theming across topic lists. 😍
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [November 19, 2021, 10:04pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/9 "2021-11-19T22:04:58Z")
This is an excellent change, because Ember does not allow (afaik) dynamic swap out of tags, e.g. `` or `` to `` using bindings, unlike classes, which it thankfully does!
That means if a `
` is in the root of a component template, you are kind of stuck with it unless you override the entire thing, which would otherwise be a bit of an unnecessary overkill.
In short, I APPROVE! 😍
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 7, 2021, 5:48pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/10 "2021-12-07T17:48:51Z")
thanks for introducing these changes! just double-checking before I adjust declarations..
the markup is:
```plaintext
|
|
|
```
and respective classes are/will be:
```plaintext
.topic-list
.topic-list-header
(tr will be dropped here?)
.topic-list-data
.topic-list-body
.topic-list-item
.topic-list-data
```
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [December 7, 2021, 6:05pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/11 "2021-12-07T18:05:58Z")
Yep, this all looks correct 👍
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [January 14, 2023, 8:08pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/13 "2023-01-14T20:08:58Z")
> [@jordan.vidrine](#):
>
> The next step in this process will be to convert the existing `table` elements, into more suitable elements.
Is there any update on this? I’d love to be able to better style the topic lists.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 17, 2023, 6:50pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/14 "2023-01-17T18:50:14Z")
Unfortunately this had been put on the back burner for quite some time to make time for other pressing items at Discourse. It’s something I plan on picking up again in the coming weeks though!
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [February 3, 2025, 12:42pm UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/15 "2025-02-03T12:42:20Z")
|