Códigos CSS mais frequentemente solicitados
- Customizando o Virtual Lobby
- Como posso customizar a imagem de fundo do Virtual Lobby
- Como alterar as cores dos cabeçalhos no Virtual Lobby?
- Alterando a cor da fonte do texto de chat das atividades
- Ocultando o Virtual Lobby
- Removendo o botão de erguer a mão nas atividades
- Ocultar o email dos palestrantes no Virtual Lobby Neo
- Ocultar o email dos palestrantes no Virtual Lobby Clássico
- Editando outros recursos das webpages
Você pode usar nossa ferramenta de customização via CSS para editar suas páginas da web e personalizar visualmente diversos aspectos de seu evento Virtual ou Híbrido. Observe que CSS é uma linguagem de estilização amplamente usada na personalização visual de websites e, portanto, melhor usada por programadores e desenvolvedores. Neste FAQ, mostraremos como utilizar alguns dos códigos CSS solicitados com mais frequência, permitindo alguns insights sobre como levar a personalização de seu evento a outro nível!
Customizando o Virtual Lobby
Como posso customizar a imagem de fundo do Virtual Lobby
É possível editar a imagem de fundo principal de seu Virtual Lobby. Dê uma olhada neste artigo para aprender como.

No layout Neo, para preencher o lado esquerdo da página e o banner direito que a etapa anterior não cobre, use os códigos abaixo :
- Lado esquerdo da 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);
}
- Baner no topo do lado esquerdo da página:
body.neo-layout #barTop .leftBar {
background-color: #002242 !important;
border-right: 1px solid transparent!important;
}
- Baner no topo do lado direito da página:
body.neo-layout #barTop .rightBar {
background-color: #002242 !important;
}

Como alterar as cores dos cabeçalhos no Virtual Lobby?
- Para alterar as color em que as atividades, patrocinadores, Networking e salas de grupo são mostrados no Virtual Lobby, use o código abaixo:
#liveWrapper #liveContent .lobby-header h1 span {color: #FF4500 !important;}
The hex code #FF4500 can be replaced by any other hex code you'd like.
- Para mudar a cor em que o cabeçalho da capa de boas-vindas é exibido no Virtual Lobby, use o código abaixo:
body.neo-layout #liveContent .lobby .container-box .scrollable-container-box #welcome .welcome-title {width: calc(1400px 1200px); color: #FFB247 !important;}
Alterando a cor da fonte do texto de chat das atividades
- Use o seguinte código:
#liveContent .chat-container .chat-unpinned .chat-body .chat {
color: #e5a85e !important;
}
Ocultando o Virtual Lobby
Alguns organizadores de eventos não desejam que os participantes tenham acesso ao Virtual Lobby antes do início do evento. Se for esse o caso, você pode ocultar a aba do Virtual Lobby até antes do início do evento pressionando Configurações> Abas> Virtual Lobby (no canto superior esquerdo)> e desmarque a coluna Visível relacionada ao Virtual Lobby e pressione Fim para salvar as alterações.

Após desmarcar a visibilidade da aba do Virtual Lobby, seu ícone irá desaparecer do menu lateral do Lobby, mas em Minha Conta, o botão Abrir Lobby ainda será exibido.

Se você deseja remover este botão, será necessário editr o código fonte adicionado o seguinte código à page de detalhes do evento.
- Clique em Evento > Detalhes > Editar, role a página para baixo até você ver o botão Código Fonte > adcione o seguinte código:
#headerVue .eventCover-info-virtual-lobby {
display: none;
}
Removendo o botão de erguer a mão nas atividades
- Ná página do código fonte, adicione o código abaixo:
#liveContent .videos .videos-controls .toolRaiseHands {
position: absolute;
z-index: 15;
padding: 7px;
display: none;
}
- o código deverá se parecer com isso:

