Como criar uma divbox

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

Resolvido Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 11:27 am

Qual é minha questão:
Olá ,
Queria saber como colocar uma Divbox assim :

Print :


Com os comandos :
Código:
<div class="info">Informação: </div>
<div class="success">Sucesso: </div>
<div class="warning">Atenção: </div>
<div class="error">Erro: </div>
<div class="mes">Mensagem: </div>
<div class="tips">Idéia: </div>


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

Versão do fórum:
PHPBB2


Última edição por Aiirton.Oliveira em 21/03/13, 06:43 pm, editado 1 vez(es)
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Gmtp em 21/03/13, 12:21 pm

Olá

Basicamente se aplica o mesmo estilo, mas, usando o style

Código:
<div style="border:3px solid #cccccc; width:300px;">

<div style="background-color:#cccccc; padding: 4px 4px;">Título</div>

<div style="padding: 4px 4px;">Texto<br><br>teste</div>

</div>

Até mais
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Como criar uma divbox

Mensagem por -luiz,, em 21/03/13, 12:34 pm

Poderia passar o link da página/fórum, onde você viu esse sistema?
avatar

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Como criar uma divbox

Mensagem por Kyo Panda em 21/03/13, 12:46 pm

HTML:

Código:
<div class="box info"><span class="icon"></span>Informação:</div>
<div class="box success"><span class="icon"></span>Sucesso:</div>
<div class="box warning"><span class="icon"></span>Atenção:</div>
<div class="box error"><span class="icon"></span>Erro:</div>
<div class="box mes"><span class="icon"></span>Mensagem:</div>
<div class="box tips"><span class="icon"></span>Idéia:</div>

CSS:

