A raíz de la implementación de mejoras en la customización de las promociones, se han realizado algunas pequeñas modificaciones en la parte visual de las mismas para tener unificados los elementos.

Para todos estos cambios se facilita, asimismo, códigos CSS para que se vuelva al estilo más parecido a como estaba antes del cambio. Estos códigos CSS deben añadirse, si se desea aplicar alguno, en la sección Editor > Diseño > Avanzado > CSS de vuestra promoción.

La customización CSS sólo está disponible para versión Marca Blanca.

Índice de contenidos:

• Cambios globales

  • Selección de texto y elementos

  • Opacidad del contenedor de la promoción

• Cabecera de la promoción

  • Iconos de menú e iconos de las redes sociales

• Texto

  • Párrafos y cabeceras H1, H2 y H3

  • Color de texto de las cabeceras H1

• Botones

  • General

  • Estilo lineal

• Imagen de fondo

  • General

• Ventanas emergentes

  • Compartir promoción / participación

• Cuestionario

  • Paginación (modo barra de progreso)

Cambios globales:

Selección de texto y elementos:

A partir de ahora, la selección de textos y otros elementos con el cursor se realizará en el color principal de la promoción con opacidad total, y no al 20% como anteriormente. El color del texto de los elementos seleccionados se vuelve, asimismo, negro o blanco según la claridad del color de fondo de la selección para asegurar su lectura.

El motivo de este cambio es que, según la configuración específica de algunas promociones, ese seleccionado no era visible.

Debe hacerse des del propio editor de la promoción (Editor > Diseño > Apariencia > Otros).

Opacidad del contenedor de la promoción:

A partir de ahora, la opacidad del contenedor debe hacerse desde el selector de color para el contenedor.

El motivo de este cambio es que ahora permitimos color de fondo personalizado al contenedor en RGBA, lo que implica que ya viene implícito la opción de la opacidad.

Debe hacerse des del propio editor de la promoción (Editor > Diseño > Apariencia > Colores).

Cabecera de la promoción:

Iconos de menú e iconos de las redes sociales:

A partir de ahora, los iconos tendrán el mismo color que el que se haya seleccionado en la sección Editor > Diseño > Enlaces > Color de texto.

El motivo de este cambio es que, ahora, tanto la cabecera como los enlaces en la misma pueden tener un color personalizado y, por razones de coherencia, todos los enlaces tienen el mismo color.

Código CSS para volver al estilo visual previo al cambio:

Si la cabecera de la promoción es blanca:

.header_cont .gui_square_button {
    --text-color:0, 0, 0, 1;
}

Si la cabecera de la promoción es negra:

.header_cont .gui_square_button {
    --text-color:255, 255, 255, 1;
}

Texto:

Párrafos y cabeceras H1, H2 y H3:

Se han unificado todos los bloques de texto en todas las páginas de la promoción a nivel de tamaño de letra, el interlineado y la separación de elementos.

El motivo de este cambio es que, ahora, se puede personalizar el tamaño de letra, el interlineado y el color de las cabeceras H1, H2 y H3 de forma independiente.

Código CSS para volver al estilo visual previo al cambio:

Depende de cada caso, página y texto en concreto.

Color de textos de las cabeceras H1:

Ahora las cabeceras H1 se muestran en el color de secundario.

El motivo de este cambio es que, de este modo, se gana en visibilidad a las cabeceras H1.

Código CSS para volver al estilo visual previo al cambio:

.root {
    --h1-color:var(--text-color-sec);
}

Botones:

General:

Se ha eliminado la siguiente opción de configuración:

• Tipo de botón sólido / lineal: este cambio ahora debe realizarse mediante la combinación de distintas opciones nuevas en la sección Editor > Diseño > Apariencia > Botones.

Los cambios aplicados para cada tipo de botón están listados a continuación:

• Botones sólidos:
  • Color de fondo: color principal de la promoción
  • Color de texto: color de texto de los botones especificado en el editor anterior
• Botones lineales:
  • Color de fondo: transparente
  • Color de texto: color principal de la promoción
  • Ancho de borde: 2px
  • Color del borde: color principal de la promoción
  • Color de fondo en estado HOVER: color principal de la promoción al 20% de opacidad
  • Color de texto en estado HOVER: color principal de la promoción al 80% de opacidad

Estilo lineal:

Se ha eliminado el icono de flecha en los botones de tipo lineal.

El motivo de este cambio ha sido la unificación y racionalización de los botones para permitir tener personalizaciones avanzadas.

Código CSS para volver al estilo visual previo al cambio:

.flex_button a:not(.vote_button)::after {
    font-family:"knk-icons";
    content:"\2666";
    font-size:1.6em;
    position:absolute;
    right:var(--grid-1);
    margin-inline-end:0;
    padding-block-start:3px;
    top:calc(50% - 10px);
    transition:right 0.2s ease-in-out;
}

@media (hover:hover) {
    .flex_button a:not(.vote_button):hover::after {
        right:0;
    }
}

Imagen de fondo:

General:

Se han eliminado las siguientes opciones de configuración:

• Imagen de fondo predefinida: este cambio ahora debe realizarse subiendo una imagen propia. Las promociones que ya se activaron con imágenes predefinidas seguirán teniendo esa imagen de fondo, pero si se desea realizar algún cambio, únicamente podrá realizarse subiendo una imagen propia. Des del mismo editor permitimos la descarga de la imagen predefinida actual para poder usarla, en caso de necesidad.
• Repetición de imagen de fondo: este cambio ahora debe realizarse subiendo una única imagen de fondo que incluya la repetición, o mediante CSS personalizado.
• Opacidad del color de fondo: este cambio ahora debe realizarse mediante el propio selector de color para el color de fondo. Si la imagen de fondo se establece como "Pantalla completa", la opción de color de fondo directamente no aparecerá (pues la imagen de fondo ocupará la totalidad del espacio disponible). En su lugar deberá aplicarse un tintado (que corresponde a un color sólido por encima de la imagen de fondo). Anteriormente, ambas funcionalidades eran realizadas por el mismo campo de "Color de fondo".

Ventanas emergentes:

Compartir promoción / participación:

A partir de ahora, los iconos de las redes sociales tendrán el mismo color que el que se haya seleccionado en la sección Editor > Diseño > Enlaces > Color de texto.

El motivo de este cambio es que, ahora, tanto la cabecera como los enlaces en la misma pueden tener un color personalizado y, por razones de coherencia, todos los enlaces tienen el mismo color.

Código CSS para volver al estilo visual previo al cambio:

.share_on_social.is_facebook {
    --text-color:var(--facebook-color);
}

.share_on_social .is_twitter {
    --text-color:var(--twitter-color);
}

.share_on_social .is_pinterest {
    --text-color:var(--pinterest-color);
}

.share_on_social .is_linkedin {
    --text-color:var(--linkedin-color);
}

.share_on_social .is_mail {
    --text-color:var(--mail-color);
}

.share_on_social .is_whatsapp {
    --text-color:var(--whatsapp-color);
}

.share_on_social .is_line {
    --text-color:var(--line-color);
}

.share_on_social .is_telegram {
    --text-color:var(--telegram-color);
}

Cuestionario:

Paginación (modo barra de progreso):

A partir de ahora, la barra de progreso se ubica encima de la pregunta, y no debajo.

El motivo de este cambio es que, de este modo, la barra de progreso es coherente con la de otros juegos de la plataforma (como el Letras Locas) y se evita el efecto de reposicionamiento entre preguntas de distinta altura.

Código CSS para volver al estilo visual previo al cambio:

.quiz_progress {
    order:1;
    margin:1em 0 0;
}