Códigos CSS mais frequentemente solicitados

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 :

1. 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);

}

1. Baner no topo do lado esquerdo da página:

body.neo-layout #barTop .leftBar {

background-color: #002242 !important;

border-right: 1px solid transparent!important;

}

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

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:

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

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

1. Minha conta

#myAccountWrapper #myAccountContent {

background-image: url("link da imagem");

background-size: 1400px 1200px;

}

1. Minha agenda

#myAgendaWrapper .v2-bgContent {

background-image: url("link da imagem");

background size: 1400px 1200px;

}

1. Meus ingressos

#ticketManagerWrapper .v2-bgContent {

background-image: url("link da imagem");

background-size: 1400px 1200px;

}

1. Meus formulários

#myFormsWrapper .v2-bgContent {

background-image: url("link da imagem");

background-size: 1400px 1200px;

}

1. Aplicativo

#appContent.v2-bgContent {

background-image: url("link da imagem");

background-size: 1400px 1200px;

}

1. Formulário de inscrição

#formVue .formContent {

background-image: url("link da imagem");

background-size: 1400px 1200px;

}

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