# Lightweight Topic List Container

**URL:** https://meta.discourse.org/t/lightweight-topic-list-container/239206
**Category:** Theme component
**Created:** [September 16, 2022, 12:31pm UTC](https://meta.discourse.org/t/lightweight-topic-list-container/239206 "2022-09-16T12:31:42Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![traceymoko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/traceymoko/32/483235_2.png) [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [September 16, 2022, 12:31pm UTC](https://meta.discourse.org/t/lightweight-topic-list-container/239206/1 "2022-09-16T12:31:43Z")

</div>

Having a box for the main topic container is pretty on-trend at the moment, but I didn’t want a fully-fledged theme with everything else.

So I’ve made a theme-component. Now you can piece together parts as you like. 👌

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/c/a/0caa2071a69466d411f37b3185a0672fe6a28587.png)

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Lightweight outline for the main topic list container |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/bloomexperiment/main-container) |
| 🛠 | **Repository** | [GitHub - tracey-le/discourse-lightweight-topic-container: Lightweight main outlet container for Discourse · GitHub](https://github.com/t1-tracey/discourse-lightweight-topic-container) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

### Description

This adds a box shadow and some spacing for the main container. It applies to the topic list, main container in admin dashboard, etc.

### Settings

You can set a background color with the `background color light` and `background color dark` settings.

### Extensibility

You can also target the `background-container` in another theme component.

e.g. You can add a gradient.

```css
.background-container {
  background: linear-gradient(180deg, var(--header_primary-high) 0%, rgba(137, 160, 210, 0.7) 100%);
}

```

### Credits

Thanks to @awesomerobot and @jsthon for code in [A Graceful theme for Discourse](https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040)

(in that theme credits I was tmoko, haha.)

### Feedback

Any constructive feedback on best practices in CSS would be much appreciated.  
e.g. how to best handle dark/light, padding/margins, etc.

### Links

> **['Lightweight Topic Container' by @bloomexperiment](https://discourse.theme-creator.io/theme/bloomexperiment/main-container)**
>
> A customization for Discourse shared on Discourse Theme Creator

[https://github.com/t1-tracey/discourse-lightweight-topic-container](https://github.com/t1-tracey/discourse-lightweight-topic-container)