Qual é minha questão:
Boas!

Gostava de saber o código disto (acho que se chama divbox) e depois como é que o usamos?



Cumprimentos.

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

Versão do fórum:
PHPBB3

Onde viu isso ?

Viu aqui http://digimondigitalxrpg.forumeiros.com/t350-campo-dos-iniciantes-1

Olá,

CSS

Painel Visualização Imagens e Cores Cores Folha de Estilo CSS

Adicione esse codigo:

Código:

/*==============Alerta=====================*/
.ev-lua{color:#00529B;background-color:#E4E4E4; text-decoration: bold!important;background-position:10px center;-moz-border-radius:5px;-webkit-border-radius:5px;}
.alert{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#BDE5F8;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/inform10.png'); text-decoration: bold!important;}
.alert2{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#ffcc00;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/error10.png'); text-decoration: bold!important;}
.alert3{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
background-repeat:no-repeat;background-position:10px center;background-color:#ff5c5c;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/critic10.png'); text-decoration: bold!important;}
.alert4{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#4F8A10;
background-repeat:no-repeat;background-position:10px center;background-color:#effeb9;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/accept10.png'); text-decoration: bold!important;}
.alert5{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#545454;
background-repeat:no-repeat;background-position:10px center;background-color:#F2F2F2;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/mail10.png'); text-decoration: bold!important;}
.alert6{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#bb640c;
background-repeat:no-repeat;background-position:10px center;background-color:#FEEAC9;
background-image:url('http://i10.servimg.com/u/f10/17/41/76/40/light10.png'); text-decoration: bold!important;}

JavaScript

Painel Modulos HTML & JS JavaScript Criar Novo JavaScript

Investimento: :seta3: Nos Tópicos.

Código:

jQuery(document).ready(function(){jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue">Informações</button>');jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:orange">Atenção</button>');jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red">Erro</button>');jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert4();return false" style="color:green">Sucesso</button>');jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert5();return false" style="color:#AAAAAA">Mensagem</button>');jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert6();return false" style="color:#D38E49">Ideia</button>')});

Resulta?

Não Funcionou.

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:

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

Painel de Controle Visualização:seta: Imagens e Cores Cores Aba 'Folha de estilo CSS'

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

Abraços!

Eu tenho o codigo disto...
Primeiramente va ate seu css e coloque isto:

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


E na mensagem onde você quer colocar o efeito coloque isto:

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>


Veja se resulta?

Houdini escreveu:Eu tenho o codigo disto...
Primeiramente va ate seu css e coloque isto:

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


E na mensagem onde você quer colocar o efeito coloque isto:

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>


Veja se resulta?

O codigo funciona só que o meu forum fica estranho

Saudação!

Coloque novamente o código que da o erro em teu fórum, para que eu possa averiguar o problema.

Até mais!

Boas Mikéé!

Voltei a colocar o código.

Olá querido,

Exclua o seu JS e apenas adicione este código ao teu CSS:

Código:

    /*-----Cenas da moderação----*/
 
 
.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
    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://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}

.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}

.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}

.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}

.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}

  #alert-copy{
    background: #DDD;
    -webkit-box-shadow: 1px 1px 1px 1px #3b3b3b;
    -moz-box-shadow: 1px 1px 1px 1px #3b3b3b;
  }

Aceda à: Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

Lá, adicione o código que lhe passei acima.

Nos tópicos, utilize este código:

Código:

<div class="info">....</div>
<div class="success">....</div>
<div class="warning">....</div>
<div class="error">....</div>
<div class="tips">....</div>
<div class="mes">....</div>
<div class="chat">....</div>
<div class="alert-copy">....</div>

Agora vamos ativar o seu HTML:
1 - Activar o HTML no Painel de Controle;
Painel de Controle ->> Geral ->> Fórum ->> Mensagns, MP e Email
Agora terá de activar a opção: "Permitir HTML".

2 - Activar o HTML no perfil de usuário; (não é no painel de Controle)
Perfil ->> Preferências
Activar a opção "Sempre permitir HTML"

Cordialmente,
Dr.House

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:

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

Painel de Controle Visualização:seta: Imagens e Cores Cores Aba 'Folha de estilo CSS'

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

Abraços!

Dr.House escreveu:Olá querido,

Exclua o seu JS e apenas adicione este código ao teu CSS:

Código:

    /*-----Cenas da moderação----*/
 
 
.info, .success, .warning, .error, .mes, .tips, .chat, .cnb {
    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://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
    color: #00529B;
    border: 1px solid #4d8fcb;
}

.success {
    background-color: #effeb9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
    color: #4F8A10;
    border: 1px solid #9ac601;
}
.warning {
    background-color: #ffeaa9;
    background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
    color: #9F6000;
    border: 1px solid #f9b516;
}
.error {
    background-color: #fccac3;
    background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
    color: #D8000C;
    border: 1px solid #db3f23;
}

.mes {
    background-color: #F2F2F2;
    background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
    border: 1px solid #AAAAAA;
    color: #545454;
}

.tips {
    background-color: #FEEAC9;
    background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
    border: 1px solid #D38E49;
    color: #bb640c;
}

.chat {
    background-color: #daecfb;
    background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
    border: 1px solid #2078c9;
    color: #066ac4;
}

  #alert-copy{
    background: #DDD;
    -webkit-box-shadow: 1px 1px 1px 1px #3b3b3b;
    -moz-box-shadow: 1px 1px 1px 1px #3b3b3b;
  }

Aceda à: Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

Lá, adicione o código que lhe passei acima.

Nos tópicos, utilize este código:

Código:

<div class="info">....</div>
<div class="success">....</div>
<div class="warning">....</div>
<div class="error">....</div>
<div class="tips">....</div>
<div class="mes">....</div>
<div class="chat">....</div>
<div class="alert-copy">....</div>

Agora vamos ativar o seu HTML:
1 - Activar o HTML no Painel de Controle;
Painel de Controle ->> Geral ->> Fórum ->> Mensagns, MP e Email
Agora terá de activar a opção: "Permitir HTML".

2 - Activar o HTML no perfil de usuário; (não é no painel de Controle)
Perfil ->> Preferências
Activar a opção "Sempre permitir HTML"

Cordialmente,
Dr.House

Resultou obrigado podem fechar.