🌅 Introducing Horizon, our newest theme

For the past few months, we have been hard at work on our newest Discourse theme, Horizon, and today we’re excited to share our work with you and invite you to try Horizon in your community.



In this topic, we’ll share about Horizon and walk you through installation.

:sun: All about Horizon

Horizon is a simple, beautiful theme designed to provide a great user experience for communities without extra effort on the admin’s part. The name reflects our hope that this theme expresses a more expansive vision for who can use Discourse and how Discourse communities can look.

Light mode

Dark mode

:woman_shrugging: Why did we build Horizon?

We built Horizon to make it easier for anyone to start a Discourse community and proudly share it with their members.

In speaking with Discourse admins, we’ve learned that one of the most important parts of starting a community is modifying its appearance to make sure it’s a welcoming, enjoyable space for community members. Horizon makes it possible to have a great looking community without additional effort or customization.

:mirror: Who is Horizon for?

Horizon is designed for communities that don’t have the expertise or resources to customize Discourse’s appearance.

We are proud of how flexible and customizable Discourse is — and that’s not changing! But we believe that more Discourse in the world is a good thing, and that the best way for us to do that is by making it easier for less tech-savvy communities to thrive with our product.

:magic_wand: What makes Horizon special?

Where Default is a blank slate, Horizon has opinions. It values spaciousness, simplicity, and modern design aesthetics.

To see the difference, use the theme toggle at bottom of the sidebar here on Meta to switch to Horizon:

Here’s some of what you’ll notice that’s different about Horizon:

  • Less information density. The most noticeable feature of Horizon is the topic card, which is slimmed down from the standard table view to make it feel more approachable and simple. Certain information, like extensive details about topic participants, tags, and assigned users, are not visible.
  • Larger text and more space. Beyond the topic card, we’ve brought a greater degree of space into Horizon by increasing base font sizes in the reading area and incorporating a full-width structure.
  • Built to be used as-is. Communities that want extensive control over the site appearance or have very particular design requirements can and should continue to work off of our Default theme or create their own theme to best serve their needs. While we’ve tested Horizon against the most popular official theme components and found only minor incompatibilities, we do not recommend adding unofficial components or other custom code to Horizon.

:gear: Using Horizon

You can enable Horizon for your members in just a few steps:

  1. Go to the :wrench: Admin area, go to the Appearance section, and click Themes & components.
  2. Find the Horizon theme card, click the button, and select Set as active to make Horizon your community’s new default theme. (You may need to refresh your screen to see this change take place.)

You may optionally enable any of the new color palettes, which are built specifically to work well with Horizon.

Instructions on configuring color palettes.
  1. Click Color palettes in the admin sidebar.
  2. Select the desired color palette (e.g., Horizon).
  3. Check the Color palette can be selected by users setting, and then click the check mark to confirm.
  4. Repeat steps 2-3 for any palettes you want to use.

After refreshing, you’ll see a paintbrush in the bottom of the sidebar. You can click that to choose your specific color palette for Horizon (shown in the screenshot above). Your members can do the same to choose between any palettes you’ve enabled. To set the new default palette for Horizon (i.e. how Horizon looks before members have made any changes and for anonymous visitors):

  1. Go to Themes & components in the admin area.
  2. Find the Horizon card and click Edit.
  3. Change the Color Palette field to your desired default.

:crystal_ball: What’s next for Horizon

We’re just getting started! We’ve worked hard on this first version of the theme, but expect to continue investing in Horizon and improving it over time. We’ll actively seek feedback from sites that use Horizon in order to keep making it better, and hope one day soon to make it the default theme that ships with Discourse sites.

:folded_hands: Thank you

We are so grateful to everyone who supported Horizon (and the Discourse team!) by testing Horizon out here on Meta or by participating in our beta testing. This feedback was invaluable in helping us find bugs, make adjustments, and polish the overall experience of Discourse on this theme. Thank you so much for your time, feedback, and support!

36 Likes

This looks awesome! I really want to give it a go.

But there’s no route for /admin/customize/themes/1/common/*/editcustomization. Can you please add it? I’m using it to provide special headers and other customization independently of the chosen theme.

Thank you!

Oops, sorry I should have posted to Help us test Horizon, our newest theme.

1 Like

Why don’t you create a new theme component where you make changes and add that to the horizon theme?

1 Like

Did I miss it or has Horizon not been added to Crowdin for translation? Shall I create a pull request with the translations instead?

Horizon is primarily built to be used as-is, so direct customizations or customizing via unofficial components are not recommended. That said, I’d love to learn more about what you’d like to change about Horizon to see if it could be a good candidate for us to incorporate more directly into the theme.

I’m looking into this, I’ll follow up soon!

1 Like

Actually it’s just a header to link the forum to a Fediverse account (and a <noscript> tag to do the same in the footer).

I put the theme component code here: https://git.z7l.eu/ps/discourse-lire.im

See the rationale for Mastodon.

This looks great!! I assume the theme won’t be compatible with custom components we’re currently using? Ex.:

1 Like

Continuing the discussion from Help us test Horizon, our newest theme:

This didn’t work for me on mobile (iPhone 11 Pro Max). I guess it might be because I’ve increased font size in my phone settings.

This theme is wonderful, thanks for your work!

I wonder how to keep forked horizons updated? We have some custom modifications to keep :slight_smile:

1 Like

Create components and add to theme to customise

4 Likes

Long term our goal is for our official components to all work well on horizon, for custom work as a customer feel free to contact @team to see if we can help you out (may require some paid custom work)

2 Likes

I want to create a user select-able option for this theme so that I can add the theme component which will modify this theme. I want the users to be able to select the Horizon theme as-is or be able to select its variation.

The variation of this theme will be full width. It will also style the CSS of individual post rows to bring content up in the visual hierarchy than other elements on the page like scroll bar, new and unread topics at the bottom etc.

Horizon looks really great but it still does not solve the problem of information density on topics page. Its visually overwhelming for people coming from other traditional forum software.

My comments may not be relatable to native discourse users but I am bringing an outside view. I have to make these changes for my community at least.

1 Like

I found a little bug here, in the groups display, where there can be an overflow:

It can be alleviated by adding CSS:

.group-box-inner {
	overflow: auto;
}
1 Like

Is it intentional that there is so much space between the navigation bar and the content?

2 Likes

No, I don’t think that is expected. Perhaps a component interfering with this :thinking:?

I think it is atm, my guess is that this is a cropped screenshot of an ultra wide full screen browser

2 Likes

Totally loving this theme, but seems like the Search Banner component isn’t playing too nicely with it. The search_banner.subhead text isn’t showing, causing it to look unaligned. There also a faint grey line

Update:
I disabled the Search Banner and the built-in welcome+search looks better. However, I get this sub-header text in the screenshot below.

Furthermore, the bookmarks link on the home page says I don’t have any bookmarks yet even though I do. It links to /bookmarks instead of /u/johndoe/activity/bookmarks

It is indeed a widescreen. However, the large amount of empty white space is distracting. Is it possible to adjust this?

Thanks for letting us know about this - I’ve asked someone from design team to have a look at the issue.

4 Likes

Had reported this almost a month ago but..