Personalizando colores y apariencia

Puedes personalizar los colores y la apariencia de tu página de Owncast desde Configuración → General → Apariencia en el administrador. Comienza con los seleccionadores de color de la sección, que no requieren código. Para un control más detallado, puedes escribir tu propio CSS en el editor, y el asistente de CSS de Owncast a continuación genera un punto de partida que puedes pegar.

Si deseas avanzar más con CSS personalizado, es útil sentirte cómodo con selectores CSS y la sintaxis de variables CSS, pero no necesitas ninguna de las dos para comenzar.

Selectores CSS

Selector	Descripción
header	El elemento de encabezado de la página
footer	El elemento de pie de página de la página
#global-header-text	El texto en el encabezado
#offline-banner	El banner que aparece cuando la transmisión está fuera de línea
#custom-page-content	El contenido personalizado de la página
#notify-button	Botón para mostrar el modal de notificación
#follow-button	Botón para mostrar el modal de seguimiento
#followers-collection	La colección de seguidores
#modal-container	El contenedor para los modales
#chat-container	El contenedor para el chat
.chat-message_user	Un mensaje de chat enviado por un usuario
.chat-message_system	Un mensaje de chat enviado por el sistema
.chat-message_social	Un mensaje social del Fediverse
.followers-follower	Un solo seguidor en la colección de seguidores

Variables CSS

Puedes sobrescribir los valores asignados a las variables CSS manualmente configurándolos en el editor CSS en el administrador. Puedes encontrar una lista de nombres de variables que puedes sobreescribir.

Por ejemplo, si deseas que todos los elementos de acción (enlaces, botones) sean rojos, los bordes de los botones verdes y cambiar la fuente del cuerpo a una fuente serif, puedes establecer las siguientes variables CSS de la siguiente manera:

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

Selectores y variables adicionales

Si bien, al usar CSS, puedes dirigirte a cualquier elemento en la página, si hay elementos específicos que te cuesta personalizar, por favor abre un problema en el repositorio de GitHub de Owncast para que podamos considerar agregar selectores o variables CSS adicionales para facilitar la personalización. También es probable que agreguemos más opciones de personalización directamente en la página de apariencia de Owncast con el tiempo para casos de uso comunes. Si deseas personalizar algo específico, ¡las contribuciones son bienvenidas!

Plugins de apariencia y tema

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

Los plugins también pueden estilizar la página del visor. Un plugin de tema es la forma soportada para instalar y compartir una apariencia empaquetada. Tus configuraciones en esta página y los estilos de un plugin se combinan en el resultado final.

Tus elecciones ganan. Los colores que elijas aquí y el CSS que escribas en el editor se aplican encima de los estilos de cualquier plugin, por lo que donde ambos afecten al mismo color, el tuyo toma efecto. Un plugin de tema actúa como una base: cambia los colores que no has establecido tú mismo, y cualquier color que establezcas explícitamente lo sobrescribirá.

Cuando un plugin está estilizando tu página, esta página te lo indica:

• Un aviso en la parte superior menciona el plugin o los plugins que actualmente están aplicando estilos.
• Cada color que también establece un plugin se marca con una nota también establecido por <plugin> junto a su selector.

Dos controles determinan el resultado:

• Para permitir que un plugin de tema controle completamente la apariencia, borra tus propios colores con Restablecer a valores predeterminados. Sin nada establecido aquí, el tema del plugin se muestra completamente.
• Para detener completamente el estilo de un plugin, desactívalo en la página de Plugins en el administrador.

Ayudante CSS de Owncast

Para ayudar en la personalización de tus colores de Owncast a través de variables CSS y personalizar elementos específicos, usa el ayudante CSS a continuación. Esto está destinado a darte una ventaja al escribir tu propio CSS, no una solución completa. Selecciona colores usando los seleccionadores de color, edita el CSS directamente según sea necesario, luego copia y pega el resultado en tu administrador de Owncast bajo Configuración → General → Apariencia.

Owncat suggests

¡Puedes copiar y pegar tu CSS personalizado y compartirlo con otros usuarios de 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