Códigos CSS más solicitados

Con InEvent, es fácil personalizar su Virtual Lobby usando el Editor de Virtual Lobby. El Editor de Virtual Lobby le permite diseñar su Virtual Lobby de una manera que refleje el estilo y la atmósfera de su evento.

Para aprender a usar el Editor de Virtual Lobby, consulte este artículo, si está usando el diseño Neo. Si está utilizando el diseño Clásico, consulte este artículo en su lugar.

Además del Editor de Virtual Lobby, puede realizar una personalización avanzada del Virtual Lobby utilizando códigos de Hoja de Estilo en Cascada (CSS) personalizados.

El uso de códigos CSS personalizados requiere conocimientos técnicos específicos, por lo que esta función es mejor que la utilicen expertos familiarizados con CSS.

Este artículo proporciona algunos de los códigos CSS más solicitados para personalizar aún más el Virtual Lobby.

Antes de continuar, lea este artículo para obtener instrucciones sobre cómo usar códigos CSS personalizados y dónde se pueden usar en la plataforma.

Códigos CSS para personalizar el Virtual Lobby

Los códigos provistos aquí harán lo siguiente:

  • Ocultar el botón Abrir lobby de la pestaña Mi cuenta en el Virtual Lobby (diseño Neo y Clásico)
  • Ocultar el botón Solucionar problemas del Virtual Lobby (diseño Neo y Clásico)
  • Ocultar la dirección de correo electrónico del Orador del Virtual Lobby (diseño Neo y Clásico)
  • Quitar el botón Levantar mano en las actividades
  • Cambiar el color de la fuente del chat en las actividades
  • Agregar zona horaria al sitio web de Agenda
  • Eliminar la zona horaria y la fecha del evento de los Formularios de Inscripción/Compra
  • Quitar el botón Ir a evento en el Formulario de inscripción
  • Establecer imágenes de fondo únicas para páginas específicas en el Virtual Lobby
  • Establecer colores de fondo únicos para páginas específicas en el Virtual Lobby

Ocultar el botón Abrir lobby de la pestaña Mi cuenta en el Virtual Lobby

Para ocultar el botón Abrir Lobby de la pestaña Mi cuenta en el Virtual Lobby (diseño Neo y Clásico), pegue el siguiente código CSS en el cuadro de texto Código fuente:

#headerVue .eventCover-info-virtual-lobby {
display: none;
}

Ocultar el botón Solucionar problemas del Virtual Lobby

Para ocultar el botón Solucionar problemas del Virtual Lobby (diseños Neo y Clásico), pegue el siguiente código CSS en el cuadro de texto Código fuente:

.v2-barTop .barContent .barDropdown.optionTroubleshoot{
display: none !important;
}

Quitar el botón Levantar mano en las actividades

Para eliminar el botón Levantar mano en las actividades, pegue el siguiente código CSS en el cuadro de texto Código fuente:

#liveContent .videos .videos-controls .toolRaiseHands {
position: absolute;
z-index: 15;
padding: 7px;
display: none;
}

Ocultar la dirección de correo electrónico del Orador del Virtual Lobby

Para ocultar la dirección de correo electrónico de los Oradores del Virtual Lobby, pegue uno de los siguientes códigos CSS a continuación en el cuadro de texto Código fuente, según el diseño establecido del evento:

  • Virtual Lobby - Diseño Neo
#InEventDialog .speaker-modal [data-field="email"] {
display: none !important;
}

  • Virtual Lobby - Diseño Clásico
#liveWrapper .live-speakers .floating-info [data-field="email"] {
display: none !important;
}

Cambiar el color de la fuente del chat de actividades

Para cambiar el color de fuente en el chat de actividades, pegue el siguiente código CSS en el cuadro de texto Código fuente:

#liveContent .chat-container .chat-unpinned .chat-body .chat {
color: "insert color here" !important;
}

Reemplace "insert color here" con el color deseado (escrito como nombres de color CSS universales o como código de color HEX)

Agregar zona horaria al sitio web de Agenda

