Race-GEditor de Estilos
3 · Configuración inicial
🎨 Estilo Visual
Todo lo que ves al aire (colores, tamaños, fuentes, fondos y posición de cada gráfico) se controla desde el Estilo Visual. Podés guardar varios estilos, cambiar de uno a otro en un clic y editarlos con un editor visual, sin tocar código.
Tu panel no se toca
Los estilos solo afectan a los gráficos que salen al aire. El panel de control de Race-G nunca usa los estilos guardados, así que podés probar y editar tranquilo sin romper nada.
Elegir y administrar estilos
En la pestaña Config, arriba de todo, está la sección 🎨 Estilo Visual.
Screenshots/estilo-visual-config.pngRecorte de la pestaña Config: desplegable "Estilo activo", botón ✏️ Editar y botón ✕ de eliminar.| Control | Qué hace |
|---|---|
| Estilo activo | Desplegable con todos tus estilos guardados. Al elegir uno se activa al instante en los gráficos y queda activo hasta que elijas otro, incluso si reiniciás Race-G. |
| — ninguno (estilo por defecto) — | Vuelve al aspecto original de Race-G. |
| ✏️ Editar | Abre el Editor de Estilo Visual. |
| ✕ | Elimina el estilo seleccionado. Si era el activo, Race-G vuelve al estilo por defecto. |
El Editor de Estilo Visual
Se abre en una ventana grande con tres zonas: arriba el nombre del estilo y el botón 💾 Guardar, a la izquierda la lista de grupos de variables, y a la derecha los controles del grupo elegido.
Screenshots/estilo-visual-editor.pngEditor abierto: encabezado con nombre y Guardar, pestañas, lista de grupos a la izquierda y controles a la derecha.Screenshots/estilo-visual-nombre-guardar.pngRecorte del encabezado del editor: campo "Nombre del estilo" y botón 💾 Guardar.Las 8 pestañas del editor
Layout
Márgenes y anchos de cada gráfico. Para adaptar a tu resolución o al logo del canal.
Paleta
Fondos, gradiente maestro y colores de estado, podio y sanciones.
Tipografía
Fuente madre, tamaños de texto, alturas y tiempos de animación.
Atómico
Control fino de cada elemento: número, piloto, marca, equipo, títulos, tiempos y gaps.
Nombres
Cómo se escribe el nombre del piloto en cada gráfico.
Cajas individuales
Estilo de cada placa de un solo piloto: Nombre de Piloto, Podio, Ganador, sanciones y Radio.
Chat YT
Comentario destacado, feed de chat y widget EN VIVO de YouTube.
Banderas
Color, imagen y texto de las banderas automáticas y manuales.
Screenshots/estilo-visual-pestanas.pngRecorte de la barra con las 8 pestañas: Layout, Paleta, Tipografía, Atómico, Nombres, Cajas individuales, Chat YT y Banderas.📐 Layout
Tiene el frame seguro para TV (márgenes globales) y los anchos de cada gráfico, en cuatro grupos: Márgenes Globales y tres de Anchos (Principales, Cards y Sanciones, Stats y Tablas).
| Variable | Qué mueve |
|---|---|
--PosTopGlobal | Distancia desde arriba: Crawl Superior, Cuenta Vueltas, Comparativa. |
--PosBottomGlobal | Distancia desde abajo: Totem, SpeedTrap, Clasificador Final, Campeonato Completo. |
--PosLeftGlobal | Margen izquierdo de Totem, SpeedTrap y Clasificador Final. |
--PosRightGlobal | Margen derecho de Crawl, Cuenta Vueltas, Vuelta Rápida y Ganador. |
--w-clasificadorfinal | Ancho de la placa central del Clasificador Final (por defecto 1400px). |
--w-nombrepiloto | Ancho del cartel de nombre. Subilo si un nombre largo se corta. |
--w-clasificadorfinal y --w-campeonatocompleto a unos 1100px y los márgenes a 40px. Si tu canal tiene logo en la esquina inferior derecha, subí --PosRightGlobal y --PosBottomGlobal.Screenshots/estilo-visual-layout.pngPestaña Layout con el grupo Márgenes Globales abierto.🎨 Paleta
- Fondos Base:
--bg-block(cuerpo de Crawl, Totem, SpeedTrap),--bg-titles(cabeceras) y--bg-row-stripe(cebra de filas). Con--bg-blocktransparente se ve el circuito detrás. - Gradiente Maestro (
--BackGradientRojoNegro): el look característico, de negro a rojo. Si lo cambiás a azul, todo el sistema se vuelve azul sin tocar cada gráfico. - Colores de Estado: flechas ▲▼, mejor/peor parcial, podio y pole.
- Colores Sanciones: radio, apercibido, recargo, exclusión y pase y siga.
- Color de acento (
--color-acento, amarillo por defecto): bordes, títulos y números. En blanco da un look más limpio.
Screenshots/estilo-visual-paleta.pngPestaña Paleta mostrando los selectores de color de Fondos Base y el Gradiente Maestro.✒️ Tipografía
- Fuente madre (
--font-family-global): cambiarla cambia la tipografía de todo el layout. - Tamaños de texto (
--fs-*): etiquetas, títulos, tiempos, nombre y tiempo de Vuelta Rápida, etc. - Alturas:
--h-crawl-row(alto de fila) y--h-logo-img(alto de logos). - Clasificador Final:
--cf-scalemultiplica el tamaño de toda la fila (1 = normal, 1.2 = 20% más grande). - Animación:
--transition-ov(fundido de los gráficos) y los tiempos de los rótulos custom.
--fs-label a unos 14px y --h-crawl-row a unos 36px.Screenshots/estilo-visual-tipografia.pngPestaña Tipografía con el selector de fuente madre y los tamaños de texto.🧩 Atómico
Cada elemento tiene su propio grupo de variables: NRO, Piloto, Marca, Equipo, Títulos, Evento, Headers, Ordinal, Vueltas, Tiempo y Gap. Para cada uno podés cambiar fondo, color, tamaño, peso, márgenes, bordes, sombra y más.
- ¿Números redondos?
--nro-border-radius: 50%. - ¿Nombres con sombra?
--piloto-text-shadow: 0 2px 4px rgba(0,0,0,0.9). - Resaltado de ranking (
--rkhl-*): cuando elegís un campeonato en Play, sus pilotos se resaltan en Crawl y Totem. Podés resaltar solo el nombre (por defecto) o la fila completa. - Evento (
--evento-*): el cintillo sobre Clasificador Final, Campeonato y Grilla. Ajustás degradé, alto, ancho y corrimiento. - Headers: un solo grupo controla los títulos chicos del Totem (Top 10, Mejores Parciales, SpeedTrap, etc.).
- Gap en espera: color y opacidad de la diferencia retenida cuando el de adelante ya cruzó meta y el de atrás todavía no.
Screenshots/estilo-visual-atomico.pngPestaña Atómico con el grupo NRO abierto: fondo, color, radio y márgenes.🏷️ Nombres
Define cómo se escribe el nombre en cada gráfico: Crawl Superior, Crawl Inferior, Totem, Ganador, Podio, Vuelta Rápida, Sanciones, Radio, Clasificador Final, Campeonatos y Seguidor.
| Formato | Resultado con “Juan María López” |
|---|---|
| abreviado | J. Lopez |
| solo_repetidos | Abrevia solo si hay otro apellido igual; si no, el apellido completo |
| inicial_apellido | J. López |
| apellido_inicial | López J. |
| nombre_apellido | Juan López |
| nombre_completo | Juan María López |
| corte | Corta a N caracteres (por ejemplo, 4 → JUAN) |
Screenshots/estilo-visual-nombres.pngPestaña Nombres con el formato elegido para Totem y Clasificador Final.📦 Cajas individuales
Para darle un estilo propio a una sola placa sin afectar a las demás. Hay 8 placas: Nombre de Piloto, Podio, Ganador, Apercibido, Recargo, Exclusión, Pase y Siga y Radio. Cada una se divide en componentes:
| Componente | Qué controla |
|---|---|
| Caja | Contenedor entero: fondo, borde, radio, sombra y alto. |
| Bandera | Bandera a cuadros (solo Podio y Ganador). |
| Título | GANADOR, APERCIBIDO, etc. En las sanciones, la explicación del operador va al lado con el mismo estilo. |
| Número | Número o imagen del auto. |
| Nombre | Nombre del piloto. |
| Fila y texto del auto | Fila con logo y texto de marca / modelo. |
| Logo | Logo de la marca. |
Screenshots/estilo-visual-cajas.pngPestaña Cajas individuales con la placa Ganador elegida y sus componentes.Los controles muestran el valor real que se ve al aire, no un valor genérico, y solo se guarda lo que cambiás.
- Fondo degradé solo en la caja del Ganador, sin afectar a Nombre de Piloto.
- Borde amarillo en Podio y dorado en Ganador.
- Ocultar el logo solo en Radio.
- Letras con degradé: poné un degradé en un color de texto y Race-G lo aplica a las letras manteniendo el fondo de la caja.
💬 Chat YT
Todo el chat de YouTube: comentario destacado (posición, ancho, fondo, avatar, tipografía), feed de chat y el widget EN VIVO. Si querés ocultar los avatares, desactivalos en el destacado y en el feed.
Screenshots/estilo-visual-chat-yt.pngPestaña Chat YT con las opciones del comentario destacado.🚩 Banderas
Tiene su propio panel: para cada estado (verde, amarilla, roja, llegada, FCY, SC) configurás fondo, imagen y texto.
Screenshots/estilo-visual-banderas.pngPestaña Banderas con la configuración de color, imagen y texto por estado.Agregar fuentes
Las fuentes aparecen automáticamente en los selectores de tipografía del editor. Para sumar nuevas hay un gestor con tres opciones:
Archivo de fuente
Un archivo .ttf, .otf, .woff o .woff2.
Paquete ZIP
Varios archivos de fuente juntos. Se agregan todos los que haya dentro.
Google Fonts
Escribís el nombre de la fuente y tocás Añadir.
Screenshots/estilo-visual-fuentes.pngVentana "Añadir fuente" con las tres opciones y la lista de fuentes personalizadas agregadas.Una vez agregada, elegila en Tipografía → Fuente madre y todo el layout cambia de letra.
Rótulos custom
Los rótulos custom son zócalos de texto libre que mandás al aire desde Play → Rótulos custom. Se organizan en grupos (General, Entrevistas, Publicidad…) y su aspecto se define por tipo: todos los de 1 línea comparten un estilo, todos los de 2 líneas otro y todos los de 3 líneas otro. Así mantenés coherencia visual.
Screenshots/rotulos-custom-lista.pngRecorte de Play → Rótulos custom con los grupos y el botón + para crear un rótulo.| Opción | Qué controla |
|---|---|
| Fondo | Sólido (color y opacidad), degradé (dos colores y ángulo) o imagen con oscurecimiento para que el texto se lea. |
| Borde | Color, grosor y lado (izquierdo, derecho, arriba, abajo o todos). El clásico es 4px amarillo a la izquierda. |
| Forma | Radio de las esquinas, padding vertical y horizontal, ancho mínimo y separación entre líneas. |
| Línea 1, 2 y 3 | Color, tamaño, peso y mayúsculas de cada línea. |
Para cambiar el look de todos los rótulos de un tipo, abrí la pestaña 🎨 Estilos por tipo, editá y guardá: se aplica en vivo. Las imágenes de fondo se suben ahí mismo.
Screenshots/rotulos-custom-estilos.pngPestaña Estilos por tipo con el tipo de 1 línea abierto: fondo, borde y tipografía de la línea 1.Crear un estilo nuevo desde cero
Preguntas frecuentes
| Pregunta | Respuesta |
|---|---|
| ¿Puedo romper algo editando un estilo? | No. Si algo no te gusta, volvé a elegir otro estilo o el estilo por defecto. |
| ¿Cómo paso mis estilos a otra PC? | Los estilos son archivos .css en la carpeta styles de Race-G. Copiá esa carpeta a la otra PC y aparecen en la lista. |
| Borré el estilo activo, ¿qué pasa? | Race-G vuelve al estilo por defecto. |
| Cambié algo y no se ve en OBS. | Verificá que el estilo esté guardado y elegido en Estilo activo. Si usás fuente Navegador, refrescá la fuente (ver Salida HTML). |
| El texto se corta o no entra. | Subí el ancho del gráfico en Layout, bajá el tamaño de fuente o elegí un formato de nombre más corto. |
