Horizon Theme

	Summary	Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
	Preview	Try it out here on Meta or Theme Creator
	Repository	Horizon is part of Discourse core.
	Install Guide	There is no need to install Horizon, it is preinstalled as part of Discourse core.
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Features

Horizon offers a simple, user friendly design. We’ve focused on ensuring members can find the information they need and participate in meaningful conversations with fewer distractions.

Topic list with personalized welcome banner

Categories and Latest Topics layout

Latest topics list

Topic cards that provide just enough information

Easy reading with less visual noise

Custom color palettes for a unique look and feel

Light mode

Dark mode

Theme component / plugin compatibility

As a relatively new theme, and one that is quite opinionated in its styling, Horizon is not perfectly compatible with all theme components at this time. While we will work to ensure the most popular components are compatible with Horizon, we recommend that sites interested in extensive customization use the Foundation theme instead.

Compatible

We have tested the following features with Horizon and confirmed they work. There may be opportunity for improvement; please let us know if you have ideas for how to improve compatibility. Anything not listed here is either only partially compatible, incompatible, or not yet tested.

• Discourse Solved
• Clickable Topic
• DiscoTOC

Partial compatibility

Please let us know if compatibility with this feature is important to you; that will help us prioritize improvements to the theme component / plugin or Horizon.

• Brand Header: Compatible except when Plugin outlet is set to below-site-header.
• Category Banners: Compatible except when Plugin outlet is set to below-site-header.
• Showcased Categories: Functional, but with some spacing issues. Not recommended for use with the core welcome banner feature.
• Topic Voting: Vote count not visible on topic cards. Use Horizon: High Context Topic Cards for votes display.
• Versatile Banner: Compatible except when Plugin outlet is set to below-site-header. Not recommended for use with the core welcome banner feature.
• Welcome Link Banner: Compatible except when Plugin outlet is set to below-site-header.

Incompatible

Please let us know if compatibility with this feature is important to you; that will help us prioritize improvements to the theme component / plugin or Horizon.

• Easy Footer
• Custom Header Links

It took me a moment there to realize the new topic button had been moved away from the main area.

If the sidebar is hidden does that mean the only way to create a topic is via keyboard shortcut?

Hi, I want to disable fullwidth view, is this no longer possible?

I have two questions regarding the Horizon theme.

First, I cannot find the paintbrush icon for Theme Settings. Could you tell me where it is located and how to make it show?

Second, the display appears to be incorrect when using Chinese.

You’d need to make sure all of the horizon palettes are user selectable in the color palette area of the admin panel.

It is not possible. We’ve integrated the full width styles into the theme. We have done this for various reasons but one of them is preparatory work to bring full width setting into core.

Okay, but that’s a lot of wide space on a big screen, will the setting in the core be in the theme settings ? Will i be able to turn off the fullwidth from the settings?

The one thing that seems to bother me a lot is on the main page where the category is in the bottom right corner and the username is underneath the topic title.

I find myself visually scanning every single time to the bottom right as for me, the category is much much more important than who replied last to the topic. And also I don’t seem to see any tags, those are also more important to me than who replied last. I guess unless I know a lot of people on a forum, I don’t seem to prioritize too much who replied last.

Does anyone else feel the same way?

The reply or like icon doesn’t work. I saw a theme where you clicked on the heart and it gave you the like. The reply button went to the last page.

twitter, facebook, reddit all work this way.

It also doesn’t display the name of the user who posted it. Having to guess who posted it from the photo is kind of weird.

Is there a reason that clicking the user-avatar and name doesn’t do anything? I’d expect it to open the user-card.

I’d also love to be able to switch to showing the full name, but de-selecting prioritize username in site settings doesn’t change the field:

I recently did a PR to show full name on topic cards. I’d find it quite helpful and consistent on both views and it seems a simple check?

Hi, if i enable the sidebar in the dropdown menu, the new topic button is fixed in there is there a work around?

how to show the topics view count?

Yes, but in all topic cards / lists

Hmm… looking again, I don’t think this theme shows the views.

Thanks nolo! The PR is welcome in the theme itself. We ported the component to live inside of the theme as it is so closely related, we want to keep it all consolidated here.

@jordan.vidrine Can an option to change the color mode colors be placed into the theme settings?
Options such as:
var(–background-color)
var(–d-content-background)

This happens on both my instance and on meta.discourse.org.

When the chat window is opened, and the composer window is launched it pushes the chat box untop of the composer window as seen below:

Then when the composer is on the right side position, the chatbox is floating as shown below:

@jordan.vidrine @Discourse

Can the table of contents button be a circle instead of an oval? IMO it would seem more consistent .

some love is needed with the dropdown menu GitHub - paviliondev/discourse-dropdown-header: A theme component to add links in the header with dropdowns

or is there a discourse-supported top menu component already compatible with Horizon?

Header Submenus, perhaps ?

Can’t unstall the theme!!!

This theme is preinstalled and can not be deleted or customized

Welcome to Meta

Why do you want to uninstall it?
Isn’t it enough to disallow users to select it and to use another theme instead?

