Horizon Theme

[nathank (Nathan Kershaw)]

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.

[chapoi]

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

[Helga_Razinkova (Helga)]

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

Am I doing something wrong?

[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?

[Helga_Razinkova (Helga)]

Thanks @chapoi! My console:

[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

[Helga_Razinkova (Helga)]

Thanks a lot, it works now!

[serkhelesheyi]

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:

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

@Discourse

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

[ばこん (べーこん(bac0n))]

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 (Stephanie Booth)]

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

[Lilly]

can read about it here

Horizon: High Context Topic Cards

What’s new in Horizon? We’re happy to announce the next iteration for the Horizon theme: high-context topic cards. These cards surface key signals at a glance, pulling in data from familiar favourites: Solved (1) Topic Voting (2) Assign (3) Good old tags (4) Excerpts We have also rearranged the layout, refined spacing and typography, and expanded the last-reply preview; aiming for a balanced experience. Desktop [CleanShot 2026-01-14 at 19.12.48@2x] Mobile [CleanShot 2026-01-14 at 19.19.0…

[NateDhaliwal]

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

[stephtara (Stephanie Booth)]

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.