Como criar uma divbox

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

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

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

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:
https://i.imgur.com/KayNrww.png

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

Fórum que tem esses div é : http://easycheats.forumbom.com/t1169-macete-como-dar-onehit-nas-versoes-14j-s1-s2-s3

Olá

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

Até mais

Duvida resolvida obrigado Kyo Panda Thank !

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 (:

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

Olá querido,

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] [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 Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

Código:

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;
}

Até mais.

Olá

Aceda em :

Painel de controle Visualizações Imagens e Cores Cores 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 Modulos HTML & JAVASCRIPT Gestão dos códigos JavaScript 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 Modulos HTML & JAVASCRIPT Gestão dos códigos HTML 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

Gostaria que ficasse assim :


Aii quando eu clicasse nele já viesse pronto pra escrever

Olá querido,

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

Até mais.

Não Resultou .

Olá,

Este efeito possui um código JavaScript & CSS, mas estarei passando desta vez para você.
Aceda à: "Criar um novo JavaScript"
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript 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 Visualização Imagens & Cores 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.

Obrigado BryaaN Resultou (:
Thank a todos por ajudar .