Códigos CSS más solicitados

Puede utilizar la herramienta CSS para editar sus páginas web y personalizar la apariencia de varios aspectos de su evento virtual o híbrido. Tenga en cuenta que CSS es un lenguaje de estilo que se usa ampliamente para personalizar sitios web y, por lo tanto, es mejor que lo utilicen los desarrolladores. En estas preguntas frecuentes, le mostraremos cómo utilizar los códigos CSS solicitados con más frecuencia, lo que le permitirá obtener algunas ideas sobre cómo llevar la personalización de su evento a otro nivel.

Antes de continuar, consulte este artículo para comprobar qué páginas web se pueden editar y cómo hacerlo.

Personalización del Virtual Lobby

¿Cómo puedo personalizar la imagen de fondo del Virtual Lobby?

Puede cambiar la imagen de fondo principal en su Virtual Lobby. Consulte este artículo para aprender cómo.

Cuando se utiliza el diseño clásico, la imagen de fondo debe cubrir toda la pantalla. Al usar el diseño de Neo, el fondo solo cubrirá el lado derecho de la pantalla. Haga click aquí para obtener más información sobre los diseños del Virtual Lobby.
¿Cómo puedo personalizar la imagen de fondo del Virtual Lobby?

En la plantilla de Neo, para completar el lado izquierdo de la página y el banner derecho que no cubrió el paso anterior, use los códigos a continuación:

Al seleccionar el modo de plantilla Neo Dark, asegúrese de que el código CSS comience con body.neo-layout.dark
  1. Lado izquierdo de la página:

body.neo-layout #liveContent .lobby .container-box .scrollable-container-box {

width: calc(60vw - 72px);

background-color: #002242 !important;

padding: 8px 36px;

padding-right: 22px;

box-sizing: border-box;

border-right: 1px solid #DADDDE;

min-height: calc(100vh - 62px);

}

  1. Banner izquierdo en la parte superior de la página:

body.neo-layout #barTop .leftBar {

background-color: #002242 !important;

border-right: 1px solid transparent!important;

}

  1. Banner derecho en la parte superior de la página:

body.neo-layout #barTop .rightBar {

background-color: #002242 !important;

}

Personalización del Virtual Lobby

Debe reemplazar #002242 con cualquier otro código hexadecimal para que pueda ingresar el color que le gustaría tener en el fondo de su Virtual Lobby.

¿Cómo cambio los colores de los encabezados en el Virtual Lobby?

  • Para cambiar los colores en los que se mostrarán Actividades, Patrocinadores, Networking y Salas de Grupos en el Lobby, use el siguiente código:

#liveWrapper #liveContent .lobby-header h1 span {color: #FF4500 !important;}

El código hexadecimal #FF4500 se puede reemplazar por cualquier otro código hexadecimal que desee.

El código anterior funciona para ambos diseños: Clásico y Neo.
  • Para cambiar el color en el que se muestra el Encabezado de Bienvenida de la tarjeta de bienvenida del Virtual Lobby, utilice el siguiente código:

body.neo-layout #liveContent .lobby .container-box .scrollable-container-box #welcome .welcome-title {width: calc(1400px 1200px);    color: #FFB247 !important;}

El Encabezado de Bienvenida solo está presente si está utilizando el diseño Neo.

Cambiar el color de la fuente en el chat de actividades

  • Utilice el siguiente código:

#liveContent .chat-container .chat-unpinned .chat-body .chat {

color: #e5a85e !important;

}

Ocultar la pestaña Virtual Lobby

Algunos organizadores de eventos no quieren que los participantes tengan acceso al Virtual Lobby antes de que comience el evento. Si ese es el caso, puede ocultar la pestaña Virtual Lobby hasta antes de que comience el evento presionando Configuración> Pestañas> Virtual Lobby (en la esquina superior izquierda). Luego, desmarque la columna Visible correspondiente al Virtual Lobby y presione Fin para guardar los cambios.

Ocultar la pestaña Virtual Lobby

                                    

Después de hacer eso, el icono del Virtual Lobby debería desaparecer del menú del Lobby, pero en Mi cuenta, el botón Abrir Lobby seguirá apareciendo.

 botón Abrir Lobby en Mi cuenta

Si también desea eliminar el botón Abrir lobby, deberá hacerlo editando el código fuente y agregando el siguiente código a la página de detalles del evento.

  • Presione Evento > Detalles > Editar > desplácese hacia abajo hasta que vea el botón azul Código fuente > agregue el siguiente código:

#headerVue .eventCover-info-virtual-lobby {

display: none;

}

Cómo ocultar el botón de solución de problemas(Troubleshoot)

  • En la página de código fuente, añada el siguiente código:

.v2-barTop .barContent

.barDropdown.optionTroubleshoot{

display : none !important;

}

En el Virtual Lobby, el botón de gestión de problemas(Troubleshoot) estará oculto en ambos: Neo y Classic layouts. A continuación puede encontrar un ejemplo en el Neo:

troubleshoot button hidden with CSS code

Quite el botón de levantar la mano en las actividades

  • En la página Código fuente, agregue el siguiente código:
    #liveContent .videos .videos-controls .toolRaiseHands {
    position: absolute;
    z-index: 15;
    padding: 7px;
    display: none;
    }
  • Así es como debería verse el código:

Ocultar el correo electrónico del orador en el Virtual Lobby Neo

  • En la página Código fuente, agregue el siguiente código:

#InEventDialog .speaker-modal [data-field="email"] {

display: none !important;

}

Ocultar el correo electrónico del orador en el Virtual Lobby clásico

  • Si está utilizando el diseño clásico, utilice este código en su lugar:

#liveWrapper .live-speakers .floating-info [data-field="email"] {

   display: none !important;

}

Editar otras funciones de las páginas web

  • Para editar otras características de las páginas web, vaya a la página web, busque el elemento o elementos en particular que desea cambiar, haga click con el botón derecho y presione Inspeccionar.
  • En este ejemplo, cambiaremos el tamaño de fuente y el color del formulario de inscripción.
  • Haga click con el botón derecho en el texto del formulario de inscripción y haga click en inspeccionar
  • Verá abierta la pestaña Estilos, que contiene el código de la fuente y el color de la fuente.
Editar otras funciones de las páginas web

Para asegurarse de que está cambiando el fragmento de código correcto, coloque el cursor sobre el código, lo que sea que esté tratando de editar se resaltará, lo que significa que debería poder ver lo que está a punto de configurar.
  • Por ejemplo, cuando coloco el cursor sobre el código .formcard, la fuente del formulario se resalta:

Editar otras funciones de las páginas web

  • Copie y pegue el código en el cuadro CSS personalizado en la página de detalles del evento.
  • Edite el tamaño de fuente y los colores según sus preferencias.

Editar otras funciones de las páginas web

No se permite el uso de JavaScript para la personalización de CSS de la plataforma. JavaScript solo está permitido en la plataforma al crear páginas de destino, pero, por favor tenga en cuenta que no permitimos JavaScript en el dominio raíz.

¿Cómo agrego una zona horaria a la agenda del sitio web?

Para estos ejemplos, agregaremos información de la zona horaria a su sitio web, lo que ayudará a los participantes de todo el mundo a realizar un seguimiento de la agenda de su evento. Tenga en cuenta que los horarios que se muestran en el Virtual Lobby dependen del dispositivo y los códigos a continuación se aplican exclusivamente a la visualización de la agenda de su sitio web:

  1. Visualización de la zona horaria debajo de la fecha de la actividad:
  • Vaya a la página Evento > Detalles, haga click en el botón Editar y desplácese hacia abajo para hacer click en el botón Código fuente.
  • Copie y pegue el código a continuación en la página Código fuente.

#websiteContent .calendar .tabs:after {

content: "zona horaria";

font-size: 15px;

}

  • Así es como se supone que debe verse el código en la página del código fuente.
Tenga en cuenta que el texto entre / * * / no es parte del código, sino una marca para organizar sus códigos de personalización.

agrego una zona horaria a la agenda del sitio web

  • A continuación se muestra un ejemplo de cómo se mostrará en el sitio web (hora del este).

Ver la Agenda

  1. Visualización de la información de la zona horaria justo al lado de la hora de finalización de la actividad:
  • Copie y pegue el código a continuación en la página Código fuente.
    #websiteContent .time:after {

content: "Escriba su zona horaria aquí";

font-size: 16px;

}

  • Así es como debería verse el código en la página Código fuente:
agrego una zona horaria a la agenda del sitio web

  • A continuación se muestra un ejemplo de cómo se mostrará en el sitio web (EST)

Ver la hora en las diferentes actividades

¿Cómo elimino la zona horaria y la fecha del evento del formulario de inscripción/compra?

La fecha y la hora del evento, así como el huso horario establecido en la página de detalles del evento, se mostrarán en el Formulario de Inscripción y en el Formulario de Compra (si las entradas están habilitadas).

  • Si desea eliminar esa información de estas páginas, puede ingresar el código a continuación:

#formContent .eventCover .eventDate {

visibility: hidden !important;

}

#purchaseContent .eventCover .eventDate {

visibility: hidden !important;

}

  • Así es como debería verse el código en la página del código fuente:
CSS code to hide the timezone on forms
  • Y la imagen a continuación muestra ambas situaciones, a la izquierda se muestra la zona horaria y a la derecha se usa el código CSS para ocultar la zona horaria:
¿Cómo elimino la zona horaria y la fecha del evento del formulario de inscripción/compra?

Agregar una imagen de fondo a otras páginas

Aquí hay otras páginas a las que puede agregar una imagen de fondo. Puede copiar y pegar el código a continuación en el CSS, solo recuerde insertar el enlace de la dirección de la imagen. También puede cambiar el tamaño de fondo "px" para que coincida con su imagen.

  1. Mi cuenta

#myAccountWrapper #myAccountContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

  1. Mi Agenda

#myAgendaWrapper .v2-bgContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background size: 1400px 1200px;

}

  1. Mis Entradas

#ticketManagerWrapper .v2-bgContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

  1. Mi Formulario

#myFormsWrapper .v2-bgContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

  1. Mi Aplicación

#appContent.v2-bgContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

  1. Formulario de inscripción

#formVue .formContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

  1. Formulario Personalizado

#customFormVue #customFormContent {

background-image: url("la dirección del enlace de la imagen va aquí");

background-size: 1400px 1200px;

}

Títulos y colores de fondo

Para cambiar los colores de fondo, puede seguir los códigos anteriores para cada página, esta vez en lugar de background-image: y background-size: utilizará background-color:

  • Para agregar un color, ingresará un código hexadecimal que se ve así: #FF0085
  • Por ejemplo, para cambiar el color de fondo del formulario de inscripción, después de la raíz del formulario, agregue el siguiente código:

#formVue .formContent {

background-color: #FF0085;

}

¿Cómo oculto el botón 'Ir al evento'?

La página de contenido es la página donde aterrizarán sus participantes una vez que finalicen su registro a través del formulario de inscripción. Haga click aquí para obtener más información sobre la página de contenido.

Para ocultar la página de contenido, copie y pegue el código siguiente en el campo Código fuente:

#formContent section.form [role = "alert"] .formCard .formEnd {

display: none !important;

}

A la izquierda, tiene el comportamiento predeterminado del formulario de inscripción sin que el botón ¡Ir al evento! esté oculto. A la derecha, la página de contenido y, por lo tanto, el botón ¡Ir al evento! se ha ocultado.

ocultar el botón 'Ir al evento'


¿Cómo lo hicimos?