Can someone share how to enable the Horizon theme in the latest Docker release of Discourse, as it does not exist and cannot be manually installed? This is the ideal theme for personalization, which would be great for our users if we could figure out how to enable it. We are set up with the latest version 3.4.6 ( a83bd0f67b

You don’t need it because it’s recently embedded on Core. Just remove the added theme and update to the latest version.

Welcome to Meta

You are using the stable branch. I think you’ll have to wait for the next release to get the theme. It was developed after the last release, so it is likely incompatible with your current version of Discourse.
That’s the disadvantage of stable: You have to wait for new features much longer than when your forum runs on tests-passed.

I would love to have the tags on it as well, and i don’t see the “likes”, only the number of replies… I don’t understand why… Did you find a solution ?

I think it’s bug actually, looking

Hi team, thanks for the new theme option. I think it will suit our needs well.

One question - I have images for each of the categories, and these used to display on the homepage. Now they only show once you open the category. Images below for reference.

Is there a setting I’m not seeing to adjust this to show the images on the homepage?

Homepage:

On Final Design Exercise Category page.

EDIT: Looking at the console preview, it shows images in the :uploaded_logo fields, but there does not appear to be code to enable these to be shown in the css.

Related Support Request:

Thanks for all the work that’s gone into Horizon. It’s a beautiful theme with a lot of polish. That said I wanted to flag something that I think is a real UX problem: the “New Topic” button being tucked away.

On desktop, if the side menu is visible the new compose button can work, but on mobile it becomes much harder to find. I’ve heard the same reaction from others: “It took me a moment to realize where the button had gone.” This creates friction for new users and risks turning contributors into passive readers. The number one question I hear is: “How do I make a new post?”

Discourse has always shined at encouraging participation, not just passive consumption. Hiding the main action of starting a conversation undercuts that strength.

I’d love to see Horizon reconsider how prominently the “New Topic” button is surfaced, especially on mobile on the front layer without needing to press the hamburger icon so that the theme continues to be not just gorgeous but also welcoming and contribution friendly.

Thanks again for your hard work. It really shows and you’ve built something that makes the platform feel fresh. Posting because I hope this one UX choice doesn’t unintentionally discourage people from joining in.

I think this was changed recently

I have the problem that even on my 16-inch MacBook Pro, the spacing between the menu and the content is very large. Am I doing something wrong or does something need to be adjusted?

There is a max-width on the topic list content, so yes, even on a 16inch laptop, there will be extra evenly-distributed white-space on either side.

4 posts were split to a new topic: How to hide category heading on mobile

Any way to change the posts so they have this?

No, not when using Horizon. (If you mean the table layout)

If you mean the metrics themselves, activity timestamp and replies are already there. Likes and users may be supported in the future.

Can you please make it happen? It’s the only thing missing to the theme and it’s quite mandatory for the community aspect

I’m talking about the fact of seeing the number of replies, views and activity on the post and the avatars of users who replied

They are already there – it is only the additional user avatars which are not, because Horizon is uncluttered and opinionated.

That’s very sad regarding the avatars.

May you tell me how to activate the replies, views and activity on the posts then? I cannot find it.

Are you seeing these?

Oh yes that indeed.
Well I guess it’s a design choice, too bad we cannot either set it like that or like posted above.
but ok

Are there any thoughts about making Horizon full width? I find that it feels a bit constrained in the middle (corset?), and going fully would relax it nicely.

No, not planning on doing so. We are maintaining a limited width, which corresponds to optimal reading length.

Hi, I’ve tried to preview the theme, but this is all I’m seeing:

Am I doing something wrong?

I just tested (mobile though) and it works fine for me. Is there anything in the console? Or can you try a different browser to check?

Thanks @chapoi! My console:

Okay yeah I can definitely repro. I think it’s because Horizon has been moved to core probably. Will need to figure out how to fix the preview link, if at all possible. (Update: link in the OP is updated now)

That being said, you can just preview it here on Meta by switching to the theme

Thanks a lot, it works now!

2 posts were split to a new topic: Invisible Button Text on Horizon Theme

Mobile Ad Container Overflow in House Ads – RTL/LTR Layout Mismatch

Hi

I’m using the Horizon theme with the official House Ads plugin, and I’ve created a custom component to style ads using CSS variables and layout rules compatible with Discourse’s design system.

Issue: Ad container overflows viewport on mobile (both LTR & RTL)

• Theme: Horizon (not reproducible in default or other themes like Material, etc.)
• Plugin: House Ads + custom component
• Device: Mobile
• Behavior:
  • When site language = English (LTR) → left edge of .ad-container is cut off (overflows left).
  • When site language = Persian/Arabic (RTL) → right edge is cut off (overflows right).
• Expected: The ad card should be fully contained within the viewport, centered or aligned with post content width.

my css code:

:root {
  /* Core colors */
  --ad-bg: var(--secondary);
  --ad-border: var(--highlight);
  --ad-text: var(--primary);

  /* Label */
  --ad-label-bg: var(--highlight);
  --ad-label-text: var(--danger);
}


.house-creative {
  margin-left: 0 !important;
}


.house-creative a.between-posts-ad {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  font-family: inherit;
}

/* ===============================
   Card Container
   =============================== */

.house-creative .ad-container {
    direction: rtl !important;
    text-align: center !important;
margin-bottom: 20px;
      padding: 10px 5px;
     max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2));  background-color: var(--ad-bg);
  border: 2px solid var(--ad-border);
  border-radius: 10px;

  box-sizing: border-box;
  line-height: 1.7;

  color: var(--ad-text);

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.house-creative a.between-posts-ad:hover .ad-container {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.house-creative .ad-label {
    display: inline-block;       
    text-align: center;   
    margin-bottom: 6px;
     padding: 4px 12px;

  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;

  background-color: var(--ad-label-bg);
  color: var(--ad-label-text);

  border-radius: 999px;
}

.house-creative .ad-container .ad-text {
  margin: 0;

  font-size: 1rem;
  line-height: 1.9;
  color: var(--ad-text);

  direction: rtl ;
  text-align: center !important ;
  unicode-bidi: isolate;
}


@media (max-width: 480px) {
  .house-creative .ad-container {
direction: rtl !important;
text-align: center !important; 
padding: 16px 12px; 
width: 100%;
max-width: 100%;

  }
}

Horizon is not compatible with all components and plugins (yet).