Personalizar a área de Submissão na página do evento

Apresente as informações de submissão de forma personalizada. Confira três modelos de CSS completos, com imagens para comparar antes de escolher.

Antes de começar

Configure as modalidades e as áreas temáticas no menu Submissões e mantenha a área Submissões visível na Página do Evento. Os modelos foram preparados para o bloco padrão que exibe prazo, modalidades, áreas temáticas e acesso à submissão. Se precisar, veja como adicionar as Modalidades e Áreas temáticas.

Use um modelo por vez nesta área. Guarde uma cópia do CSS atual antes de editar. Remova personalizações anteriores que alterem esta mesma área e preserve os códigos das outras partes da página.

Dica Even3: Utilize o site HTML Color Code para encontrar o código das cores ou o site24x7 caso você queira identificar o código de uma cor específica.

Aplicar o modelo escolhido

No menu lateral, clique em Página do Evento. Clique em Avançado.

Em CSS personalizado, cole o código completo de um dos modelos abaixo. Se já houver códigos de outras áreas, mantenha-os e adicione o novo bloco depois do fechamento deles. Clique em Salvar dados.

Depois, clique em Acessar Página e atualize a página pública para conferir o resultado.

Modelo 1: painel em duas colunas

Código:

/* Submissão: painel em duas colunas */
#submissoes > div > div { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
#submissoes > div > div > .text-center { grid-column:1 / -1; }
#submissoes .modalidade, #submissoes .area-tematica { background:#f1f8fc; padding:24px; border:1px solid #c9dfed; border-radius:16px; margin:0; }
#submissoes h5 { color:#174d70; font-size:20px; }
#submissoes .areas { background:#fff; color:#174d70; border:1px solid #c9dfed; border-radius:8px; margin:10px 0; padding:14px; }
#submissoes .prazo-submissao { margin-top:20px; }
#submissoes #btnRealizarSubmissao a { background:#175e8a; border-radius:8px; }
@media(max-width:640px){ #submissoes > div > div { grid-template-columns:1fr; } }
#submissoes h5 { margin:12px 0 16px; }
#submissoes .subtitle { margin:0 0 18px; }
#submissoes .acoes { margin-top:20px; }

Dica Even3: Troque #f1f8fc para mudar o fundo dos painéis e #175e8a para mudar o botão.

Modelo 2: edital com linhas e etiquetas

Código:

/* Submissão: edital com linhas e etiquetas */
#submissoes > div { background:#fffaf0; border:1px solid #d9c9a5; border-top:8px solid #8a6232; padding:28px; }
#submissoes h5 { text-align:left; color:#62451f; font-size:21px; border-bottom:1px solid #d9c9a5; padding-bottom:12px; }
#submissoes .subtitle { text-align:left; color:#62451f; }
#submissoes .modalidade > div, #submissoes .area-tematica > div { display:inline-block; vertical-align:top; max-width:100%; }
#submissoes .areas { background:#fff; color:#62451f; border:1px solid #d9c9a5; border-radius:30px; padding:10px 18px; margin:5px; overflow-wrap:anywhere; }
#submissoes #btnRealizarSubmissao a { background:#785126; border-radius:0; }
@media(max-width:600px){ #submissoes > div { padding:16px; } }
#submissoes h5 { margin:12px 0 16px; }
#submissoes .subtitle { margin:0 0 18px; }
#submissoes .acoes { margin-top:20px; }

Dica Even3: Troque #fffaf0 para mudar o fundo e #8a6232 para mudar a faixa superior.

Modelo 3: chamada em fundo escuro

Código:

/* Submissão: chamada em fundo escuro */
#submissoes > div { background:#231b3b; padding:30px; border-radius:22px; color:#f4efff; }
#submissoes h5 { color:#e1c9ff; font-size:22px; }
#submissoes .subtitle { color:#fff; font-size:20px; }
#submissoes .modalidade .areas { background:#d6b5ff; color:#321b52; border:0; border-radius:8px; padding:18px; font-size:19px; font-weight:700; }
#submissoes .area-tematica .areas { background:transparent; color:#f4efff; border:0; border-bottom:1px solid #655279; border-radius:0; padding:14px 4px; }
#submissoes .areas a { color:inherit; }
#submissoes #btnRealizarSubmissao a { background:#d6b5ff; color:#321b52; border-radius:30px; }
@media(max-width:600px){ #submissoes > div { padding:18px; } }
#submissoes h5 { margin:12px 0 16px; }
#submissoes .subtitle { margin:0 0 18px; }
#submissoes .acoes { margin-top:20px; }

Dica Even3: Troque #231b3b para mudar o fundo e #d6b5ff para mudar os blocos de modalidades e o botão.

Trocar de modelo ou voltar ao visual anterior

Para trocar o visual, remova o bloco completo do modelo atual desta área e cole o código completo da nova opção. Salve e atualize a página do evento.

Para desfazer, remova somente o bloco adicionado para esta área. Se você já usava uma personalização, restaure a cópia que guardou. Preserve o CSS das demais áreas.

E agora? Veja como adicionar, combinar e remover códigos CSS na página do evento para organizar suas personalizações.

Treinamento Gratuito Ao Vivo - Even3 Talks: Toda 3ª Quarta-Feira do mês no YouTube da Even3. Confira as edições anteriores clicando aqui.