Detalhes da questão

Endereço do fórum: http://planetaspfc.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Boa tarde, amigos! Fiquei com dúvida de onde criar este tópico, mas acabei criando nessa parte, peço desculpas caso esteja errado.

Meu fórum é sobre um time de futebol, então gostaria de criar uma "seção" nova "dentro" do banner, onde eu colocaria a informação sobre a próxima partida do time, conforme print:



Creio que o melhor seria a criação de widget, certo?

O ideal, seria ter uma área onde eu pudesse alterar essas informações de modo mais simples possível, mais ou menos assim:




Acredito que não seja tão fácil assim fazer isso e também não sei se é possível/permitido, mas de qualquer forma, fica aqui minha ideia e, caso seja possível/permitido, agradeceria MUITO quem conseguisse fazer!

Agradeço desde já!

Olá!

Eu criei algo semelhante... Mas, podemos aplicá-lo no template! Acesse Visualização >> Templates >> Geral >> overall_header e depois na caixa de busca localize por:

Código:

            <div id="site-desc">
               <!-- BEGIN switch_h1 -->
                  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
               <!-- END switch_h1 -->
               <!-- BEGIN switch_desc -->
                  <p>{switch_desc.SITE_DESCRIPTION}</p>
               <!-- END switch_desc -->
            </div>

Ao encontrar, adicione depois este HTML:

Código:

<div id="events" class="lastEvent">
   <div class="e_body">
      <p class="eventNext">Próximo Evento</p>
      <p class="eventNext_hours">12:00 às 12:00</p>
      <table class="time" border="0">
         <tr>
            <td class="time1"><img src="https://futebolcampeaostore.com.br/wp-content/uploads/2017/08/lembrancasicone.png" /></td>
            <td class="vs">X</td>
            <td class="time2"><img src="https://futebolcampeaostore.com.br/wp-content/uploads/2017/08/lembrancasicone.png" /></td>
         </tr>
      </table>
      <p style="margin-bottom: 0px;text-align: center;">Primeira rodada: X</p>
      <p style="text-align: center;">Local: X</p>
   </div>
</div>

Você poderá adicioná-lo já modificado, CONTUDO, antes de tudo não publique o template, e sim pré-visualize depois de salvá-lo.

Assim que salvar, vá em Imagens e Cores ainda na aba Visualização e depois, em Imagens e Cores >> Cores Folha de estilos CSS e cole este código:

Código:

div#events.lastEvent {
    position: absolute;
    right: 25%;
    top: 25%;
}
div.e_body {
    padding: 5px;
    background: #fff;
    border-radius: 2px;
}

table.time td.vs {
   font-size: 30px;
    font-weight: bold;
}

p.eventNext {
   background: black;
    color: #fff;
    padding: 0px 0px 0px 5px;
   margin-bottom: 0px;
    width: 150px;
}

Toda vez que desejar que a caixa não seja exibida, adicione no CSS:

Código:

div#events{display: none;}

Funcionou certinho!!

Muito obrigado, Shek!! Pode encerrar o tópico.