Introducing a new visual layout for themes and theme components

[hugh (Hugh Lashbrooke)]

We’re excited to announce a significant update to how themes and theme components are presented in Discourse! This update brings a more intuitive and user-friendly experience when browsing, selecting, and managing themes and theme components for your community.

What’s changed

A visual gallery experience for themes

The themes page has been completely reimagined with a more visual layout that makes it easier than ever to see what each theme looks like before applying it:

• Visual previews: Thumbnails that accurately represent each theme, either with a combination of colours from the theme, or a preview added by the theme developer.
• Better organisation: Themes are now displayed in a gallery view with relevant information readily available, making browsing and selection more intuitive.
• Quick access to details: Essential information is visible at a glance, with additional details just a click away.

Want to add visual previews to your own themes? Follow this guide.

A practical table layout for theme components

Theme components now feature a streamlined table layout designed for efficiency:

• Key information at a glance: See component details, and usage info in a clear, structured format.
• Improved sorting and filtering: Easily narrow down components based on your particular needs.
• Easy controls: Quickly control the activation of all components from a single view.

These updates are part of our ongoing efforts to make Discourse administration more intuitive and accessible, especially for non-technical users. The visual layout for themes helps you make more informed decisions about your site’s appearance, while the practical table layout for components makes it easier to extend your site’s functionality.

How to see these changes

These new pages are already live for all Discourse sites on our hosting. You can find them by going to the “Themes and components” page in your Discourse admin. For self-hosted sites, you will need to update to the latest version before you can see the new pages in action.

More improvements to come!

These new pages are just the beginning of our ongoing improvements to the theme management experience. We’re continuing to work on additional features to make theme customization even more accessible and powerful.

We’d love to hear your feedback on these changes! Reply to this topic to let us know what you think.

[darkpixlz]

I’m loving this modernization effort across the product so far! Crazy to look back where I started in 2021 with Discourse, keep it coming

[Jagster (Jakke Lehtonen)]

Perhaps this changes when there is screenshots. But more than a gallery I would really much see names.

I don’t know why and for what an admin would need galleries.

Componentside looks good, though.

[hugh (Hugh Lashbrooke)]

That is displaying incorrectly. If no screenshot is added to the theme, it should show an SVG generated from the theme’s colour palette. It should also show the theme’s name below that image. That’s what is shown in the announcement here.

Looking at this previous topic, it looks like you might have added some custom CSS for that page. Perhaps that is interfering here? It also looks like your layout is incorrect as those theme cards are displaying too widely and wrapping incorrectly.

Could you check if you have some CSS affecting this page?

[merefield (Robert)]

I thought the Theme preview pictures would be used as a smart way to show off the selected palette, but the preview image on my “Cream Theme” keeps changing?

What is the purpose of the preview image?

Using it to convey the selected colour scheme I thought was quite a nice option?

[hugh (Hugh Lashbrooke)]

While it will show a different generated image each time the page is loaded, each image is generated by the theme’s own colour palette, so it does do exactly that. It uses a few different image formats, but it always uses the theme’s palette.

Would you find it more useful if it showed the same generated image for the theme on each page reload? We considered doing that, and it is possible, so your feedback there would be helpful.

[merefield (Robert)]

Ah, great so we are aligned on intent. Let me use it a little more.

I don’t mind a bit of variety so long as each example conveys the colours with roughly equal efficacy. Thanks @hugh!

[hugh (Hugh Lashbrooke)]

Please keep the feedback coming! We have a few other tweaks and updates in the works for these pages still, so we are actively working on it all at the moment.

[merefield (Robert)]

as per @Jagster my main concern here was the addition of images for Theme Components and whilst that might be quite nice for some, the sheer number of them precludes a gallery view in my view.

The new list is an excellent change!

Perhaps an image could be supported with some kind of hover over? Dunno …

[Jagster (Jakke Lehtonen)]

@hugh

That is displaying incorrectly

Yeah, it does and safe mode shows what it should show. Strange. As I know I don’t have anything that should affect admin side, but obviously I have.

