Você pode personalizar a cor de fundo, a cor do texto, a borda e os cantos dos botões da página do evento. Também pode definir uma aparência diferente quando o participante passa o mouse sobre eles.
Para fazer essas alterações, você precisará utilizar um código CSS. Neste artigo, vamos te explicar o passo a passo necessário.
Alterar cores, borda e cantos
Você irá utilizar o código abaixo. O código abaixo engloba os principais botões da página; cada regra só afeta os elementos que existirem no seu evento.
Onde está marcado de vermelho, você irá substituir pela informação necessária.
/* BOTOES: cores, borda e cantos */
body #loginEven3,
body #btn-registration,
body #btn-registration-floating,
body #btn-inscricao-sitebasico,
body #btn-atividades,
body .text-center > .bt-free-trial-hero,
body .btn.btn-round2,
body .btn-realizar-login-site-basico,
body .btn-realizar-inscricao-site-basico,
body #dropdownMenu2 {
background-color: #[CÓDIGO DA COR] !important;
color: #[CÓDIGO DA COR] !important;
border: [NUMERAÇÃO]px solid #[CÓDIGO DA COR] !important;
border-radius: [NUMERAÇÃO]px !important;
}
Dica Even3: Utilize o site HTML Color Code para encontrar o código das cores.
Propriedade
O que alterar
background-color
Cor do botão. Substitua [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #.
color
Cor do texto do botão. Substitua [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #.
border
Espessura e cor da borda. Substitua [NUMERAÇÃO] pelo número da espessura (Exemplo: 3. Quanto maior o número, maior será a espessura da borda) e substitua[CÓDIGO DA COR] pelo código da cor desejada, mantendo o #. Para não exibir borda, use border: none !important;.
border-radius
Arredondamento dos cantos. Substitua [NUMERAÇÃO] pelo número para arredondar a borda (Quanto maior o número, mais arredondado). Use 0 para cantos retos, 12 para um arredondamento moderado ou um valor maior para um formato mais arredondado.
Mudar a aparência ao passar o mouse
O trecho com :hover define o estado do botão quando o ponteiro fica sobre ele.
Dica Even3: Adicione este bloco abaixo do anterior (caso use o anterior).
/* BOTOES: aparencia ao passar o mouse */
body #loginEven3:hover,
body #btn-registration:hover,
body #btn-registration-floating:hover,
body #btn-inscricao-sitebasico:hover,
body #btn-atividades:hover,
body .text-center > .bt-free-trial-hero:hover,
body .btn.btn-round2:hover,
body .btn-realizar-login-site-basico:hover,
body .btn-realizar-inscricao-site-basico:hover,
body #dropdownMenu2:hover {
background-color: #[CÓDIGO DA COR] !important;
color: #[CÓDIGO DA COR] !important;
border-color: #[CÓDIGO DA COR] !important;
}
Propriedade
O que alterar
background-color
Cor do botão. Substitua [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #.
color
Cor do texto do botão. Substitua [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #.
border-color:
Cor da borda. Substitua [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #. Para não exibir borda, use border: none !important;.
Estado normal
Ao passar o mouse
Personalizar somente alguns botões
Para aplicar o visual a apenas alguns botões da página, retire dos códigos acima a linha correspondente ao botão que você não quer personalizar.
Ao retirar seletores, deixe vírgulas entre os que permanecerem e remova a vírgula imediatamente antes de {. Para o código da aparência ao passar o mouse, mantenha o :hover depois de cada um.
Botão
Linha correspondente
Login
body #loginEven3 e body .btn-realizar-login-site-basico
Inscrição no cabeçalho e botão flutuante
body #btn-registration, body #btn-registration-floating e body .btn-realizar-inscricao-site-basico
Área de inscrição
body #btn-inscricao-sitebasico. Conforme o layout, também pode alcançar outros formulários que utilizem esse identificador.
Atividades e Submissão
body #btn-atividades e body .text-center > .bt-free-trial-hero. O segundo também pode alcançar outras ações principais da página.
Contato com o organizador
body .btn.btn-round2
Menu (quando exibido pelo layout)
body #dropdownMenu2
Aplicar o código na página
No menu Página do Evento, siga os passos abaixo. Se já houver outras personalizações, preserve o conteúdo do campo e adicione somente os blocos que deseja usar.
Clique em Avançado.
No campo CSS personalizado, cole o código escolhido e ajuste os valores indicados no artigo.
Clique em Salvar dados.
Depois, clique em Acessar Página e atualize a página pública para conferir a mudança.
Dica Even3: Escolha cores que mantenham o texto legível.
O CSS altera a aparência dos botões. Ele não muda seus textos, destinos nem as condições para inscrição. Para voltar ao padrão, remova os códigos que você adicionou e salve.
Comentários
0 comentário
Artigo fechado para comentários.