Caixa de alertas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Caixa de alertas

Mensagem por fojogo em 15/09/12, 02:33 pm

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:
Http://i46.tinypic.com/e891q9.png
http://i48.tinypic.com/55i4pd.png
http://i.imgur.com/An7U6.png

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

Versão do meu fórum:
PHPBB3


Última edição por fojogo em 16/09/12, 02:23 am, editado 1 vez(es)
avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por MateusV. em 15/09/12, 02:35 pm

Olá!

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

Abraços. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 15/09/12, 02:47 pm

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


Última edição por fojogo em 15/09/12, 02:55 pm, editado 1 vez(es)
avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por MateusV. em 15/09/12, 02:54 pm

Olá!

Aceda ao seu:
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript Seta 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. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 15/09/12, 02:56 pm

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

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por MateusV. em 15/09/12, 02:59 pm

Olá!

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

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. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 15/09/12, 07:11 pm

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>
avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por MateusV. em 15/09/12, 07:37 pm

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. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 15/09/12, 10:41 pm

avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por MateusV. em 15/09/12, 10:43 pm

Olá!

Adicione este código em seu CSS:
Código:
/* ALERTAS */
.alert1 {
    background-color: #BDE5F8;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    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://illiweb.com/fa/pbucket.gif");
    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://illiweb.com/fa/pbucket.gif");
    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. Piscada
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 15/09/12, 11:10 pm

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.
avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Resolvido Re: Caixa de alertas

Mensagem por Angco-Sama em 16/09/12, 12:57 am

Substitua o código CSS por este:
Código:
/* ALERTAS */
.alert {
    background-color: #BDE5F8;
    background-image: url("http://illiweb.com/fa/pbucket.gif");
    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://illiweb.com/fa/pbucket.gif");
    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://illiweb.com/fa/pbucket.gif");
    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;
}
avatar

Angco-Sama
Nível 8

Masculino
Inscrito dia : 01/07/2012
Mensagens : 111
Pontos Ativos : 154

Ver perfil do usuário http://narutox-tremme.umforum.net

Resolvido Re: Caixa de alertas

Mensagem por fojogo em 16/09/12, 02:22 am

Funcionou brigado, Podem fechar
avatar

fojogo
Usuário avançado

Masculino
Inscrito dia : 07/12/2010
Mensagens : 369
Pontos Ativos : 624

Ver perfil do usuário http://royal-arts.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum