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

Escolha uma nova forma de apresentar as atividades do evento. Este artigo reúne imagens dos três resultados e os códigos CSS completos para aplicar cada opção.

Antes de começar

Cadastre as atividades no menu Programação e mantenha a área Atividades visível na Página do Evento. Os modelos se aplicam à lista padrão de atividades, organizada por dias. Se precisar, veja como cadastrar atividades na programação do meu evento.

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.

A personalização altera somente a apresentação da lista. Dias, horários, vagas e regras de inscrição continuam definidos em Programação.

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: linha do tempo

Código:

/* Programação: linha do tempo */
#atividades .lista-atividades { display:flex; align-items:center; gap:16px; padding:18px; }
#atividades .lista-atividades > .col-md-10 { float:none; width:auto; flex:1; padding:0; min-width:0; overflow-wrap:anywhere; }
#atividades .hora-atividade { float:none; width:auto; flex:0 0 auto; padding:0; }
#atividades .hora-atividade span { float:none !important; white-space:nowrap; }
#atividades .lista-atividades > .clearfix { display:none; }
@media(max-width:600px){ #atividades .lista-atividades { align-items:flex-start; flex-direction:column; gap:8px; } }
#atividades .tab-content { border-left:3px solid #1d8276; margin:22px 0 0 12px; padding-left:22px; }
#atividades .lista-atividades { position:relative; border:1px solid #c9e5df; border-radius:12px; background:#f0faf7; color:#164b43; margin:0 0 14px; }
#atividades .lista-atividades::before { content:""; position:absolute; left:-31px; top:25px; width:13px; height:13px; border:3px solid #fff; border-radius:50%; background:#1d8276; }
#atividades .hora-atividade span { color:#17665b !important; font-weight:700; }
#atividades .nav-tabs > li.active > a { background:#1d8276; color:#fff; border-color:#1d8276; }
#atividades .nav-tabs > li > a { border-radius:8px 8px 0 0; }

Dica Even3: Troque #1d8276 para mudar a linha e a aba selecionada; #f0faf7 controla o fundo das atividades.

Modelo 2: mural de atividades

Código:

/* Programação: mural de atividades */
#atividades .lista-atividades { display:flex; align-items:center; gap:16px; padding:18px; }
#atividades .lista-atividades > .col-md-10 { float:none; width:auto; flex:1; padding:0; min-width:0; overflow-wrap:anywhere; }
#atividades .hora-atividade { float:none; width:auto; flex:0 0 auto; padding:0; }
#atividades .hora-atividade span { float:none !important; white-space:nowrap; }
#atividades .lista-atividades > .clearfix { display:none; }
@media(max-width:600px){ #atividades .lista-atividades { align-items:flex-start; flex-direction:column; gap:8px; } }
#atividades .tab-pane.active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:20px; }
#atividades .tab-pane.active > div { min-width:0; }
#atividades .lista-atividades { height:100%; box-sizing:border-box; flex-direction:column; align-items:flex-start; justify-content:space-between; background:#fff5e9; color:#643d23; border:1px solid #eed6bb; border-top:5px solid #c76b32; border-radius:4px; margin:0; }
#atividades .hora-atividade span { display:inline-block; color:#7e451e !important; background:#ffe1bc; padding:5px 10px; border-radius:4px; font-weight:700; }
#atividades .nav-tabs > li.active > a { background:#c76b32; color:#fff; border-color:#c76b32; }
@media(max-width:640px){ #atividades .tab-pane.active { grid-template-columns:1fr; } }

Dica Even3: Troque #c76b32 para mudar as faixas superiores e a aba selecionada; #fff5e9 controla o fundo dos cartões.

Modelo 3: agenda noturna

Código:

/* Programação: agenda noturna */
#atividades .lista-atividades { display:flex; align-items:center; gap:16px; padding:18px; }
#atividades .lista-atividades > .col-md-10 { float:none; width:auto; flex:1; padding:0; min-width:0; overflow-wrap:anywhere; }
#atividades .hora-atividade { float:none; width:auto; flex:0 0 auto; padding:0; }
#atividades .hora-atividade span { float:none !important; white-space:nowrap; }
#atividades .lista-atividades > .clearfix { display:none; }
@media(max-width:600px){ #atividades .lista-atividades { align-items:flex-start; flex-direction:column; gap:8px; } }
#atividades > div { background:#171b35; padding:24px; border-radius:20px; }
#atividades .nav-tabs { border:0; }
#atividades .nav-tabs > li > a { background:#262d4f; color:#e1e5ff; border:2px solid transparent; border-radius:30px; margin:4px; }
#atividades .nav-tabs > li.active > a { background:#c5baff; color:#241c50; border-color:#c5baff; }
#atividades .lista-atividades { background:transparent; color:#fff; border:0; border-bottom:1px solid #404766; border-radius:0; margin:0; }
#atividades .lista-atividades:hover { background:#262d4f; }
#atividades .hora-atividade { order:-1; }
#atividades .hora-atividade span { color:#d3c9ff !important; font-weight:700; }
#atividades #btn-atividades { background:#c5baff; color:#241c50; border-radius:30px; }
@media(max-width:600px){ #atividades > div { padding:14px; } }

Dica Even3: Troque #171b35 para mudar o fundo do painel e #c5baff para mudar a aba selecionada 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.