Archived May, 2026.

Horizon Theme

Discourse


	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 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.

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

❤️ 25:star_struck: 4👍 1:chefs_kiss: 1👏 1

Stephen

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?

❤️ 2:chefs_kiss: 1

digitaldominica

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

joo

I have two questions regarding the Horizon theme.

chrome_2025-04-14_01-11-27

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.

❤️ 1

jordan.vidrine

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

❤️ 1

jordan.vidrine

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.

❤️ 1

digitaldominica

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?

❤️ 1

jimkleiber

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?

❤️ 7

Eduardo_Braga

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.

❤️ 2

manuel

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?

❤️ 4

digitaldominica

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

❤️ 1

Zer01

how to show the topics view count?

❤️ 1

Zer01

Yes, but in all topic cards / lists

NateDhaliwal

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

❤️ 2

jordan.vidrine

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.

❤️ 2

digitaldominica

@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)

digitaldominica

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

NateDhaliwal

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

StefanoCecere

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?

❤️ 2

NateDhaliwal

Header Submenus, perhaps ?

❤️ 1

ro_ma

Can’t unstall the theme!!!

This theme is preinstalled and can not be deleted or customized

Moin

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?

❤️ 1

Robert_Niedosmialek1

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

satonotdead

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

Moin

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.

❤️ 2

velna.b

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 ?

❤️ 1

chapoi

I think it’s bug actually, looking

❤️ 3👍 1

Nick-Permaculture

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:

catchthewavecoke

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.

❤️ 4

Moin

I think this was changed recently

❤️ 4

asa

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?

chapoi

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.

😢 1❤️ 1

chapoi

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

Jarjar

Any way to change the posts so they have this?

chapoi

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.

Jarjar

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

HAWK

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

❤️ 3

Jarjar

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.

HAWK

Are you seeing these?

👀 1

Jarjar

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

🤗 1

nathank

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.

❤️ 3:100: 1

chapoi

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

😢 2

Helga_Razinkova

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

Am I doing something wrong?

❤️ 1

chapoi

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?

❤️ 1

Helga_Razinkova

Thanks @chapoi! My console:

❤️ 1

chapoi

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

❤️ 2

Helga_Razinkova

Thanks a lot, it works now!

❤️ 1

chapoi

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

serkhelesheyi

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

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:

Summary

: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%;

  }
}

chapoi

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

❤️ 2

ばこん

while participating in a group

When not participating in a group

The header and sidebar designs appear to have changed due to the modernization of the Foundation theme.

stephtara

I don’t know if this is the right place to post this but I like the way Horizon on Meta displays a couple of lines of each topic in category view. I can’t seem to reproduce it in my side and I’m not sure where to start looking. Thanks!!

❤️ 4

Lilly

can read about it here

❤️ 5:100: 1

chapoi

9 posts were split to a new topic: RTL issue with @ placement in user names

chapoi

2 posts were split to a new topic: Compact/Expanded view not working on Horizon

NateDhaliwal

Globally pinned topics have its excerpt right-aligned (this is on my free forum):

chapoi

2 posts were split to a new topic: Horizon interaction with Brand Header

chapoi

A post was split to a new topic: Flair issues on Horizon

chapoi

A post was split to a new topic: Two-Level Subcategories Display Issue

stephtara

I’m not sure if this is about Horizon or the Header Categories Navbar component. It was pointed out to me that the menu bar on Horizon starts far left, unlike in other themes (Foundation for comparison), which is weird on wide monitors.

Horizon:

Foundation:

Is this desired? Or something that might need fixing? I have to say that if the content width is constrained, it would seem logical to me not to have the menu bar start all the way over there to the left.

chapoi

Can you still repro this? Atm I can’t locally.

chapoi

Horizon uses the full-width component, so if you would use Foundation (full-width) theme, you’d see the same I think.

So while I agree it isn’t the best-looking layout, this is currently expected for all themes that use a full-width layout yes.

stephtara

Screenshots provided shows it’s different in Horizon and Foundation

Or am I missing something?

chapoi

Is the screenshot from foundation or foundation-full-width?

stephtara

Oh! Need to check that. Didn’t know there was a distinction!

stephtara

I don’t seem to have installed Foundation full-width, tried searching on meta and didn’t come up?

chapoi

Its not a specific theme, it’s this component: Discourse Full-width component

❤️ 2

Lew_Grothe

We’re currently using the Custom Header Links theme component. I don’t imagine it’s a deal-killer for us but I’d just like to get a sense of whether or not it’s being considered for support – is it still under consideration for Horizon compatibility? Any guess how much work it would be?

❤️ 1

chapoi

We’re currently not lining up any new compatibility work. Not saying it would never happen, but for any component compatibility to be added to the roadmap, it depends on how many requests we get for it.

I’m not very sure but I think it might be doable. The main conflict will be with the welcome banner setting, which uses the same outlet. So, if either completely you disable that, or set it to:

I think it might work reasonably well out of the box.

❤️ 1

Lilly

you can try this css in a theme component and include it in the horizon theme:

@use "lib/viewport";

// ** only apply to desktop and larger viewport sizes **

@include viewport.from(lg) {

  .container,
  .list-controls {
    margin-inline: 0!important;
  }
}

❤️ 1

Denis_Advert

Problem of view sugested threads on a mobile screen

Lilly

hmm i can’t reproduce this on my iphone15 in latest chrome, safari or firefox.

what device and browser are you using? seems odd it is trying to load the excerpts there.

❤️ 1

Denis_Advert

I tested it in a desktop using Chrome browser. I simply set the screen size to match that of a phone using F12. When I refresh the page from the cache (Ctrl + F5), the problem persists.

Lilly

yea i just tested on my desktop chrome with console for mobile and still cannot reproduce.

❤️ 2

Denis_Advert

Okay, maybe this issue will go away after a Chrome update (though I think I have the latest version). Oh well.

I have one more question. Why doesn’t that block with the tag selection and buttons hide when I scroll down? Is it just me, or does this happen to everyone? It takes up quite a bit of screen space; it would make sense to hide it when scrolling down.

:100: 1❤️ 1

Lilly

that is apparently the expected behavior for horizon theme (probably to always show what category/tag the user is in?), but i agree that it takes up too much space to be anchored there when scrolling. looks like the category and tag breadcrumb selectors are inside the navigation-container.

❤️ 2

jack222

On smaller phone screens, these two buttons take up a lot of space in the title list content.

I believe the trend in information density is toward greater compactness. My approach was to remove the fixed property for this row in CSS.

👍 1

moebis

Is this normal for these buttons to stack on 3 rows instead of 1 compact one?

Lilly

yea that looks like expected behavior unfortunately. the pinned button and topic notifications buttons are outside the topic-footer-main-buttons div. not sure if it’s possible but those two buttons should at the very least be in their own row together, but it would definitely be more ideal if they could render inside the topic footer main buttons row here.

edit: Moin pointed out to me that this is because Horizon hides the text explainers (that i don’t usually pay attention to lol)

they can be displayed by using this CSS if one needs:

.notifications-button-footer .reason .text, 
.pinned-button .reason .text {
    display: inline-flex;
}

❤️ 2