Personalizzazione dei colori e dell'aspetto

Puoi personalizzare i colori e l'aspetto della pagina di Owncast da Configurazione → Generale → Aspetto nell'admin. Inizia con i selettori di colore delle sezioni, che non richiedono codice. Per un controllo più fine puoi scrivere il tuo CSS nell'editor, e il Assistente CSS di Owncast qui sotto genera un punto di partenza che puoi incollare.

Se vuoi approfondire il CSS personalizzato è utile essere a proprio agio con i selettori CSS e la sintassi delle variabili CSS, ma non hai bisogno di nessuno dei due per cominciare.

Selettori CSS

Selettore	Descrizione
header	L'elemento header della pagina
footer	L'elemento footer della pagina
#global-header-text	Il testo nell'header
#offline-banner	Il banner che appare quando lo stream è offline
#custom-page-content	Il contenuto personalizzato della pagina
#notify-button	Pulsante per visualizzare la modale di notifica
#follow-button	Pulsante per visualizzare la modale di follow
#followers-collection	La raccolta dei follower
#modal-container	Il contenitore per le modali
#chat-container	Il contenitore della chat
.chat-message_user	Un messaggio chat inviato da un utente
.chat-message_system	Un messaggio chat inviato dal sistema
.chat-message_social	Un messaggio social proveniente dal Fediverse
.followers-follower	Un singolo follower nella raccolta dei follower

Variabili CSS

Puoi sovrascrivere manualmente i valori delle variabili CSS impostandoli nell'editor CSS nell'admin. Puoi trovare un elenco di nomi delle variabili che puoi sovrascrivere.

Ad esempio, se desideri rendere tutti gli elementi di azione (link, pulsanti) rossi, i bordi dei pulsanti verdi e cambiare il carattere del body in un carattere serif, puoi impostare le seguenti variabili CSS:

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

Selettori e variabili aggiuntivi

Sebbene con il CSS tu possa mirare a qualsiasi elemento della pagina, se ci sono elementi specifici che trovi difficile personalizzare, apri per favore un issue sul repository GitHub di Owncast così possiamo valutare di aggiungere selettori o variabili CSS aggiuntive per rendere la personalizzazione più semplice. Probabilmente aggiungeremo anche più opzioni di personalizzazione direttamente nella pagina Aspetto di Owncast nel tempo per casi d'uso comuni. Se desideri personalizzare qualcosa in modo specifico, i contributi sono benvenuti!

Plugin per aspetto e temi

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

I plugin possono applicare stili anche alla pagina del visualizzatore. Un plugin per temi è il modo supportato per installare e condividere un aspetto preconfezionato. Le tue impostazioni su questa pagina e gli stili di un plugin si combinano nel risultato finale.

Le tue scelte prevalgono. I colori che scegli qui e il CSS che scrivi nell'editor vengono applicati sopra gli stili di qualsiasi plugin, quindi quando entrambi impostano lo stesso colore, prevale il tuo. Un plugin per temi funge da base: cambia i colori che non hai impostato tu stesso, e qualsiasi colore che imposti esplicitamente lo sovrascrive.

Quando un plugin applica stili alla tua pagina, questa pagina ti informa:

• Un avviso in alto indica il nome del plugin o dei plugin che attualmente applicano stili.
• Ogni colore impostato anche da un plugin è contrassegnato con una nota also set by <plugin> accanto al suo selettore.

Due leve controllano il risultato:

• Per permettere a un plugin per temi di controllare completamente l'aspetto, cancella i tuoi colori con Reset to Defaults. Se non imposti nulla qui, il tema del plugin si applica completamente.
• Per fermare completamente lo styling di un plugin, disabilitalo nella pagina Plugins nell'admin.

Assistente CSS di Owncast

Per aiutare a personalizzare i colori di Owncast tramite variabili CSS e a personalizzare elementi specifici, usa l'assistente CSS qui sotto. Questo è pensato per darti un punto di partenza nella scrittura del tuo CSS, non una soluzione completa. Seleziona i colori usando i selettori di colore, modifica il CSS direttamente se necessario, quindi copia e incolla il risultato nell'admin di Owncast sotto Configurazione → Generale → Aspetto.

Owncat suggests

Puoi copiare e incollare il tuo CSS personalizzato e condividerlo con altri utenti di Owncast come temi!

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