Anpassen von Farben und Erscheinungsbild

Sie können die Farben und das Erscheinungsbild Ihrer Owncast-Seite unter Konfiguration → Allgemein → Erscheinungsbild im Adminbereich anpassen. Beginnen Sie mit den Farbwahlwerkzeugen, die keinen Code benötigen. Für eine feinere Kontrolle können Sie Ihr eigenes CSS im Editor schreiben, und der Owncast CSS-Helfer unten generiert einen Ausgangspunkt, den Sie einfügen können.

Wenn Sie mit benutzerdefiniertem CSS weitergehen möchten, hilft es, sich mit CSS-Selektoren und der CSS-Variablen-Syntax wohlzufühlen, aber Sie benötigen beides nicht, um zu beginnen.

CSS-Selektoren

Selektor	Beschreibung
header	Das Seitenkopf-Element
footer	Das Seitenfuß-Element
#global-header-text	Der Text im Header
#offline-banner	Das Banner, das erscheint, wenn der Stream offline ist
#custom-page-content	Der benutzerdefinierte Inhalt der Seite
#notify-button	Schaltfläche zur Anzeige des Benachrichtigungsmodals
#follow-button	Schaltfläche zur Anzeige des Follower-Modals
#followers-collection	Die Sammlung von Followern
#modal-container	Der Container für die Modale
#chat-container	Der Container für den Chat
.chat-message_user	Eine vom Benutzer gesendete Chat-Nachricht
.chat-message_system	Eine vom System gesendete Chat-Nachricht
.chat-message_social	Eine soziale Nachricht aus dem Fediverse
.followers-follower	Ein einzelner Follower in der Follower-Sammlung

CSS-Variablen

Sie können die den CSS-Variablen zugewiesenen Werte manuell überschreiben, indem Sie sie im CSS-Editor im Admin-Bereich festlegen. Sie finden eine Liste von Variablen Namen, die Sie überschreiben können.

Wenn Sie beispielsweise alle Aktionspunkte (Links, Schaltflächen) rot, die Schaltflächenränder grün und die Schriftart des Inhalts auf eine serif-Schriftart ändern möchten, können Sie die folgenden CSS-Variablen wie folgt festlegen:

:root {
  --theme-color-action: red;
  --theme-color-components-primary-button-border: green;
  --theme-text-body-font-family: serif;
}

Zusätzliche Selektoren und Variablen

Während Sie mit CSS jedes Element auf der Seite ansprechen können, Wenn es bestimmte Elemente gibt, bei denen Sie Schwierigkeiten haben, diese anzupassen, bitte eröffnen Sie ein Ticket im Owncast GitHub-Repository, damit wir in Betracht ziehen können, zusätzliche Selektoren oder CSS-Variablen hinzuzufügen, um die Anpassung zu erleichtern. Wir werden wahrscheinlich auch im Laufe der Zeit weitere Anpassungsoptionen direkt auf der Erscheinungsseite von Owncast für häufige Anwendungsfälle hinzufügen. Wenn Sie etwas Bestimmtes anpassen möchten, sind Beiträge willkommen!

Erscheinungsbild und Themen-Plugins

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

Plugins können auch die Viewer-Seite gestalten. Ein Themen-Plugin ist die unterstützte Möglichkeit, ein verpacktes Aussehen zu installieren und zu teilen. Ihre Einstellungen auf dieser Seite und die Styles eines Plugins kombiniert in das Endergebnis.

Ihre Entscheidungen gewinnen. Die Farben, die Sie hier auswählen, und das CSS, das Sie im Editor schreiben, werden über die Styles von Plugins angewendet, sodass, wo beide die gleiche Farbe berühren, Ihre wirksam wird. Ein Themen-Plugin fungiert als Basis: Es ändert die Farben, die Sie nicht selbst festgelegt haben, und jede Farbe, die Sie ausdrücklich festlegen, hebt es auf.

Wenn ein Plugin Ihre Seite gestaltet, sagt Ihnen diese Seite:

• Eine Anzeige oben nennt das Plugin oder die Plugins, die derzeit Styles anwenden.
• Jede Farbe, die auch von einem Plugin festgelegt wird, ist mit einer auch gesetzt von <plugin>-Notiz neben ihrem Farbwahlfeld gekennzeichnet.

Zwei Hebel steuern das Ergebnis:

• Um ein Themen-Plugin das vollständige Aussehen steuern zu lassen, löschen Sie Ihre eigenen Farben mit Auf Standard zurücksetzen. Wenn hier nichts festgelegt ist, zeigt das Thema des Plugins vollständig durch.
• Um die Gestaltung eines Plugins vollständig zu stoppen, deaktivieren Sie es auf der Plugins-Seite im Admin.

Owncast CSS-Helper

Um Ihnen bei der Anpassung Ihrer Owncast-Farben über CSS-Variablen und der Anpassung bestimmter Elemente zu helfen, verwenden Sie den CSS-Helfer unten. Dies soll Ihnen einen ersten Eindruck beim Schreiben Ihres eigenen CSS geben, keine vollständige Lösung. Wählen Sie Farben mit den Farbwahlwerkzeugen aus, bearbeiten Sie das CSS nach Bedarf direkt, und kopieren Sie dann das Ergebnis in Ihren Owncast-Adminbereich unter Konfiguration → Allgemein → Erscheinungsbild.

Owncat suggests

Sie können Ihr benutzerdefiniertes CSS kopieren und einfügen und es anderen Owncast-Nutzern als Themen zur Verfügung stellen!

Owncast Components

Select colors to customize your Owncast instance. The CSS will be generated automatically.

Action Color--theme-color-action

Links, buttons, and interactive elements

Action Hover--theme-color-action-hover

Hover state for interactive elements

Main Background--theme-color-background-main

Primary page background

Header Background--theme-color-background-header

Header section background color

Button Background--theme-color-components-primary-button-background

Primary button background color

Button Text--theme-color-components-primary-button-text

Primary button text color

Button Border--theme-color-components-primary-button-border

Primary button border color

Chat Background--theme-color-components-chat-background

Chat container background

Chat Text--theme-color-components-chat-text

Chat message text color

Chat Input Background--theme-color-components-chat-input-background

Chat input field background

Primary Text--theme-color-palette-0

Main text color

Secondary Text--theme-color-palette-1

Secondary/muted text

Tertiary Text--theme-color-palette-2

Tertiary/disabled text

Headerheader

The main header element

Background

Text

Footerfooter

The main footer element

Background

Text

Header Text#global-header-text

The text in the header

Offline Banner#offline-banner

The banner that appears when the stream is offline

Background

Text

Custom Content#custom-page-content

The custom content of the page

Background

Text

Notify Button#notify-button

Button to display the notify modal

Background

Text

Follow Button#follow-button

Button to display the follow modal

Background

Text

Followers Collection#followers-collection

The collection of followers

Modal Container#modal-container

The container for the modals

Background

Text

Chat Container#chat-container

The container for the chat

User Chat Message.chat-message_user

A user-sent chat message

Background

Text

System Chat Message.chat-message_system

A system-sent chat message

Background

Text

Social Chat Message.chat-message_social

A social message from the Fediverse

Background

Text

Follower Item.followers-follower

A single Follower in the followers collection

Background

Text

Generated CSS