Ocultar o email dos palestrantes no Virtual Lobby Neo
- Ná página do código fonte, adicione o código abaixo:
#InEventDialog .speaker-modal [data-field="email"] {
display: none !important;
}
Ocultar o email dos palestrantes no Virtual Lobby Clássico
- Se você está usando o layout clássico, use este código:
#liveWrapper .live-speakers .floating-info [data-field="email"] {
display: none !important;
}
Editando outros recursos das webpages
- Para editar outros recursos das webpages, vá para a página da web, encontre o item ou itens específicos que deseja alterar, clique com o botão direito e pressione Inspect.
- Neste exemplo, vamos alterar o tamanho da fonte e a cor do formulário de registro
- Clique com o botão direito no texto do formulário de registro e clique em inspecionar
- Você verá a aba Styles aberta, contendo o código da fonte e da cor da fonte.

- Por exemplo, ao passar o mouse sobre o código .formcard, a parte a ele associada será destacada.

- Copie e cole o código CSS customizado na página Evento > Detalhes.
- Edite o tamanho da fonte e as cores conforme sua preferência.

Como adicionar o fuso horário na agenda de seu hotsite?
Para esses exemplos, adicionaremos informações de fuso horário ao seu hotsite, ajudando participantes globais a acompanhar a agenda do seu evento. Esteja ciente de que os horários mostrados no Lobby Virtual são convertidos conforme o horário do dispositivo do usuário e os códigos abaixo se aplicam exclusivamente à visualização da agenda do seu hotsite:
- Exibindo o fuso horário abaixo da data da atividade:
- Vá para a página Evento> Detalhes, clique no botão Editar e role a página para baixo para clicar no botão Código fonte.
- Copie e cole o código abaixo na página Código-fonte.
#websiteContent .calendar .tabs:after {
content: "Eastern Time";
font-size: 15px;
}
- O código deverá ficar assim em sua página de códigos:

- Abaixo, um exemplo de como essa customização será visualizada.

- Exibindo o fuso horário após o nome da atividade:
- Copie e cole o código abaixo em sua página de códigos.
#websiteContent .time:after {
content: "fuso horário";
font-size: 16px;
}
- O código deverá ficar assim em sua página de códigos:

- Abaixo, um exemplo de como essa customização será visualizada.

Adicionando uma imagem de fundo a outras páginas
Aqui estão outras páginas às quais você pode adicionar uma imagem de fundo. Você pode copiar e colar o código abaixo no CSS, mas lembre-se de inserir o link do endereço da imagem. Você também pode alterar o tamanho do plano de fundo "px" para corresponder à sua imagem.
- Minha conta
#myAccountWrapper #myAccountContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
- Minha agenda
#myAgendaWrapper .v2-bgContent {
background-image: url("link da imagem");
background size: 1400px 1200px;
}
- Meus ingressos
#ticketManagerWrapper .v2-bgContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
- Meus formulários
#myFormsWrapper .v2-bgContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
- Aplicativo
#appContent.v2-bgContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
- Formulário de inscrição
#formVue .formContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
- Formulário customizado
#customFormVue #customFormContent {
background-image: url("link da imagem");
background-size: 1400px 1200px;
}
Cores de fundo e títulos
Para alterar as cores de fundo você pode seguir os códigos abaixo em diferentes páginas, porém, ao invés de background-image: e background-size:, use background-color:
- Para adicionar uma cor entre o código hexadecimal correspondente, algo como: #FF0085
- Por exemplo, para modificar a cor de fundo do formulário de inscrição, após a raiz, adicione o seguinte código:
#formVue .formContent {
background-color: #FF0085;
}
Como ocultar o botão "ir para o evento"?
A página de conteúdo é a página para a qual os participantes irão chegar assim que concluírem o registro por meio do formulário de registro. Clique aqui para obter mais informações sobre a página de conteúdo.
Para ocultar a página de conteúdo, copie e cole o código abaixo no campo Código-fonte:
#formContent section.form[role="alert"] .formCard .formEnd {
display: none !important;
}
À esquerda, você tem o comportamento padrão do formulário de inscrição com o botão Ir para o evento! À direita, a página de conteúdo e, portanto, com o botão Ir para o evento! oculto.
