[Tutorial] Box's de aviso personalizadas

**T-Lord**

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

[Tutorial] Box's de aviso personalizadas VmlJU9Y

Nome do Arquivo: [Tutorial] Box's de aviso personalizadas
Autor: Gifthub
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores

O resultado deste tutorial pode ser verificado neste tópico.
É muito simples de obtê-lo, basta seguir o tutorial abaixo.
Acesse sua folha de estilo CSS

[Tutorial] Box's de aviso personalizadas 1337678750

Visualização :seta:Imagens e Cores :seta:Cores :seta:Folha de estilo CSS

E adicione o seguinte código lá:

Código:: /* AVISOS - INICIO */ #sucesso,#erro,#alerta,#inform,#texto,#aviso{overflow:hidden;background-image:url(http://i.imgur.com/1dMIIUh.png);background-attachment:scroll;border-radius:4px;cursor:default;background-position:0% 0%;background-repeat:repeat no-repeat;padding:13px}#sucesso{border:rgb(80,194,78) 1px solid;background-color:rgb(144,238,144);color:rgb(0,100,0);box-shadow:rgba(0,0,0,0.0980392) 0px 2px 4px}#alerta{background-color:red;border:rgb(139,0,0) 1px solid;color:rgb(255,255,255);box-shadow:rgba(0,0,0,0.0980392) 0px 2px 4px}#inform{background-color:rgb(255,234,168);border:rgb(255,194,55) 1px solid;color:rgb(130,98,0);box-shadow:rgba(0,0,0,0.0980392) 0px 2px 4px}#aviso{background-color:rgb(87,183,226);border:rgb(11,144,196) 1px solid;color:#16598F;box-shadow:rgba(0,0,0,0.0980392) 0px 2px 4px}#texto{background-color:rgb(255,255,255);border:rgb(204,204,204) 1px solid;color:rgb(68,68,68);box-shadow:rgba(0,0,0,0.0980392) 0px 2px 4px} /********** AVISOS FIM **********/

Pronto ja esta instalado, para usar basta usar algum dos códigos abaixo nas mensagens.

Código:: <div id="sucesso">Mensagem de Sucesso!</div>

Código:: <div id="alerta">Mensagem de Alerta!</div>

Código:: <div id="inform">Mensagem de Informação!</div>

Código:: <div id="aviso">Mensagem de Aviso!</div>

Código:: <div id="texto">Apenas um texto!</div>

Basta que você modifique o texto para o que lhe agrade mais;

Problemas em copiar? Veja o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] destes códigos!

Duvidas? Deixe nos comentários. Se te ajudei, repute!

Delphino

Administrador

Mensagens : 263
<b>Moedas</b>

Moedas : 2975
Reputação : 6

Gostei muito do estilo delas e o melhor é que elas não são apenas para forums, vou usa-las em sites que tenho mais experiencia =)

**T-Lord**

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

Sim, ela funciona em tudo quanto é site.

Sem problema nenhum.

Caso queira um tutorial para site é só fala!

Conteúdo patrocinado

1 [Tutorial] Box's de aviso personalizadas Qua 4 Set 2013 - 18:57

2 Re: [Tutorial] Box's de aviso personalizadas Qua 4 Set 2013 - 19:22

3 Re: [Tutorial] Box's de aviso personalizadas Qua 4 Set 2013 - 19:40

4 Re: [Tutorial] Box's de aviso personalizadas