Colores de equipo (Team Colors)
El módulo Team Colors (Pro) permite asignar colores personalizados a cada equipo. Estos colores se aplican mediante variables CSS en las páginas del equipo y en los elementos relacionados con el equipo en el frontend.
Activar el módulo Team Colors
Ve a SportsPress → Ajustes → Módulos y asegúrate de que Team Colors está activado.
Configurar los colores de un equipo
Al editar un equipo, el cuadro meta de Colores aparece en la barra lateral. Contiene cinco campos de color:
Color primario — El color principal del equipo (por ejemplo, el color de la camiseta).
Color secundario — El color secundario (por ejemplo, el de los pantalones o las mangas).
Color del texto — El color del texto para usar sobre el color primario.
Color del enlace — El color de los elementos de enlace relacionados con el equipo.
Color de fondo — El color de fondo para las áreas relacionadas con el equipo.
Haz clic en el campo de color para abrir el selector de color y elige el color deseado. Haz clic en Actualizar para guardar los cambios.
Cómo se aplican los colores
Cuando se visualiza la página de un equipo, SportsPress inyecta una etiqueta <style> en el <head> del documento con variables CSS que corresponden a los colores del equipo:
:root {
--sp-team-primary: #c8102e;
--sp-team-secondary: #00337f;
--sp-team-text: #ffffff;
--sp-team-link: #c8102e;
--sp-team-background: #f5f5f5;
}Los temas que admiten SportsPress Pro pueden usar estas variables CSS para adaptar el diseño al esquema de colores del equipo.
Sobrescribir colores en el tema
Los desarrolladores pueden usar las variables CSS en sus temas para aplicar los colores del equipo a elementos específicos:
.sp-team-header {
background-color: var(--sp-team-primary);
color: var(--sp-team-text);
}