Código:
.box {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    position: relative;
    padding: 10px 10px 10px 50px;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.icon {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 10px;
    top: 5px;
    background-image: url(http://i.imgur.com/KayNrww.png);
    background-repeat: no-repeat;
}
.info {
    background-color: #d1e4f3;
    border-color: #4d8fcb;
    color: #0052a6;
}
.success {
    background-color: #effeb9;
    border-color: #9ac601;
    color: #4f8a10;
}
.warning {
    background-color: #ffeaa9;
    border-color: #f9b516;
    color: #db8b00;
}
.error {
    background-color: #fccac3;
    border-color: #db3f23;
    color: #da004a;
}
.mes {
    background-color: #f2f2f2;
    border-color: #aaaaaa;
    color: #545454;
    background-position: 0 -160px;
}
.tips {
    background-color: #feeac9;
    border-color: #d38e49;
    color: #bb640c;
}
.info .icon {
    background-position: 0 0;
}
.success .icon {
    background-position: 0 -32px;
}
.warning .icon {
    background-position: 0 -64px;
}
.error .icon {
    background-position: 0 -96px;
}
.mes .icon {
    background-position: 0 -128px;
}
.tips .icon {
    background-position: 0 -160px;
}

Imagem:
http://i.imgur.com/KayNrww.png

Demo:
http://jsfiddle.net/s6r36/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 12:54 pm

avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Gmtp em 21/03/13, 12:56 pm

Olá

Estou testando os códigos, por estranho que pareça os código comigo buga, fica tudo puxado, é erro Css?

Até mais
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 01:02 pm

Duvida resolvida obrigado Kyo Panda Thank !
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 01:05 pm

1 Pergunta como eu coloco isso como um atalho para mim não precisar escrever tudo ? ex : eu clicar num botão i ja aparecer tudo pronto (:
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Kyo Panda em 21/03/13, 01:54 pm

Não entendi o que quer. Algo como isso? http://jsfiddle.net/w4cFf/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como criar uma divbox

Mensagem por Gaaratsu em 21/03/13, 02:04 pm

Olá querido,

Aceda ao seu:
Painel de Controle :seta2: Módulos :seta2: HTML & JAVASCRIPT :seta2: Gestão dos Códigos JavaScript :seta2: (Adicionar) 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] [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] [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] [quote](ADVERTÊNCIA)[/quote]</div><br>','');selectWysiwyg(this,'other');return false} });

Depois em:
Painel de Controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Aba 'Folha de estilo CSS'
Código:
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;
}

Até mais. Piscada


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7499

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Gmtp em 21/03/13, 02:10 pm

Olá

Aceda em :

Painel de controle Seta Visualizações Seta Imagens e Cores Seta Cores Seta Folha de estilo Css e coloque este codigo :

Código:
.box {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    position: relative;
    padding: 10px 10px 10px 50px;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.icon {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 10px;
    top: 5px;
    background-image: url(http://i.imgur.com/KayNrww.png);
    background-repeat: no-repeat;
}
.info {
    background-color: #d1e4f3;
    border-color: #4d8fcb;
    color: #0052a6;
}
.success {
    background-color: #effeb9;
    border-color: #9ac601;
    color: #4f8a10;
}
.warning {
    background-color: #ffeaa9;
    border-color: #f9b516;
    color: #db8b00;
}
.error {
    background-color: #fccac3;
    border-color: #db3f23;
    color: #da004a;
}
.mes {
    background-color: #f2f2f2;
    border-color: #aaaaaa;
    color: #545454;
    background-position: 0 -160px;
}
.tips {
    background-color: #feeac9;
    border-color: #d38e49;
    color: #bb640c;
}
.info .icon {
    background-position: 0 0;
}
.success .icon {
    background-position: 0 -32px;
}
.warning .icon {
    background-position: 0 -64px;
}
.error .icon {
    background-position: 0 -96px;
}
.mes .icon {
    background-position: 0 -128px;
}
.tips .icon {
    background-position: 0 -160px;
}
.row {
    margin-top: 20px;
}
select {
    margin: 0;
    padding: 5px;
}
textarea {
    margin: 0;
    width: 100%;
    height: 100px;
    outline: none;
    resize: vertical;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button {
    border: none;
    margin: 0;
    padding: 10px;
    background: #e6e6e6;
    cursor: pointer;
    display: inline-block;
}
.row-button {
    text-align: right;
}

Depois aceda em :

Painel de controle Seta Modulos Seta HTML & JAVASCRIPT Seta Gestão dos códigos JavaScript Seta Adicionar um código JavaScript e coloque este codigo :

Código:
$('#gen-button').on('click', function(){
    event.stopPropagation();
    if ($('#gen-select').val() == 'empty') {
        alert('Selecione um estilo de caixa.');
        return false;
    }
    $('#gen-result').html(
        '<div class="box ' + $('#gen-select').val() + '">' +
        '<span class="icon"></span>' + $('#gen-select :selected').text() + ': ' + $('#gen-text').val() +
        '</div>'
    );
    $('#gen-result-code').val($('#gen-result').html());
});

com investimento em todas as páginas.

Depois aceda em :

Painel de controle Seta Modulos Seta HTML & JAVASCRIPT Seta Gestão dos códigos HTML Seta Adicionar um código HTML e coloque este codigo :

Código:
<div class="row">
    <select id="gen-select">
        <option value="empty">Selecione o estilo da caixa:</option>
        <option value="info">Informação</option>
        <option value="success">Sucesso</option>
        <option value="warning">Atenção</option>
        <option value="error">Erro</option>
        <option value="mes">Mensagem</option>
        <option value="tips">Ideia</option>
    </select>
</div>
<div class="row">
    <textarea id="gen-text" placeholder="Escreva sua mensagem..."></textarea>
</div>
<div class="row row-button">
    <button id="gen-button">Gerar</button>
</div>
<div class="row">
    <hr />
</div>
<div class="row result">
    <div id="gen-result"></div>
</div>
<div class="row result">
    <textarea id="gen-result-code" placeholder="Resultado..."></textarea>
</div>

Até mais
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 05:18 pm

Gostaria que ficasse assim :


Aii quando eu clicasse nele já viesse pronto pra escrever
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Gaaratsu em 21/03/13, 05:25 pm

Olá querido,

O código que lhe passei fará o efeito desejado. Basta fazer com cautela e atenção.

Até mais. Piscada


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7499

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 05:40 pm

Não Resultou .
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por HermeS. em 21/03/13, 06:18 pm

Olá,

Este efeito possui um código JavaScript & CSS, mas estarei passando desta vez para você.
Aceda à: "Criar um novo JavaScript"
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos códigos JavaScript Seta Criar um novo JavaScript
Código:
Código:
jQuery(document).ready(function() {
if(jQuery('.i_icon_ip').length){
    jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="info();return false" style="color:#4d8fcb"><img src="http://i10.servimg.com/u/f10/17/41/76/40/inform10.png" alt="" width="16" height="16" class="acende" /> INFORMAÇÃO</button>');
    jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="success();return false" style="color:#9ac601"><img src="http://i10.servimg.com/u/f10/17/41/76/40/accept10.png" alt="" width="16" height="16" class="acende" /> SUCESSO</button>');
    jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="warning();return false" style="color:#f9b516"><img src="http://i10.servimg.com/u/f10/17/41/76/40/error10.png" alt="" width="16" height="16" class="acende" /> ATENÇÃO</button>');
    jQuery('#text_editor_select_controls #other button:eq(3)').after('<br><button onclick="error();return false" style="color:#db3f23"><img src="http://i10.servimg.com/u/f10/17/41/76/40/critic10.png" alt="" width="16" height="16" class="acende" /> ERRO</button>');
    jQuery('#text_editor_select_controls #other button:eq(4)').after('<br><button onclick="mes();return false" style="color:#AAAAAA"><img src="http://i10.servimg.com/u/f10/17/41/76/40/mail10.png" alt="" width="16" height="16" class="acende" /> MENSAGEM</button>');
    jQuery('#text_editor_select_controls #other button:eq(5)').after('<br><button onclick="tips();return false" style="color:#D38E49"><img src="http://i10.servimg.com/u/f10/17/41/76/40/light10.png" alt="" width="16" height="16" class="acende" /> IDÉIA</button>');
}
    });
    function info(){
    bbfontstyle('<div class="info">','</div>');selectWysiwyg(this,'other');return false}
    function success(){
    bbfontstyle('<div class="success">','</div>');selectWysiwyg(this,'other');return false}
    function warning(){
    bbfontstyle('<div class="warning">','</div>');selectWysiwyg(this,'other');return false}
    function error(){
    bbfontstyle('<div class="error">','</div>');selectWysiwyg(this,'other');return false}
    function mes(){
    bbfontstyle('<div class="mes">','</div>');selectWysiwyg(this,'other');return false}
    function tips(){
    bbfontstyle('<div class="tips">','</div>');selectWysiwyg(this,'other');return false}

Investimento: Nos tópicos
e salve.
Agora vamos para o CSS,
Aceda à:
Painel de Controle Seta Visualização Seta Imagens & Cores Seta Cores: Folha de estilo CSS
Código:
Código:

.info, .success, .warning, .error, .mes, .tips {
margin: 10px 0px;
padding: 10px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
border-radius: 4px 4px 4px;
}
.info{
background-color:#d1e4f3;
background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/inform10.png");
color:#00529B;
border:1px solid #4d8fcb;
}
.success{
background-color:#effeb9;
background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/accept10.png");
color:#4F8A10;
border:1px solid #9ac601;
}
.warning{
background-color:#ffeaa9;
background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/error10.png");
color:#9F6000;
border:1px solid #f9b516;
}
.error{
background-color:#fccac3;
background-image:url("http://i10.servimg.com/u/f10/17/41/76/40/critic10.png");
color:#D8000C;
border:1px solid #db3f23;
}
e salve.

Até mais.
avatar

HermeS.
Usuário avançado

Masculino
Inscrito dia : 06/09/2012
Mensagens : 304
Pontos Ativos : 366

Ver perfil do usuário http://revolutioncheatsbr.forumeiros.com/

Resolvido Re: Como criar uma divbox

Mensagem por Aiirton.Oliveira em 21/03/13, 06:24 pm

Obrigado BryaaN Resultou (:
Thank a todos por ajudar .
avatar

Aiirton.Oliveira
Nível 4

Masculino
Inscrito dia : 25/02/2013
Mensagens : 31
Pontos Ativos : 63

Ver perfil do usuário http://nexusvip.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