Adaptar código de Cores

[quadrado=Minha questão]
Bem eu achei interessante este código:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Agora eu queria saber se me poderiam adaptar sem problemas, primeiro queria que cria-sem outra caixa mas da cor "amarela" da mesma forma das outras.

Depois queria e já tentei e não consegui alterar os nomes de ".sucesso, .infos..." queria pela seguinte ordem: "Sucesso - Verde , Informação - Azul , Alerta - Amarelo , Aviso - Vermelho".

Depois o texto dentro das caixas queria que aparece-se em "branco" e não em preto.

Por fim seria possível colocar um ícone atrás de cada caixa? Ou seja colocar um ícone antes do texto que aparecer dentro dela se possível?

Se for possível agradecia!

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB[/quadrado]

UP - Necessitando de ajuda aqui amigos!

Olá veja aqui:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O código foi atualizado, agora é totalmente funcional..

Será isto que o senhor está querendo?

Agradou-me mas queria colocar outro tipo de letra e sem aquele quadrado à volta dos ícones, e também aquela "shadow" a volta das caixas, percebeu?

Quais seriam os ícones que deseja atrás?

mande as imagens para que eu possa alterar..

Pode manter esses mesmo amigo

Não será possível amigo...

note que as imagens usadas no tutorial passado por mim já possuem a borda:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


Procure umas imagens ou peça aqui na área gráfica da BestSkins...

Faça assim, meta de forma que eu posso colocar depois os ícones que depois eu coloco

Bem veja se lhe agrada:

coloque na sua folha CSS:

Código:


.postbody .sucesso, .postbody .aviso, .postbody .infos, .postbody .alerta {
width: 75%;
margin: 8px 0;
padding: 8px;
color: #fefefe;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0;
position: relative;
font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
}
.postbody .infos {
background-color: #2fa9f6;
background-image: url(http://i.imgur.com/Rb84YPI.png);
background-repeat: no-repeat;
background-position: 99% 50%;
} 
.postbody .sucesso {
background-color: #7EB62E;
background-image: url(http://i.imgur.com/6vH65jF.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.postbody .aviso { 
background-color: #BE1B00;
background-image: url(http://i.imgur.com/aN6WLBM.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.postbody .alerta { 
background-color: #F09D06;
background-image: url(http://i.imgur.com/GvA8cN0.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}


Depois coloque em uma página Javascript:

Código:


/*
* Código: Inserir novos comandos no editor.
* Data de criação: 26/12/2014.
* Autor: Daemon.
* Versão: 1.0.
* Acesse: http://bestskins.net
* Não distribuir, ou remover os créditos do autor.
*/

var add_BBCode = {
      '1': {bbcode: 'sucesso'},
      '2': {bbcode: 'aviso'},
      '3': {bbcode: 'alerta'},
      '4': {bbcode: 'infos'}
};

$(document).on('ready', function() {
var newDrop = '<div class="sceditor-dropdown sceditor-drop" style="display: none;">' +
              '  <div>' +
              '     <label unselectable="on">Inserir...</label>' +
              '     <select id="drop_value">' +
              '        <option value="" selected>--------------</option>' +
              '     </select>' +
              '  </div>' +
              '  <div>' +
              '     <label unselectable="on">Descrição (opcional):</label>' +
              '     <input type="text" id="desc_value" />' +
              '  </div>' +
              '  <div>' +
              '     <input type="button" class="button" value="Inserir" onclick="bbcode_drop()">' +
              '  </div>' +
              '</div>';
$('body').append(newDrop);
    $.each(add_BBCode, function(order, object) {
       bbcode = object.bbcode;
       $('#drop_value').append($('<option>', {
                     value: bbcode
       }).text(bbcode));
    });
$('<a class="sceditor-button" id="custom_command" onclick="toggle_dropbox(this)"><div style="background-image: url(http://i.imgur.com/EyQscqP.png);opacity: 1 !important;">CM</div></a>').insertBefore('.sceditor-button-quote');
});
function toggle_dropbox(bs) {
  var box = $('.sceditor-drop');
  if(box.is(':visible')) {
       box.hide();
  } else {
       box.css({
         'left': $(bs).offset().left,
         'top': $(bs).offset().top + $(bs).outerHeight(),
          'text-align': 'left'
       }).show();
  }
};
function bbcode_drop() {
    var box = $('.sceditor-drop');
    var bbcode = box.find('#drop_value').val();
    var nota = box.find('#desc_value').val();
    var editor = $('#text_editor_textarea').sceditor('instance');
    if(bbcode.length > 0) {
      if(nota.length > 0) {
         editor.insert('[table class="' + bbcode + '"][tr][td]' + nota + '[/td][/tr][/table]');
      } else {
         editor.insert('[table class="' + bbcode + '"][tr][td]','[/td][/tr][/table]');
      }
    }
    box.find('input[type="text"]').val('');
    box.hide();
};


Onde posso modificar a cor da fonte para branco? E também sabe como colocar essa função apenas para os usuários da Staff?

Bem ae você teria que criar outro tópico para resolver está dúvida....

Quanto ao código, já foi atendido ao que foi pedido?

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Veja fiz uma pequena melhora no código CSS:

Código:


.postbody .sucesso, .postbody .aviso, .postbody .infos, .postbody .alerta {
width: 75%;
margin: 8px 0;
padding: 8px;
color: #fefefe;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0;
position: relative;
font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
}
.postbody .infos {
background-color: #2fa9f6;
background-image: url(http://i.imgur.com/Rb84YPI.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.postbody .sucesso {
background-color: #7EB62E;
background-image: url(http://i.imgur.com/6vH65jF.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.postbody .aviso {
background-color: #BE1B00;
background-image: url(http://i.imgur.com/aN6WLBM.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.postbody .alerta {
background-color: #F09D06;
background-image: url(http://i.imgur.com/GvA8cN0.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}

.postbody .alerta:before {
content: 'Tópico Negado';
font-weight: 700;
}
.postbody .aviso:before {
content: 'Aviso Importante';
font-weight: 700;
}
.postbody .infos:before {
content: 'Informação';
font-weight: 700;
}
.postbody .sucesso:before {
content: 'Questão Resolvida';
font-weight: 700;
}


Teste e me diga se ficou bom..
caso já tenha tudo resolvido.. clique em agradecer..

Realmente ficou interessante mas era melhor se pode-se mos dar nós próprios o título ao gerar o código percebeu?

Humrum entendo...

Neste quesito, não sou tão bom em código JS, alguém com mais experiência poderá lhe ajudar..

Té mais...

Então vou dar como resolvido muito obrigado amigo!!

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]