Personnalisation des couleurs et de l'apparence

Vous pouvez personnaliser les couleurs et l'apparence de votre page Owncast depuis Configuration → Général → Apparence dans l'administration. Commencez par les sélecteurs de couleurs, qui ne nécessitent aucun code. Pour un contrôle plus précis, vous pouvez écrire votre propre CSS dans l'éditeur, et le helper CSS Owncast ci-dessous génère un point de départ que vous pouvez coller.

Si vous souhaitez aller plus loin avec le CSS personnalisé, il est utile d'être à l'aise avec les sélecteurs CSS et la syntaxe des variables CSS, mais vous n'avez pas besoin de ces connaissances pour commencer.

Sélecteurs CSS

Sélecteur	Description
header	L'élément d'en-tête de la page
footer	L'élément de pied de page de la page
#global-header-text	Le texte dans l'en-tête
#offline-banner	La bannière qui apparaît lorsque le flux est hors ligne
#custom-page-content	Le contenu personnalisé de la page
#notify-button	Bouton pour afficher la modal de notification
#follow-button	Bouton pour afficher la modal de suivi
#followers-collection	La collection de followers
#modal-container	Le conteneur pour les modaux
#chat-container	Le conteneur pour le chat
.chat-message_user	Un message de chat envoyé par un utilisateur
.chat-message_system	Un message de chat envoyé par le système
.chat-message_social	Un message social du Fediverse
.followers-follower	Un seul follower dans la collection de followers

Variables CSS

Vous pouvez remplacer les valeurs attribuées aux variables CSS manuellement en les définissant dans l'éditeur CSS de l'administrateur. Vous pouvez trouver une liste de noms de variable que vous pouvez remplacer.

Par exemple, si vous souhaitez que tous les éléments d'action (liens, boutons) soient rouges, que les bordures de boutons soient vertes et que la police principale soit une police serif, vous pouvez définir les variables CSS suivantes comme suit :

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

Sélecteurs et variables supplémentaires

Bien qu'en utilisant CSS, vous puissiez cibler n'importe quel élément sur la page, si certains éléments vous posent des difficultés pour la personnalisation, veuillez ouvrir un problème sur le dépôt GitHub d'Owncast afin que nous puissions envisager d'ajouter des sélecteurs supplémentaires ou des variables CSS pour faciliter la personnalisation. Nous ajouterons probablement également davantage d'options de personnalisation directement sur la page d'apparence d'Owncast au fil du temps pour les cas d'utilisation courants. Si vous souhaitez personnaliser quelque chose de spécifique, les contributions sont les bienvenues !

Apparence et plugins de thème

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

Les plugins peuvent également styliser la page du visualiseur. Un plugin de thème est la méthode supportée pour installer et partager un look emballé. Vos paramètres sur cette page et les styles d'un plugin se combinent pour donner le résultat final.

Vos choix gagnent. Les couleurs que vous choisissez ici et le CSS que vous écrivez dans l'éditeur sont appliqués par-dessus les styles de tout plugin, donc là où les deux touchent la même couleur, la vôtre prend effet. Un plugin de thème agit comme une base : il change les couleurs que vous n'avez pas définies vous-même, et toute couleur que vous définissez explicitement remplace cela.

Lorsqu'un plugin stylise votre page, cette page vous dit :

• Un avis en haut nomme le ou les plugins appliquant actuellement des styles.
• Chaque couleur qu'un plugin définit est marquée d'une note également définie par <plugin> à côté de son sélecteur.

Deux leviers contrôlent le résultat :

• Pour laisser un plugin de thème contrôler entièrement l'apparence, effacez vos propres couleurs avec Réinitialiser aux valeurs par défaut. Sans rien défini ici, le thème du plugin transparaît complètement.
• Pour stopper complètement le style d'un plugin, désactivez-le sur la page Plugins dans l'administration.

Helper CSS d'Owncast

Pour aider à personnaliser vos couleurs Owncast via des variables CSS et à personnaliser des éléments spécifiques, utilisez l'helper CSS ci-dessous. Ceci est destiné à vous donner un bon départ dans l'écriture de votre propre CSS, pas une solution complète. Sélectionnez les couleurs à l'aide des sélecteurs de couleurs, modifiez le CSS directement selon vos besoins, puis copiez et collez le résultat dans votre administration Owncast sous Configuration → Général → Apparence.

Owncat suggests

Vous pouvez copier et coller votre CSS personnalisé et le partager avec d'autres utilisateurs d'Owncast en tant que thèmes !

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