Dale estilo a tu overlay de mando con CSS personalizado

El editor cubre colores, tamaño, distribución y etiquetas. Cuando quieres algo que no ofrece, como un contorno que se enciende al pulsar, etiquetas que solo aparecen mientras mantienes un botón o tu propia tipografía, el CSS personalizado de Pro te deja rediseñar cualquier parte del overlay. Esta página lista todo lo que puedes apuntar y las pocas cosas que conviene dejar en paz.

Dónde va el CSS

Abre tu overlay en el editor, ve a la pestaña CSS y elige Escribir CSS. El CSS se aplica al overlay en OBS, no a la vista previa del editor, y llega a OBS en cuanto guardas, sin actualizar la fuente. Usa la vista previa del editor para la distribución y comprueba el estilo en OBS.

Deja vacía la caja de CSS personalizado en las propiedades de la fuente de navegador de OBS. Apunta a la misma página, pero el CSS guardado en gamepad.lol viaja con el overlay a cada escena y a cada perfil de OBS que use su enlace.

El overlay es SVG

Cada control es una forma SVG dentro de un único elemento svg. Eso decide qué propiedades funcionan: las formas se colorean con fill y stroke, no con background y border, y el texto se colorea con fill, no con color. Los tamaños como font-size y stroke-width se miden en el dibujo propio de la skin, de 640 × 360, y escalan con el overlay, no en píxeles de pantalla.

Selectores

Cada control tiene su propio id, y todos los controles de un mismo tipo comparten una clase. En el editor de CSS, escribe #, . o [ para ver la lista exacta de tu skin.

• Botones frontales, con el nombre de los botones de la skin: #face-a, #face-b, #face-x, #face-y en Xbox y Switch Pro; #face-cross, #face-circle, #face-square, #face-triangle en PlayStation; #face-down, #face-right, #face-left, #face-up en la skin neutra. Clase .gpl-button.
• Cruceta: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Clase .gpl-button.
• Botones superiores y de menú: #bumper-l, #bumper-r, #select, #start. Clase .gpl-button.
• Sticks: #stick-l y #stick-r son las cabezas que se mueven, #stick-l-ring y #stick-r-ring los aros que las rodean. Clases .gpl-stick y .gpl-stick-ring.
• Gatillos: #trigger-l y #trigger-r son los rellenos, #trigger-l-track y #trigger-r-track los fondos. Clases .gpl-trigger y .gpl-trigger-track.
• Etiquetas y símbolos: el texto de un botón etiquetado es su id más -label, por ejemplo #face-a-label o #bumper-l-label; los símbolos de PlayStation son #face-cross-glyph y así. Clases .gpl-label y .gpl-glyph. Solo existen mientras las etiquetas de botones estén activadas.

Los ids de los botones frontales siguen a las letras, no a la posición. En Xbox la A está abajo y en Switch Pro está a la derecha, así que una regla para #face-a se mueve al cambiar entre esas skins. Usa las clases cuando quieras que una regla sobreviva a un cambio de skin.

El estado pulsado

Mientras un control se mantiene, su forma lleva el atributo data-pressed: los botones mientras están pulsados, los gatillos en cuanto se aprietan algo, los sticks mientras están clicados.

.gpl-button[data-pressed] {
  fill: #ffd60a;
}

Una etiqueta o un símbolo van justo detrás de su botón, así que puedes darles estilo desde el estado del botón con +. Las etiquetas son texto y toman fill; los símbolos de PlayStation son trazos y toman stroke:

.gpl-button[data-pressed] + .gpl-label {
  fill: #111111;
}

.gpl-button[data-pressed] + .gpl-glyph {
  stroke: #111111;
}

Lo que no debes tocar

El overlay se anima escribiendo atributos SVG en cada fotograma: transform en las cabezas de los sticks, height e y en los rellenos de los gatillos. El CSS gana a los atributos, así que poner esas propiedades en esos elementos los congela en su sitio. Da estilo a todo lo demás sin miedo: fill, stroke, stroke-width, opacity, tipografías.

Con los colores pasa lo mismo. Los colores de Reposo y Pulsado del editor también son atributos, así que en cuanto tu CSS ponga fill en un botón, escribe también una regla [data-pressed] para él, o se verá igual pulsado que suelto.

Límites

• Nada de archivos remotos. Se rechazan @import y url() apuntando a una dirección web. Las imágenes y las tipografías hay que incrustarlas como URI data: en base64.
• 20.000 caracteres en total, imágenes incrustadas incluidas. Es de sobra para dar estilo y meter iconos pequeños, no para ilustraciones completas.
• Nada de barras invertidas. Los escapes de CSS se rechazan, porque pueden deletrear cualquier cosa que bloqueen las demás reglas.
• Solo en Pro. Si tu suscripción termina, tu CSS sigue guardado pero deja de aplicarse, y vuelve si te suscribes otra vez.

Si se rechaza un guardado, el editor muestra un aviso y mantiene el diálogo abierto, así que no pierdes nada de lo escrito y el CSS que ya está en directo en OBS se queda como estaba.

Ejemplos

Los colores de tu marca

.gpl-button,
.gpl-stick {
  fill: #1f1f24;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  fill: #9146ff;
}

.gpl-trigger {
  fill: #9146ff;
}

Un contorno que se enciende al pulsar

.gpl-button {
  stroke: #9146ff;
  stroke-width: 0;
}

.gpl-button[data-pressed] {
  stroke-width: 4;
}

Discreto hasta que se pulsa

.gpl-button,
.gpl-stick,
.gpl-stick-ring,
.gpl-trigger-track {
  opacity: 0.35;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  opacity: 1;
}

Etiquetas solo mientras se mantiene

.gpl-label,
.gpl-glyph {
  opacity: 0;
}

.gpl-button[data-pressed] + .gpl-label,
.gpl-button[data-pressed] + .gpl-glyph {
  opacity: 1;
}

Una tipografía instalada en tu PC

El navegador de OBS puede usar las tipografías instaladas en el ordenador donde corre, así que una fuente local no necesita subida:

.gpl-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

Quien abra el overlay sin esa tipografía verá la de respaldo.

Para mover u ocultar elementos, usa mejor la pestaña Distribución: guarda las posiciones por elemento y no pelea con la animación.