Caixa informativa

Detalhes da questão

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

Descrição

Olá queria saber como faço isso no meu fórum:


Nesse estilo mesmo o franklin e os botões porém seria o seguinte
de Revisões de Banimentos para Revisões de Expulsos
de Atualizações do Servidor para Atualizações do Fórum
de Regras do Servidor para Regras do Clã/Servidor
de Dúvidas para Sugestões | e nesse se possivel uma lampadazinha no lugar do ponto de interrogação

e se possivel em baixo do texto principal dos botões legendas:
Azul: Todas as revisões de expulsos do clã.
Vermelhos: Todas as atualizações do fórum.
Amarelo: Regras do servidor e do fórum para uma melhor conduta.
Verde: Dê sugestões para a melhora do fórum ou do clã.

No texto quero o seguinte:

Olá, Usuario,

Esperamos que tenha uma boa experiência e conforto aqui no fórum e no clã, agradecemos pela sua preferência.

Logo abaixo temos alguns atalhos que poderão ser útil para você, confira os atalhos:

e se possivel uma borda amarela em volta da caixa com sombra, e uma com efeitos de raio e uma sem efeitos de raio.

Olá,

Poderia informar o site onde viu esta caixa informativa?

Até mais!

Olá,

Aceda:
Painel de Controle Visualização Página Inicial Geral

Procure por "Mensagem na Página Inicial." e adicione o código abaixo

Código:

<div class="panel introduction"><div class="mes-txt"><div style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 15px; line-height: 1.3; text-shadow: rgb(0, 0, 0) 0px 0px; color: rgb(68, 68, 68); font-family: Roboto, sans-serif;" id="conteudo">
                    
   <div style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; float: left;">
                <img style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: 0px none; box-sizing: border-box; margin: -25px 0px 0px; padding: 0px; width: 160px;" src="https://i.imgur.com/rhxJqHF.png">         
   </div>
                    
   <p style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin-bottom: 18px; font-size: 1.3rem; line-height: 1.3846;">
                Olá, <span style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(107, 191, 255);">{USERNAME},</span>         
   </p>
                    
   <p style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin-bottom: 18px; font-size: 1.3rem; line-height: 1.3846;">
                Esperamos que tenha uma boa experiência e conforto aqui no fórum e no clã, agradecemos pela sua preferência.       
   </p>
                    
   <p style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; font-size: 1.3rem; line-height: 1.3846; margin-bottom: 18px !important;">
                Logo abaixo temos alguns atalhos que poderiam ser útil para você, confira a seguir:         
   </p>
</div><div style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: -23.4688px 0px 0px; padding: 0px; color: rgb(68, 68, 68); font-family: Roboto, sans-serif;" id="botoesn">
                    
   <div style="transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);border-top: none;border-right: none;border-bottom: 3px solid rgb(34, 75, 191);border-left: none;border-image: initial;box-sizing: border-box;margin: 10px 15px 0px 0px;padding: 12px;color: rgb(255, 255, 255);float: left;font-size: 15px;text-shadow: rgba(0, 0, 0, 0.41) 1px 1px 1px;width: 352.063px;border-radius: 3px;background-color: rgb(21, 118, 218);" class="botoes" id="botao3">
                <a style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration-line: none; color: white;" target="_blank" href="/"><span style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;" class="fa fa-ban fa-4" aria-hidden="true"></span> Revisões de Expulsos</a><div style="font-size: 10px;">Todas as revisões de expulsos do clã.</div>         
   </div>
                    
   <div style="transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);border-top: none;border-right: none;border-bottom: 3px solid rgb(206, 96, 0);border-left: none;border-image: initial;box-sizing: border-box;margin: 10px 15px 0px 0px;padding: 12px;color: rgb(255, 255, 255);float: left;font-size: 15px;text-shadow: rgba(0, 0, 0, 0.41) 1px 1px 1px;width: 352.063px;border-radius: 3px;background-color: rgb(232, 161, 0);" class="botoes" id="botao4">
                <a style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration-line: none; color: white;" target="_blank" href="/"><span style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;" class="fa fa-book fa-4" aria-hidden="true"></span> Regras do Clã/Servidor<br></a><div style="font-size: 10px;">Regras do servidor e do fórum para melhor conduta.</div>         
   </div>
                    
   <div style="transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);border-top: none;border-right: none;border-bottom: 3px solid rgb(173, 0, 0);border-left: none;border-image: initial;box-sizing: border-box;margin: 10px 15px 0px 0px;padding: 12PX;color: rgb(255, 255, 255);float: left;font-size: 15px;text-shadow: rgba(0, 0, 0, 0.41) 1px 1px 1px;width: 352.063px;border-radius: 3px;background-color: red;" class="botoes" id="botao5">
                <a style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration-line: none; color: white;" target="_blank" href="/"><span style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;" class="fa fa-refresh fa-4" aria-hidden="true"></span> Atualizações do Fórum<br></a><div style="font-size: 10px;">Todas as atualizações do fórum.</div>         
   </div>
                    
   <div style="transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);border-top: none;border-right: none;border-bottom: 3px solid rgb(6, 125, 15);border-left: none;border-image: initial;box-sizing: border-box;margin: 10px 15px 0px 0px;padding: 12PX;color: rgb(255, 255, 255);float: left;font-size: 15px;text-shadow: rgba(0, 0, 0, 0.41) 1px 1px 1px;width: 352.063px;border-radius: 3px;background-color: rgb(62, 195, 29);" class="botoes" id="botao6">
                <a href="https://vnvrpg.forumeiros.com/f9-duvidas" target="_blank" style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; text-decoration-line: none; color: white;"><span style="transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border: none; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;" class="fa fa-question-circle fa-4" aria-hidden="true"></span> Dúvidas <br></a><div style="font-size: 10px;">Dê sugestões para a melhora do fórum ou do clã.</div>         
   </div>
                    
   <div>
              <br>         
   </div>
</div></div></div>

Depois adiciona o seguinte código na sua Folha de estilo CSS

Código:

.panel {
    background-color: #f8f8f8;
    border-radius: 3px;
    border: 4px solid #FE0;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    color: #444;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 18px 18px 0;
    position: relative;
}
.panel div.mes-txt:last-child, .panel p:last-child {
    margin-bottom: 18px!important;
}
.panel div.mes-txt, .panel p {
    font-size: 1.3rem;
    margin-bottom: 18px;
}


Até mais!

Pode fechar