Como mover el texto en las alertas de Streamlabs

GamingPor Lisandro Patiño

¿Estás intentando configurar las alertas en Streamlabs pero el texto no está correctamente alineado? En este tutorial rápido te enseñaré a solucionarlo.

Streamlabs nos da más libertad de las que crees. Esta vez te enseñaré a mover el texto de tus alertas en cualquier dirección que desees: incluso rotarlo y bajarle la opacidad. Para ello utilizaremos líneas de CSS, una especie de lenguaje de programación basado en etiquetas.

Paso 1

En el widget "Alert box", asegurate de tener la alerta bien configurada. Busca la configuración de habilitar HTML/CSS personalizado.

Una vez esté habilitado aparecerá un nuevo cuadro a continuación de un montón de código: haga click en el ecabezado CSS, entre los encabezados HTML y JS.

Primero

Paso 2

Una vez esté activado, puede ocurrir que tengas código como no. En caso de tenerlo, copia y pega el siguiente código:

    #alert-text {  
        padding: 20px;  
    }

En caso de ya tener código, ve hasta la linea 24, donde debería decir #alert-text. Aquí es donde moverás hacia arriba, abajo, derecha, izquierda, etc.

Segundo

En este caso vamos a mover el texto hacia abajo, entonces reemplazaremos "padding: 20px" por "padding-top: 20px". De esta manera el texto de la alerta se moverá 20 pixeles hacia abajo.

La cantidad de pixeles es a tu gusto, dependiendo de tu diseño, y es totalmente a prueba y error. Comienza con un número (20px por ejemplo) y ve aumentando o reduciendo, testeando la alerta, hasta que encuentres el número adecuado.

Otras opciones usando "padding"

Puedes usar otras etiquetas de padding e incluso combinarlas para lograr otras posiciones:

    #alert-text {  
        padding-bottom: 50px; // para moverlo hacia arriba
        padding-top: 50px; // para moverlo hacia abajo
        padding-left: 50px; // para moverlo hacia la izquierda
        padding-right: 50px; // para moverlo hacia la derecha
    }

Cabe aclarar de nuevo que el número "50" puede variar de acuerdo a la posición que estés buscando.

Rotando el texto

Posiblemente el diseño de tu alerta necesite que rotes el texto en cierto ángulo. ¡Tranquilo! Con CSS y Streamlabs esto es posible. Dentro del mismo bloque de llaves en donde pusiste tu padding personalizado, debes agregar la siguiente linea:

    transform: rotate(20deg)

De esta manera nuestro código quedaría algo así (posiblemente):

    #alert-text {  
        padding-top: 50px; // para moverlo hacia abajo
        padding-left: 50px; // para moverlo hacia la izquierda
        transform: rotate(20deg); // para rotarlo 20 grados
    }

El número 20 puedes cambiarlo por cualquiera sea el ángulo de rotación que necesites, nuevamente, también es a prueba y error. También es posible usar grados negativos colocando un "-" antes del número:

    transform: rotate(-20deg)

Otros efectos interesantes

También es posible agregar efectos como blur (desenfoque) u opacidad:

    #alert-text {  
        opacity: 0.5; // 0 es totalmente transparente, 1 es totalmente visible
        filter: blur(20px); // 0 es sin blur, a medida que la cantidad de pixeles aumenta, el efecto también
    }

¡Cuidado! La cantidad de blur que le agregues puede afectar al rendimiento de tu stream, ya que el efecto hace uso de tu PC para renderizar la cantidad de pixeles repetidos que le especifiques

¡Espero que mi mini-tutorial te haya servido! A veces queremos que el texto encaje justo en algún lugar y no sabemos como hacerlo, ¡espero haberte sacado de algún posible apuro!