Estos códigos agregarán una descripción de la zona horaria a su agenda debajo de la fecha de la actividad o junto a la hora de finalización de la actividad. Pegue uno de los siguientes códigos CSS en el cuadro de texto Código fuente:

La hora que se muestra en Virtual Lobby depende del dispositivo. El siguiente código CSS agrega exclusivamente una descripción de la zona horaria a la agenda de su evento.
  • Descripción de la zona horaria en la fecha de la actividad
#websiteContent .calendar .tabs:after {
content: "insert timezone name";
font-size: 15px;
}
Reemplace insert timezone name con el nombre de la zona horaria deseada en el texto manteniendo las comillas intactas.
  • Descripción de la zona horaria junto a la hora de finalización de la actividad
#websiteContent .time:after {
content: "insert timezone name";
font-size: 16px;
}

La siguiente imagen muestra cómo los códigos anteriores afectarán su agenda, con insert timezone name establecido en Eastern Time:

códigos anteriores afectarán su agenda

Eliminar la zona horaria y la fecha del evento de los Formularios de Inscripción/Compra

Para eliminar los detalles de fecha y zona horaria del evento de los Formularios de Inscripción o Compra, pegue uno o ambos de los siguientes códigos CSS en el cuadro de texto Código fuente:

  • Formulario de Inscripción
#formContent .eventCover .eventDate {
visibility: hidden !important;
}

  • Formulario de Compra
#purchaseContent .eventCover .eventDate {
visibility: hidden !important;
}

A continuación se muestra cómo afectará el código a sus Formularios de Inscripción/Compra:

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

Quitar el botón Ir a evento en el Formulario de inscripción

Para eliminar el botón Ir al evento del Formulario de Inscripción, pegue el siguiente código CSS en el cuadro de texto Código fuente:

#formContent section.form[role="alert"] .formCard .formEnd {
display: none !important;
}

A continuación se muestra cómo el código afectará su Formulario de Inscripción:

ocultar el botón 'Ir al evento'

Establecer imágenes de fondo únicas para páginas específicas en el Virtual Lobby

Para configurar imágenes de fondo únicas para páginas específicas en el Virtual Lobby, pegue los códigos CSS correspondientes en el cuadro de texto Código fuente:

  • Mi cuenta
#myAccountWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

Al insertar la URL en background-image, mantenga intactas las comillas. Los valores de background-size incluyen auto, longitud en píxeles (px), porcentaje %cover y contain.  Al insertar el valor del background-size, no incluya los corchetes.
  • Mi Agenda
#myAgendaWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert-image-size];
}

  • Mis Entradas
#ticketManagerWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

  • Mi Formulario
#myFormsWrapper #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

  • Mi Aplicación
#appContent #myAccountContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

  • Formulario de Inscripción
#formVue .formContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

  • Formulario Personalizado
#customFormVue #customFormContent {
background-image: url("insert image link here");
background-size: [insert image size here];
}

Establecer colores de fondo únicos para páginas específicas en el Virtual Lobby

Para establecer colores de fondo únicos en lugar de imágenes de fondo para las páginas mencionadas anteriormente, elimine las siguientes líneas:

    background-image: url("insert image link here");
background-size: "insert image size here";

Posteriormente, inserte la siguiente línea:

    background-color: [insert color here];

Personalizar otros ítems o elementos de la página

Para personalizar otros ítems o elementos de la página, consulte las siguientes instrucciones:

No se permite el uso de JavaScript para la personalización de CSS de la plataforma. Solo se permite JavaScript en la plataforma al crear páginas de destino. Sin embargo, por favor tenga en cuenta que no permitimos JavaScript en el dominio raíz.
  1. Vaya a la página deseada.
  2. Ubique el artículo o elemento que desea personalizar.
  3. Haga click con el botón derecho en el elemento que desea personalizar. Aparecerá un menú de contexto.
  4. Haga click en Inspeccionar. Aparecerán las Herramientas para Desarrolladores de su navegador.
  5. Busque las propiedades del elemento que desea personalizar en Styles.

Editar otras funciones de las páginas web
  1. Reemplace las propiedades del elemento como desee.
Editar otras funciones de las páginas web


¿Cómo lo hicimos?