Horizon-Design

[nathank (Nathan Kershaw)]

Gibt es Überlegungen, Horizon auf voller Breite zu gestalten? Ich finde, dass es in der Mitte etwas eingeschränkt (wie in einem Korsett?) wirkt und eine vollständige Ausdehnung es schön entspannen würde.

[chapoi]

Nein, das ist nicht geplant. Wir behalten eine begrenzte Breite bei, die einer optimalen Leselänge entspricht.

[Helga_Razinkova (Helga)]

Hallo, ich habe versucht, das Theme vorab anzusehen, aber das ist alles, was ich sehe:

Mache ich etwas falsch?

[chapoi]

Ich habe es gerade (allerdings mobil) getestet und es funktioniert bei mir einwandfrei. Gibt es etwas in der Konsole? Oder können Sie einen anderen Browser zum Überprüfen versuchen?

[Helga_Razinkova (Helga)]

Danke @chapoi! Meine Konsole:

[chapoi]

Okay, ja, das kann ich definitiv reproduzieren. Ich denke, das liegt daran, dass Horizon wahrscheinlich in den Kern verschoben wurde. Muss herausfinden, wie der Vorschau-Link korrigiert werden kann, falls überhaupt möglich. (Die Vorschau nur auf Meta ist am einfachsten – Thema aktualisiert)

Nichtsdestotrotz können Sie es hier auf Meta in der Vorschau anzeigen, indem Sie zum Theme wechseln.

[Helga_Razinkova (Helga)]

Vielen Dank, es funktioniert jetzt!

[serkhelesheyi]

Mobile Ad Container Overflow bei internen Anzeigen – RTL/LTR Layout-Fehlanpassung

Hallo

Ich verwende das Horizon-Theme mit dem offiziellen House Ads-Plugin und habe eine benutzerdefinierte Komponente erstellt, um Anzeigen mithilfe von CSS-Variablen und Layout-Regeln zu gestalten, die mit dem Designsystem von Discourse kompatibel sind.

Problem: Anzeigen-Container läuft auf Mobilgeräten aus dem Viewport aus (sowohl LTR als auch RTL)

• Theme: Horizon (nicht reproduzierbar im Standard-Theme oder anderen Themes wie Material usw.)
• Plugin: House Ads + benutzerdefinierte Komponente
• Gerät: Mobil
• Verhalten:
  • Wenn Seitensprache = Englisch (LTR) → linker Rand von .ad-container wird abgeschnitten (läuft nach links über).
  • Wenn Seitensprache = Persisch/Arabisch (RTL) → rechter Rand wird abgeschnitten (läuft nach rechts über).
• Erwartet: Die Anzeigenkarte sollte vollständig im Viewport enthalten, zentriert oder an der Breite des Beitragstextes ausgerichtet sein.

Mein CSS-Code:

Zusammenfassung

:root {
  /* Kernfarben */
  --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;
}

/* ===============================
   Karten-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 ist (noch) nicht mit allen Komponenten und Plugins kompatibel.

@Discourse

Kompatibel

Wir haben die folgenden Funktionen mit Horizon getestet und bestätigt, dass sie funktionieren. Es besteht möglicherweise Verbesserungspotenzial. Bitte teilen Sie uns mit, wenn Sie Ideen haben, wie die Kompatibilität verbessert werden kann. Alles, was hier nicht aufgeführt ist, ist entweder nur teilweise kompatibel, inkompatibel oder noch nicht getestet.

• Discourse Solved
• Clickable Topic
• DiscoTOC

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

während der Teilnahme an einer Gruppe

Wenn nicht an einer Gruppe teilgenommen wird

---

Das Design der Kopfzeile und der Seitenleiste scheint sich aufgrund der Modernisierung des Foundation-Themas geändert zu haben.

[stephtara (Stephanie Booth)]

Ich weiß nicht, ob dies der richtige Ort ist, um dies zu posten, aber mir gefällt die Art und Weise, wie Horizon auf Meta ein paar Zeilen jedes Themas in der Kategorieansicht anzeigt. Ich kann es anscheinend nicht auf meiner Seite reproduzieren und bin mir nicht sicher, wo ich mit der Suche beginnen soll. Danke!!

[Lilly]

kann man hier darüber lesen

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]

Global angepinnte Themen haben ihren Auszug rechtsbündig ausgerichtet (dies ist in meinem kostenlosen Forum):

[stephtara (Stephanie Booth)]

Ich bin mir nicht sicher, ob es hier um Horizon oder die Komponente Header Categories Navbar geht. Es wurde mich darauf hingewiesen, dass die Menüleiste bei Horizon ganz links beginnt, anders als bei anderen Themes (Foundation zum Vergleich), was auf breiten Monitoren seltsam aussieht.

Horizon:

Foundation:

Ist das beabsichtigt? Oder etwas, das möglicherweise behoben werden muss? Ich muss sagen, wenn die Inhaltsbreite begrenzt ist, wäre es für mich logisch, dass die Menüleiste nicht ganz links beginnt.