Caixa de alertas

Qual é minha questão:
Gostaria de saber como posso colocar um botão que nem o neon ou o salvamento automatico nesse estilo: (a caixa aonde está escrito alerta colorido)
<br>
Depois quando eu apertar a caixa alerta aparece isso:
<br>
E quando eu escolha algum dos 3 tipos de alerta fique assim


Links e imagens do meu problema:
https://2img.net/h/oi46.tinypic.com/e891q9.png
https://2img.net/h/oi48.tinypic.com/55i4pd.png
https://i.imgur.com/An7U6.png

Endereço do meu fórum:
http://pokechaos.forumeiros.com

Versão do meu fórum:
PHPBB3

Olá!

Poderia me fornecer o link do fórum no qual viu tal efeito?

Abraços.

Na verdade eu vi um cara na BR-Design que posta uma caixa igual a esta. Mais não tem a opção pra escolher que nem o neon, ele mesmo que fez a caixa. E nesse forum tem algo parecido: http://staffergroupbr.stuning.net
Na seção outros (aonde fica spoiler) tem alerta 1, alerta 2 e alerta 3

Eu queria algo parecido

Olá!

Aceda ao seu:

Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript Criar um novo código Javascript

Investimento: Nos tópicos.
Código:

Código:

jQuery(document).ready(function() { jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="Imágem();return false">URL de imágem</button>');jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue"><b>Alerta de nível 1</b></button>');jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:#e35716"><b>Alerta de nível 2</b></button>');jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red"><b>Alerta de nível 3</b></button>');jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="NovaAba();return false">Link em nova aba</button>');jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="Títle();return false">Inserir um título</button>')});function Imágem(){bbfontstyle('<img src="','" />');selectWysiwyg(this,'other');return false}function alert(){bbfontstyle('<div class="alert">[i][b]<span style="color: #000000;">Alerta de Nível 1:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false}function alert2(){bbfontstyle('<div class="alert2">[i][b]<span style="color: #000000;">Alerta de Nível 2:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false}function alert3(){bbfontstyle('<div class="alert3">[i][b]<span style="color: #000000;">Alerta de Nível 2:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false} });

Abraços.

não funcionou, e ainda tirou o outro estilo de caixa de cores e tirou tambem o botão neon

Olá!

Desculpe-me, eu fechei o código duas vezes.

Substitua por este:

Código:

jQuery(document).ready(function() { jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="Imágem();return false">URL de imágem</button>');jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue"><b>Alerta de nível 1</b></button>');jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:#e35716"><b>Alerta de nível 2</b></button>');jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red"><b>Alerta de nível 3</b></button>');jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="NovaAba();return false">Link em nova aba</button>');jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="Títle();return false">Inserir um título</button>')});function Imágem(){bbfontstyle('<img src="','" />');selectWysiwyg(this,'other');return false}function alert(){bbfontstyle('<div class="alert">[i][b]<span style="color: #000000;">Alerta de Nível 1:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false}function alert2(){bbfontstyle('<div class="alert2">[i][b]<span style="color: #000000;">Alerta de Nível 2:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false}function alert3(){bbfontstyle('<div class="alert3">[i][b]<span style="color: #000000;">Alerta de Nível 2:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false}

Abraços.

eu gostei, mais poderia deixar como eu mostrei nessa imagem:


achei um pouco feio com o do codigo que me passou. E tambem acho que o da imagem que eu mostrei combina mais com o tema.

o seguinte codigo dessa caixa é esse:

Código:

<div class="alert2">
Link do Fórum, esqueci de o colocar no tópico
<a href="http://br-web.forumeiros.com" alt="BR-Web" title="BR-Web">BR-Web - Tecnologia - Informação e Games</a>
</div>

<div class="alert2">
Link do Fórum, esqueci de o colocar no tópico
<a href="http://br-web.forumeiros.com" alt="BR-Web" title="BR-Web">BR-Web - Tecnologia - Informação e Games</a>
</div>

Olá!

Poderia me fornecer o link de algum tópico que contenha as tais mensagens para que eu possa pegar o código CSS?

Abraços.

Olá!

Adicione este código em seu CSS:

Código:

/* ALERTAS */
.alert1 {
    background-color: #BDE5F8;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/alertaaviso.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkcyan;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #31B7C7;
}

.alert2 {
    background-color: #ACD758;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/Check.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkgreen;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #659B10;
}

.alert3 {
    background-color: #FF5C5C;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/X.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkred;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #D13333;
}

Abraços.

Adorei muito obrigado, mais tem um erro, no alerta um ele nao vai direto o codigo de quando eu aperto o obtão de alerta 1 é esse:

Código:

<div class="alert">[i][b]<span style="color: #000000;">Alerta de Nível 1:</span>[/b][/i]&nbsp[quote](ADVERTÊNCIA)[/quote]</div><br>

só que dai não aparece a caixa dele

e se eu colocar o 1 depois de <div class="alert...
ele aparece, tem como consertar fazendo favor.

Substitua o código CSS por este:

Código:

/* ALERTAS */
.alert {
    background-color: #BDE5F8;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/alertaaviso.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkcyan;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #31B7C7;
}

.alert2 {
    background-color: #ACD758;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/Check.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkgreen;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #659B10;
}

.alert3 {
    background-color: #FF5C5C;
    background-image: url("http://i1135.photobucket.com/albums/m622/Mazeko1/X.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    color: darkred;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px 8px 8px 8px;
    border-color: #D13333;
}

Funcionou brigado, Podem fechar