Configuração avançada da página do evento – Central de Ajuda

Ao criar um evento na plataforma da Even3, você tem direito a uma página para o seu evento. Existem as configurações básicas da página (Saiba mais!) e configurações avançadas.

Para realizar as configurações avançadas, é preciso ter conhecimento sobre CSS. Mas nesse artigo, vamos te ensinar algumas dessas configurações.

Acessando a configuração avançada

1. No menu Página do evento.

2. Clique em </>Avançado.

Pronto! Você irá visualizar a tela abaixo, onde poderá colocar os códigos CSS para personalização da página:

Agora, vamos aprender alguns códigos que você pode utilizar! Mas antes, algumas observações importantes:

Sempre adicione os códigos dentro das tags <style> e </style>. Você poderá adicionar quantos códigos quiser (um abaixo do outro), mas eles precisaram estar entre essas tags, como no exemplo abaixo:
Ao utilizar os códigos, você irá precisar substituir algumas informações (geralmente referente a cor ou fonte).

Dica Even3: Utilize o site Celke para encontrar o código das cores e o site W3 para encontrar o código das fontes.

Cor do Background

Parte de cima do Background

#imagemFundo {
background: #COR !important;
}

Parte de baixo do Background

body {
background-color: #COR !important;
}

Resultado:

Cor das áreas

.box {
background: #COR !important;
}

Resultado:

Cor dos botões

Botão de Login

.btn-entrar{

background-color: #COR !important;

color: white !important;

}

Resultado:

Botão de Falar com organizador

.btn-round2{

background-color: #COR !important;

color: #FFF !important;

}

Resultado:

Botões de inscrição

.btn-go-to-inscricoes{

background-color: #COR !important;

border: 2px solid #fff !important;

color: white !important;

}

#btn-registration-floating{

border: 2px solid #fff !important;

}

#btn-registration{

border: 2px solid #fff !important;

}

Resultado:

Botões de Atividade e Submissão

.bt-free-trial-hero{

background-color: #COR !important;

border: 2px solid #fff !important;

color: white !important;

}

.text-center > .bt-free-trial-hero{

border: 2px solid #fff !important;

}

Resultado:

Botões com o mouse em cima

Este código irá alterar a cor do botão e da borda do botão sempre que você passar o mouse em cima do botão (válido apenas para os botões de Inscrição, Atividade e Submissão).

.text-center > .bt-free-trial-hero:hover{

background-color: #COR_BOTÃO !important;

border: 2px solid #COR_ BORDA !important;

color: white !important;

}

Resultado: