soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Referencia CSS personalizada de experiencias en página

    En este tema se describen las clases CSS que se utilizan al crear experiencias en página. Esta información se proporciona para que pueda dar más estilo a sus experiencias usando CSS.

    Componentes estilizados

    Estas clases CSS se aplican a los elementos que se diseñan a través de la interfaz de usuario.  Estos estilos se pueden anular con CSS personalizado mediante el uso de estas clases.  También puede hacer que los estilos de interfaz de usuario se apliquen a HTML personalizado mediante estas clases. Estas clases son estables y no deberían cambiar entre las versiones de la plantilla. 

     

    Clase Descripción
    ee-components-style-global Estilo global para la experiencia
    ee-componentes-estilo-anclaje Estilo de enlace normal
    ee-components-style-navegación-componentes-e- Estilo de enlace de navegación (botón Atrás, botón de compartir, etc.)
    EE-Componentes-estilo-VideoInfo Estilo de cuadro de información de vídeo (sin superposición)
    EE-Componentes-estilo-título de videojuego Estilo de título de vídeo (sin superposición)
    EE-Componentes-estilo-Videodescripción Estilo de descripción de vídeo (sin superposición)
    ee-components-estilo-superposición Superponer estilo de cuadro de información de vídeo
    EE-Componentes-estilo-superposición Título Superponer estilo de título de vídeo
    EE-Componentes-estilo-superposición Descripción Estilo de descripción de vídeo de superposición
    EE-Componentes-estilo-superposición Banner Estilo de banner de superposición/indicador (indicador vigilado)
    EE-Componentes-Style-Botón de reproducción Estilo básico del botón Reproducir (consulte el componente Botón de reproducción para obtener un estilo más complejo)

    Componentes base

    Estos son componentes básicos que se pueden diseñar usando CSS personalizado.  Las clases de componentes son estables y no deberían cambiar entre versiones de plantilla.  Las clases internas son relativamente estables y lo más probable es que no cambien entre las versiones de la plantilla.

    Botón de reproducción

    El botón de reproducción aparece en todas las miniaturas de vídeo.

     

    Clase Descripción
    ee-components-play-button Componente del botón Reproducir
    ee-componentes-play-botón-svg Contenedor SVG
    ee-components-play-botón-grupo Grupo interno SVG
    ee-components-play-botón-botón Botón Reproducir grupo SVG
    ee-components-play-botón-frame Cuadro de círculo del botón Reproducir
    ee-components-play-botón icono Icono del botón Reproducir
    ee-components-play-botón-cuenta atrás Grupo SVG cuenta atrás
    ee-components-play-botón-pausa Icono de pausa de cuenta atrás
    ee-components-play-botón-texto Texto de cuenta atrás
    ee-components-play-botón-pista Pista de cuenta atrás
    ee-components-play-botón-runner Progreso de cuenta atrás

     

    Flecha

    Flechas para la plantilla del carrusel (para opciones de presentación de sangrado único y completo).

     

    Clase Descripción
    ee-components-flecha Componente Flecha (incluido el fondo)
    ee-componentes-flecha-interior Flecha

     

    A continuación:

    El indicador UP-siguiente se muestra en miniaturas grandes cuando se habilita automáticamente Avance al siguiente vídeo en la configuración del Reproductor.

     

    Clase Descripción
    ee-componentes-arriba-siguiente Componente Up Next
    ee-components-up-next-miniatura Siguiente miniatura del vídeo
    ee-components-up-siguiente texto Siguiente texto (cuenta regresiva + nombre de vídeo)
    ee-components-up-next-text-cuenta regresiva Texto de cuenta atrás
    ee-components-up-next-close Botón para cerrar

     

    Indicador de vídeo visto

    El indicador observado se muestra cuando la opción está activada en la configuración de vídeo.

     

    Clase Descripción
    ee-components-vid-video-banner Indicador de vídeo visto

     

    Componentes vídeo

    Componentes relacionados con vídeos individuales. Estas clases son estables y no deben cambiar entre versiones de plantilla.

    Reproductor

    Contenedor para el jugador de Brightcove.

     

    Clase Descripción
    ee-componentes-jugador Contenedor reproductor

     

    Miniatura

    Contenedor básico para imágenes de póster de vídeo (no incluye el botón de reproducción).

     

    Clase Descripción
    ee-components-miniatura Contenedor de miniaturas

     

    Información del vídeo

     

    Clase Descripción
    e-componentes-video-info Contenedor de información de
    ee-componentes-video-info-content Contenedor de información de vídeo interno
    ee-componentes-video-info-name Contenedor de nombre de
    ee-componentes-video-info-nombre-contenido Nombre del vídeo
    ee-componentes-video-info-duración Video duration
    ee-components-video-info-descripción Descripción del vídeo
    ee-componentes-video-info-related-link Enlace relacionado con el vídeo
    ee-components-video-info-descargar Enlace de descarga de vídeo

     

    Vista en miniatura de vídeo

    Contiene un componente Miniatura ajustado con un componente Información de vídeo.

     

    Clase Descripción
    ee-components-video-miniatura Componente de miniatura de vídeo

     

    Componentes de la colección

    Componentes relacionados con colecciones de vídeos (listas de reproducción, etc.). Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.

    Carátulas

    Presentación tridimensional de flujo de cubierta de vídeos.

     

    Clase Descripción
    ee-componentes-cobertura-flujo Componente de flujo de cubierta
    ee-components-cover-flow-item Elemento de flujo de cubierta (miniatura de vídeo)

     

    Tira de puntos

    Una tira de puntos que representa cada vídeo de la lista

     

    Clase Descripción
    e-componentes-tiras de puntos Componente de tira de puntos
    ee-components-punto-strip-item Artículo de tira de puntos
    ee-componentes-puntos-raya-punto Punto individual en la tira

     

    Carrusel Carrusel

    Un carrusel de imágenes de póster (con flechas)

     

    Clase Descripción
    ee-componentes-carrusel Componente carrusel de carrusel
    ee-componentes-cartel carousel-contenedor Contenedor fila
    ee-componentes-caráctico-carousel-fila Fila de póster
    ee-componentes-póster carousel-célula Elemento de fila (miniatura de vídeo)

     

    Tira de miniaturas

    Una tira de imágenes en miniatura (con flechas)

     

    Clase Descripción
    ee-components-thumbnail-strip Componente de tira de miniaturas
    ee-components-thumbnail-strip-contenedor Contenedor fila
    ee-components-thumbnail-strip-row Fila de miniatura
    ee-components-thumbnail-strip-cell Elemento de fila (miniatura de vídeo)

     

    Cuadrícula de vídeos

    Una cuadrícula de imágenes en miniatura

     

    Clase Descripción
    ee-componentes-video-grid componente de cuadrícula de vídeo
    ee-componentes-video-cuadrícula Elemento de cuadrícula (miniatura de vídeo)

     

    Lista de vídeo

    Una lista vertical de imágenes en miniatura

     

    Clase Descripción
    e-componentes-video-list Componente de lista de vídeo
    ee-componentes-video-lista-elemento Elemento de lista (miniatura de vídeo)

     

    Compartir componentes

    Componentes relacionados con el intercambio social.  Las clases Share Button son relativamente estables y lo más probable es que no cambien entre las versiones de la plantilla.  Es muy probable que las clases de Share Panel cambien en un futuro próximo y deberían considerarse inestables.

    Botón Compartir

    Botón o iconos Compartir.

    o bien

     

    Clase Descripción
    ee-components-compartir-botón Componente del botón Compartir
    ee-components-compartir-botón-botón Botón Compartir (no iconos)

     

    Compartir panel

    Panel de uso compartido cuando la pantalla de uso compartido en redes sociales está configurada en botón.

     

    Clase Descripción
    ee-components-compartido-envoltorio panel Componente de envoltura de panel
    ee-componentes-compartir-envoltor-interno Panel
    ee-components-compartir-wrapper-close Botón para cerrar
    ee-components-compartir-wrapper-item Compartir elemento
    ee-components-compartir-wrapper-nombre-elemento Nombre del elemento compartido

     

    Componentes editables

    Componentes que se pueden agregar a la experiencia a través de los botones más en la interfaz de usuario. Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.   No se proporcionan capturas de pantalla para estos componentes, ya que su apariencia depende en gran medida del contenido introducido por el usuario.

    Anuncio

    Componente de anuncio

     

    Clase Descripción
    ee-componentes-anuncio Componente de anuncio

     

    Código HTML personalizado

    Componente HTML personalizado

     

    Clase Descripción
    ee-componentes-html Componente HTML personalizado

     

    Imagen

    Componente de imagen

     

    Clase Descripción
    ee-components-imagen Componente de imagen
    ee-componentes-imagen-imagen-imagen Imagen interna

     

    Texto

    Componente de texto

     

    Clase Descripción
    ee-componentes-textos- Componente de texto

     

    Twitter

    Componente de Twitter

     

    Clase Descripción
    ee-componentes-twitter Componente de Twitter

     

    Clases globales

    Estas son clases que son globales para la experiencia. Estas clases son estables y no deberían cambiar entre las versiones de la plantilla. 

     

    Clase Descripción
    ee-components-app Elemento de experiencia ultraperiférica
    ee-components-vista Vista de experiencia (en página, lightbox)
    ee-componentes-contenedor Contenedor de componentes de botón Plus