Guias y tutoriales. Alertas para Twitch Custom CSS

Tema en 'Guias y Tutoriales' iniciado por Chikarkas36, 30 Ene 2017.

By Chikarkas36 on 30 Ene 2017 a las 17:09
  1. Chikarkas36

    Chikarkas36 Usuario Miembro del equipo CEO-Admin

    63
    16
    18
    País:
    United States
    Tema de Staff
    Adición de CSS personalizado en la lista de eventos de alertas de Twitch
    alertaslist.jpg
    Ahora, entra en el panel de control de Twitch Alert. Desde aquí, haga clic en "Lista de eventos" - una vez que la página se cargue, haga clic en el menú desplegable en la sección de temas y cámbielo a "CSS personalizado". Haga clic derecho dentro del cuadro de texto y pulse Pegar. En este punto, usted está casi listo!


    Ahora puede personalizar cómo son sus alertas. El color del tema controlará el color de fondo del rectángulo con los iconos en él. En las opciones de la Lista de eventos puede elegir mostrar seguidores, suscriptores y donaciones. Marque las casillas que le gustaría mostrar aquí. El control deslizante Max Events controlará cuántos eventos se muestran al mismo tiempo, personalmente dejo mi control deslizante a las 5, pero siéntete libre de elegir lo que funciona mejor para tu transmisión. Desafortunadamente, el color de la caja que tiene los nombres de los usuarios y el tipo de eventos no se puede cambiar a menos que edite el CSS. Para hacer esto, deseará entrar en la caja de CSS de encargo y desplazarse a la línea 86. Aquí, usted puede fijar el color a cualquier color de CSS que usted quisiera. Si usted no sabe mucho sobre CSS, recomendaría no cambiar esto. Pero, por ejemplo, si queremos usar rojo, simplemente cambiamos el # 222 a # ff0000 - o el color de su elección. El color del texto controla el color de su texto. Puede utilizar el menú desplegable para que la fuente seleccione la fuente que desee. Si no estás seguro del estilo de fuente que deseas, consulta Google Fonts para ver tus opciones.


    El tamaño del texto, el color de fondo, la animación y la velocidad de la animación no se verán afectados.


    Elija si desea invertir la alineación a lo largo de un eje X o Y. Esto significa que puede alinearse a la derecha o izquierda, o incluso animar en desde la parte superior o inferior. Haga clic en Guardar configuración.


    Llevar su lista de eventos a OBS y XSplit

    Después de guardar, la sección "Cómo usar" en la parte superior tendrá una URL que podrá agregar a OBS o XSplit. Simplemente agregue la URL a una fuente de navegador CLR para OBS (fuente del navegador para OBS Studio) o una fuente de navegador para XSplit. Dentro de su programa de streaming asegúrese de establecer su ancho a 600px por 600px.

    Copiar y pegar este codigo css:
    Insertar CODE, HTML o PHP:
    @import url("https://fonts.googleapis.com/css?family=$font_family");
    
    html,
    .widget-EventList li > div {
      -webkit-transform: rotateX($rotate_x) rotateY($rotate_y);
              transform: rotateX($rotate_x) rotateY($rotate_y);
    }
    
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      font-family: "$font_family";
      letter-spacing: 1px;
    }
    
    .widget-EventList {
      position: absolute;
      top: 0;
      left: 0;
      height: 600px;
      width: 600px;
    }
    
    .widget-EventList li {
      height: 0px;
      overflow: hidden;
      margin-bottom: 1px;
      -webkit-animation: grow .4s ease-in 1 forwards;
              animation: grow .4s ease-in 1 forwards;
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(1) {
      opacity: 1;
    }
    
    .widget-EventList li:nth-child(2) {
      opacity: .75;
    }
    
    .widget-EventList li:nth-child(3) {
      opacity: .5;
    }
    
    .widget-EventList li:nth-child(4) {
      opacity: .25;
    }
    
    .widget-EventList li:nth-child(5) {
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(6) {
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(7) {
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(8) {
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(9) {
      opacity: .1;
    }
    
    .widget-EventList li:nth-child(10) {
      opacity: .1;
    }
    
    li div {
      opacity: 0;
      padding: 0 50px 0 10px;
      height: 50px;
      margin-left: 1px;
      float: left;
      line-height: 50px;
      position: relative;
      color: $text_color;
      -webkit-animation: info .5s ease-in 1 .6s forwards;
              animation: info .5s ease-in 1 .6s forwards;
      background: url("http://uploads.twitchalerts.com/000/028/205/860/bg1.png") no-repeat;
      /* info */
    }
    
    div.background {
      opacity: 0;
      padding: 0;
      width: 50px;
      height: 50px;
      background-size: 42px 42px !important;
      background-position: 4px 3px !important;
      background: url("http://uploads.twitchalerts.com/000/127/320/526/Rocket.gif") no-repeat $theme_color;
      float: left;
      margin-left: 0;
      -webkit-animation: icon .5s ease-in 1 .4s forwards;
              animation: icon .5s ease-in 1 .4s forwards;
      /* icon */
    }
    
    .donation .background {
      background: url("http://uploads.twitchalerts.com/000/127/320/526/Money.gif") no-repeat $theme_color;
    }
    
    .twitch-follow .background {
      background: url("http://uploads.twitchalerts.com/000/127/320/526/heart-animation3.gif") no-repeat $theme_color;
    }
    
    .tag {
      position: absolute;
      top: 3px;
      right: 5px;
      font-size: 12px;
      line-height: 12px;
      color: $text_color;
      font-family: "$font_family";
    }
    
    @-webkit-keyframes grow {
      from {
        height: 0px;
      }
      to {
        height: 50px;
      }
    }
    
    @keyframes grow {
      from {
        height: 0px;
      }
      to {
        height: 50px;
      }
    }
    
    @-webkit-keyframes icon {
      0% {
        left: -20px;
        opacity: 0;
      }
      40% {
        left: 0px;
        opacity: 1;
      }
      60% {
        left: 2px;
        opacity: 1;
      }
      100% {
        left: 0px;
        opacity: 1;
      }
    }
    
    @keyframes icon {
      0% {
        left: -20px;
        opacity: 0;
      }
      40% {
        left: 0px;
        opacity: 1;
      }
      60% {
        left: 2px;
        opacity: 1;
      }
      100% {
        left: 0px;
        opacity: 1;
      }
    }
    
    @-webkit-keyframes info {
      0% {
        left: 2px;
        opacity: 0;
        text-indent: 0px;
      }
      40% {
        left: 4px;
        opacity: 1;
        text-indent: 0;
      }
      60% {
        left: 0px;
        opacity: 1;
        text-indent: 10px;
      }
      100% {
        left: 0;
        opacity: 1;
        text-indent: 0px;
      }
    }
    
    @keyframes info {
      0% {
        left: 2px;
        opacity: 0;
        text-indent: 0px;
      }
      40% {
        left: 4px;
        opacity: 1;
        text-indent: 0;
      }
      60% {
        left: 0px;
        opacity: 1;
        text-indent: 10px;
      }
      100% {
        left: 0;
        opacity: 1;
        text-indent: 0px;
      }
    }
    
     
    Última edición: 30 Ene 2017
Mexico
Chikarkas36 CEO y creador de CM-Gaming me gustan mucho los videojuegos actualemte tengo 31 años soy originario de GDL Jalisco, Mexico soy padre de 2 Hijos y siempre busco la manera de mejorar la comunidad Gamer Hispano hablante.


Comentarios

Tema en 'Guias y Tutoriales' iniciado por Chikarkas36, 30 Ene 2017.

Compartir esta página