And still I’m wondering where we need a gallery. An admin isn’t window shopping, but trying to find a theme to set up. Totally dofferent thing if you guys would do some centralized theme library, similar what WordPress uses (I’m always wondered why you don’t do that).

But I’ll start digging what is messing with my setup.

Thanks.

[hugh (Hugh Lashbrooke)]

@merefield

my main concern here was the addition of images for Theme Components

Yes - the images in the theme components were initially intended to be the first iteration as we worked toward this new table-based layout. We believe this new layout is far more practical and useful and I’m glad you like it!

@Jagster

Yeah, it does and safe mode shows what it should show. Strange. As I know I don’t have anything that should affect admin side, but obviously I have.

I hope you can get that sorted out!

@Jagster

An admin isn’t window shopping, but trying to find a theme to set up.

Well, themes are inherently visual, so a visual preview of what to expect is relatively useful, and helps admins decide which theme to set up, even at this point in the process.

With this new layout, the preview will either be an image added by the theme developer, or an image generated from colours used in the theme’s colour palette. Either way, it allows admins to see a bit of a preview of what to expect before they dive in.

As you’re comparing this to WordPress, the theme library in the WordPress dashboard also has preview images like this (although their fallback is just a blank image if none is provided by the theme developer).

As for a central theme library - that’s certainly something we’ve discussed! Nothing moving forward there for the moment, but it is on our radar.

[RGJ (Richard - Communiteq)]

I LOVE THIS

A few (minor) things:

changing images

@hugh

Would you find it more useful if it showed the same generated image for the theme on each page reload

Yes, that would be better - the current implementation is REALLY confusing to people. And a feature should only be “fun” when it does not decrease clarity.

component list sorting

The filters are handy, but it would be even better if the sort column order was Enabled - Used - Name.

used by

I think this looks a bit messy where the theme name is split over two lines. Maybe the theme names could look like a label as well, with a slightly different background color to visually separate it from “Unused”?

And when I could click on a label and it would automatically filter so I would only see components used by that specific theme then it would be awesome.

But right now, it’s already very close to awesome!

[hugh (Hugh Lashbrooke)]

This is great feedback - thank you! I’m glad you like the overall layout.

@RGJ

changing images

Feedback taken, and we’ll work on this.

@RGJ

component list sorting

The filters are handy, but it would be even better if the sort column order was Enabled - Used - Name.

That’s fair, and I agree that improving the default ordering would certainly be an improvement. We’ll look into this and see what works best, but your suggestion makes a lot of sense.

@RGJ

I think this looks a bit messy where the theme name is split over two lines.

Thanks for highlighting this - your suggestion sounds interesting! We’ll investigate the best way to improve this display.

@RGJ

filter so I would only see components used by that specific theme

We discussed adding a filter for themes like this to the top of the page, which will likely add soon, and having it do the same filter when clicking on the theme name in this column would be a neat addition. Definitely something we’ll look into.

Thanks for all this - expect more improvements to come!

[Jagster (Jakke Lehtonen)]

@hugh

I hope you can get that sorted out!

I’m so hopelessly stupid sometimes

The CSS-snippet that fixed the very first and unfortunate attemp to use a gallery view for components… well, now it broke the theme side.

No need to use anymore

.admin-config.customize {
  .admin-detail {
    padding: 0;
  }
  .themes-cards-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 0;
  }
  .admin-config-area-card__content {
    flex-grow: 0;
    margin: 0;
    padding: 0;
  }
  .theme-card {
    flex-direction: row;
    margin: 0;
    padding: 0.75rem 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--primary-low);
    &__image-wrapper,
    &__content {
      display: none;
    }
    &__footer {
      gap: 1rem;
    }
  }
  .theme-install-card {
    margin-top: 1rem;
  }
}

I think I should remove these comments. Not helping, just polluting the topic.

[hugh (Hugh Lashbrooke)]

Glad you found the issue!

No worries about deleting the comments - we’re all learning together here