Lightweight Topic List Container

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. :ok_hand:

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.

.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

(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

2 Likes