How can I change the category background in the mobile version?

[Vsekraski (Андрей)]

Hello. I can’t change the background of the category. Is there a way to do this?

[Lilly (Lillian)]

i think this may be tricky to do with horizon^[1] but something like this will work in a theme component. the color will depend on what variable you use, (eg: --tertiary-low from the color palettes for dark/light mode). you can make your own variables too and add more complexity.

in a theme component custom CSS:

@use "lib/viewport";

//** target the category id for specific category **//

.category-box[data-category-id="4"] {

// ** only apply to mobile ** //

  @include viewport.until(md) {
    .category-box-inner {
       background: var(--tertiary-low);
    }
  }
}

with the color palette you are currently using on your site:

light mode:

dark mode:

---

1. i find that horizon is a pain to customize ↩︎

[Lilly (Lillian)]

if you want to use specific colors not in the palette that will change with dark light, you can use the color definitions tab in the same component:

$bg-light: aqua;
$bg-dark: blueviolet;

:root {
  --category-id-4-background: #{dark-light-choose($bg-light, $bg-dark)};
}

[chapoi]

Just to point out:

Horizon isn’t meant to be customised.

If you want to do any customisation, the official recommendation is that you start on Foundation and use that as your base.

As explained here

@Discourse

we recommend that sites interested in customization use the Foundation theme instead.

[Lilly (Lillian)]

that’s sad because admins want to customize their sites. that’s one of the great things people like about Discourse.

Horizon theme bug: Category heading container sticky in topic lists

You just made the way forward: use custom CSS to tweak to your preferences

[chapoi]

Yes, if you can tweak it, sure, go ahead. No is saying you can’t.

But its not meant to be, so we didn’t built it with the thought to customise it easily. It’s meant as an out-of-the-box theme for people who are less technical.