Personalizando cores e aparência

Você pode personalizar as cores e a aparência da sua página do Owncast em Configuration → General → Appearance no admin. Comece pelos seletores de cor das seções, que não exigem código. Para um controle mais fino, você pode escrever seu próprio CSS no editor, e o Assistente CSS do Owncast abaixo gera um ponto de partida que você pode colar.

Se quiser ir além com CSS personalizado, é útil estar familiarizado com seletores CSS e a sintaxe de variáveis CSS, mas você não precisa de nenhum dos dois para começar.

Seletores CSS

Seletor	Descrição
header	O elemento de cabeçalho da página
footer	O elemento de rodapé da página
#global-header-text	O texto no cabeçalho
#offline-banner	O banner que aparece quando a transmissão está offline
#custom-page-content	O conteúdo personalizado da página
#notify-button	Botão para exibir o modal de notificação
#follow-button	Botão para exibir o modal de seguir
#followers-collection	A coleção de seguidores
#modal-container	O contêiner para os modais
#chat-container	O contêiner para o chat
.chat-message_user	Uma mensagem de chat enviada por um usuário
.chat-message_system	Uma mensagem de chat enviada pelo sistema
.chat-message_social	Uma mensagem social do Fediverse
.followers-follower	Um único seguidor na coleção de seguidores

Variáveis CSS

Você pode substituir os valores atribuídos às variáveis CSS manualmente, definindo-os no editor de CSS no admin. Você pode encontrar uma lista de nomes de variáveis que você pode sobrescrever.

Por exemplo, se quiser tornar todos os itens de ação (links, botões) vermelhos, as bordas dos botões verdes e alterar a fonte do corpo para uma fonte serif, você pode definir as seguintes variáveis CSS:

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

Seletores e variáveis adicionais

Embora, ao usar CSS, você possa atingir qualquer elemento da página, se houver elementos específicos que você esteja tendo dificuldade em personalizar, abra uma issue no repositório do Owncast no GitHub para que possamos considerar adicionar seletores ou variáveis CSS adicionais para facilitar a personalização. Também provavelmente adicionaremos mais opções de personalização diretamente na página de aparência do Owncast ao longo do tempo para casos de uso comuns. Se você quiser personalizar algo específico, contribuições são bem-vindas!

Plugins de aparência e tema

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

Plugins também podem estilizar a página do visualizador. Um plugin de tema é a forma suportada de instalar e compartilhar uma aparência empacotada. Suas configurações nesta página e os estilos de um plugin se combinam no resultado final.

Suas escolhas prevalecem. As cores que você escolher aqui e o CSS que escrever no editor são aplicados por cima dos estilos de qualquer plugin, então quando ambos definirem a mesma cor, a sua é a que terá efeito. Um plugin de tema atua como uma base: ele altera as cores que você não definiu, e qualquer cor que você definir explicitamente a substitui.

Quando um plugin estiver estilizando sua página, esta página informa:

• Um aviso no topo informa o nome do plugin ou dos plugins que estão aplicando estilos no momento.
• Cada cor que um plugin também define é marcada com uma nota also set by <plugin> ao lado do seu seletor de cores.

Dois controles determinam o resultado:

• Para permitir que um plugin de tema controle totalmente a aparência, limpe suas próprias cores com Reset to Defaults. Com nada definido aqui, o tema do plugin aparece por completo.
• Para impedir totalmente a estilização por um plugin, desative-o na página Plugins no admin.

Assistente CSS do Owncast

Para ajudar a personalizar as cores do seu Owncast via variáveis CSS e personalizar elementos específicos, use o assistente CSS abaixo. Isto foi pensado para lhe dar um ponto de partida na escrita do seu próprio CSS, não como uma solução completa. Selecione cores usando os seletores de cor, edite o CSS diretamente conforme necessário, em seguida, copie e cole o resultado no admin do Owncast em Configuration → General → Appearance.

Owncat suggests

Você pode copiar e colar seu CSS personalizado e compartilhá-lo com outros usuários do Owncast como temas!

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