Olá amigos, hoje trago um tutorial de como criar e gerir info boxes no estilo IPB em seu fórum.


Vamos la.

Primeiro devemos definir uma classe global para as mensagens, como padrão muitos usam o seletor message
Vamos estiliza-lo com CSS

Código:

.message {
   background: #EBFCDF;
   padding: 10px;
   border: 1px solid #A4CFA4;
   color: #0E440E;
   line-height: 1.6;
   font-size: 12px;
}

Ao adicionar isso ao seu CSS ja poderá usar a info box verde em seu fórum..
Porém é muito comum vermos diversas cores de info boxes nos fóruns IPB, para isso o processo é mais simples

Basta criar novas classes e estilizar elas definindo a cor de fundo a cor da borda e a cor das letras da box
Veja um exemplo

Código:

.error{
   background-color: #f3e3e6;
   border-color: #e599aa;
   color: #80001c;
}

Esse código é usado para a segunda box da imagem (a vermelha).

Você pode criar quantas cores quiser, basta ter criatividade..

--------------

Utilizando as info boxes

Para utilizar essas info boxes basta você adicionar suas novas classes em alguma tag valida

Alguns exemplos de tag's válidas são

Código:

<p>

Código:

<div>

Código:

<span>

Tem dezenas, vamos ver um exemplo com a tag p

Código:

<p class="message">
    <strong>Título</strong><br />
    Mensagem no paragráfo
</p>

Essa seria a class global que nós definimos!

Quando quiser usar as novas cores basta você dar um espaço depois da class message e colocar o nome da sua outra class, no meu caso seria error, veja o exemplo

Código:

<p class="message error">
    <strong>Título</strong><br />
    Mensagem no paragráfo
</p>

Agora fica tudo por encargo da sua criatividade

Espero que seja útil a alguém, até mais !

Excelente amigo, mais um mod de peso!

Obrigado por compartilhar conosco,

JS

Sem dúvida! Uma personalização bem vinda!

Obrigado amigos... A área correta para esse tópico não seria "IPBoard deployments" ?