Category List with Banners

[Arkshine]

Hi, welcome

You can add CSS in your themes or a separate theme component:

@nolo

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example, assuming you want to add an image to the category ID 4, you would do something like that:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

This is just an example. For more information, you can look at the background CSS properties.

Also helpful links :

Make CSS changes on Your Site

Want to make some CSS changes on your Discourse site but not sure where to start? You’ve come to the right place! You only need to read this topic if you’re very new to CSS. If you already know how to write and add CSS to your Discourse site, then you will most likely not need to read this topic. We’ll cover a few subjects. We’ll start with a brief introduction of what CSS is and some terms that you need to know. We will then move on to how you can add CSS to your Discourse site. Final…

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …