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.

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.

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:

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;

}

¿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.

• 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;}

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.

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.

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:

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.

• Por ejemplo, cuando coloco el cursor sobre el código .formcard, la fuente del formulario se resalta:

• 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.

¿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.

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

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:

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

¿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:

• 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:

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.