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!

Antes de prosseguir, leia este artigo para verificar quais páginas da web podem ser editadas e como fazer isso.

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.

Ao utilizar o layout Clássico, a imagem de fundo ocupará toda a tela. Ao utilizar o layout Neo, a imagem de fundo ocupará apenas o lado direito da tela. Clique aqui para aprender mais sobre os layouts do Virtual Lobby.

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;

}

Você deve substituir # 002242 por qualquer outro código hexadecimal para que possa inserir a cor desejada no fundo de tela do Virtual Lobby.

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.

O código acima funciona tanto para o layout Clássico quanto para o Neo.

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.

Para ter certeza de que está alterando a parte correta do código, passe o mouse sobre o código, o que quer que você esteja tentando editar será destacado, o que significa que você deve ser capaz de ver o que está prestes a configurar.
  • 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.
Não é permitido o uso de JavaScript para customização CSS da plataforma. JavaScript só é permitido na plataforma na criação de Landing Pages, porém, por favor atente-se ao fato de que não permitimos JavaScript no domínio raiz.

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:
Observe que o texto entre / * * / não faz parte do código, mas uma marcação para organizar seus códigos de customização.
  • 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;

}

Para aprender mais sobre como alterar a cor de fundo em outras páginas do Virtual Lobby, dê uma olhada nestas instruções.

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.

Hiding the content page


Este artigo foi útil?