Como adicionar, combinar e remover códigos CSS na página do evento

Avatar
Alana M
  • Criado em
Seguir

O campo CSS personalizado permite ajustar a aparência da página do evento, como cores, letras, bordas e fotos. Você pode reunir várias personalizações no mesmo campo e remover somente a que deixou de usar.

checked__1_.png

Dica Even3: Se você for realizar alguma edição em um código CSS já existente, antes de editar, copie todo o conteúdo atual do campo e guarde uma cópia. Ao clicar em Salvar dados, as alterações passam a valer na página do evento. Essa cópia ajuda a recuperar a aparência anterior.

Adicionar e combinar códigos

Abra o menu Página do Evento.

avancado-menu.png
  1. Clique em Avançado.

Cada bloco tem um seletor, que identifica o elemento a personalizar, e as propriedades entre { e }. No exemplo abaixo, um bloco muda a cor dos títulos das áreas e o outro muda o fundo do botão principal de inscrição:

/* Titulos das areas */
.with-subtitle {
  color: #163D6A !important;
}

/* Botao principal de inscricao */
body #btn-registration {
  background-color: #1968AD !important;
}
css-combinar.png
  1. Cole os blocos em CSS personalizado. Se já existir um código, acrescente o novo bloco depois da chave de fechamento do anterior, em uma nova linha.
  2. Clique em Salvar dados.

Não coloque um bloco dentro de outro. Mantenha as chaves, os dois-pontos e o ponto e vírgula de cada propriedade. Os comentários entre /* e */ são apenas identificações e ajudam a localizar cada personalização.

checked__1_.png Dica Even3: Use comentários como /* BOTOES */, /* LETRAS */ e /* FOTOS */ para organizar o campo. Faça uma alteração por vez e confira o resultado antes de continuar.

Remover somente uma personalização

Abra novamente Página do Evento > Avançado. No exemplo, vamos retirar a cor personalizada do botão e manter a cor dos títulos.

css-remover.png
  1. Apague o bloco do botão inteiro: o seletor, a chave de abertura, as propriedades e a chave de fechamento. Preserve os demais blocos.
  2. Clique em Salvar dados.

Depois dessa remoção, o campo mantém apenas:

/* Titulos das areas */
.with-subtitle {
  color: #163D6A !important;
}

Ao atualizar a página, a cor do botão deixa de ser definida por esse código. Ela volta ao padrão do layout ou à aparência determinada por outra regra que ainda esteja ativa. A cor dos títulos continua personalizada.

Para retirar todas as personalizações desse campo, apague seu conteúdo e salve.

Quando o resultado não é o esperado

Situação O que conferir
A cor ou o tamanho não muda Confira se o seletor corresponde ao elemento e ao layout da página.
Uma regra parece substituir outra Quando as regras têm a mesma prioridade e atingem a mesma propriedade, a que vem depois prevalece. Um seletor mais específico ou uma declaração com !important também pode alterar essa prioridade. Evite manter versões duplicadas da mesma regra.
Parte do código deixou de funcionar Confira as chaves de abertura e fechamento e o ponto e vírgula. Ao remover um trecho, não deixe propriedades soltas fora de um bloco.
A mudança não aparece na aba já aberta Salve o campo e atualize a página pública do evento.
play.png E agora? Veja as opções de Configuração avançada da página do evento.
marketing-de-video.png Treinamento Gratuito Ao Vivo - Even3 Talks: Toda 3ª Quarta-Feira do mês no YouTube da Even3. Confira as edições anteriores clicando aqui. 

Artigos relacionados

Comentários

0 comentário

Artigo fechado para comentários.