Aparencia dos botões de BBCode

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://www.cidadesocial.com

Descrição do problema

Olá,

Gostaria que os botões do BBCode de meu fórum, ficassem iguais a estes http://spdesign.ativoforum.com/h15-.

Até mais.

Saudações!

Que tal assim:

Código:

body .sceditor-container {
  -moz-border-radius: 0;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,.15);
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
  border: 1px solid #b6b6b6;
  border-radius: 0;
  box-shadow: 0 0 3px rgba(0,0,0,.15);
  padding: 0
 }
 
body .sceditor-toolbar {
  -moz-box-shadow: 0 1px 0 #fff inset!important;
  -webkit-box-shadow: 0 1px 0 #fff inset!important;
  background: #cfd1cf url(http://i.imgur.com/XPb5FAh.png) repeat-x 0 0!important;
  border-bottom: 1px solid #b6b6b6!important;
  box-shadow: 0 1px 0 #fff inset!important;
  padding: 6px 8px 2px;
  white-space: normal
 }
 
body .sceditor-group {
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;
  -webkit-border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;
  background: #e4e4e4 url(http://i.imgur.com/lvfV1wd.png) repeat-x 0 0!important;
  border: 1px solid #a6a6a6;
  border-bottom-color: #979797!important;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset!important;
  margin: 0 6px 5px 0 !important;
  padding: 0!important
 }
 
.sceditor-button {
  -moz-border-radius: 0!important;
  -webkit-border-radius: 0!important;
  border-left: 1px solid rgba(0,0,0,.2);
  border-radius: 0!important
 }
 
.sceditor-group .sceditor-button:first-child {border-left: 0}
 
.sceditor-button:hover {
  -moz-box-shadow: 0 0 1px rgba(0,0,0,.3) inset!important;
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3) inset!important;
  background: #ccc url(http://i.imgur.com/q00xTJ9.png) repeat-x 0 0!important;
  box-shadow: 0 0 1px rgba(0,0,0,.3) inset!important;
  cursor: default
 }
 
.sceditor-button.active,.sceditor-button.hover,.sceditor-button:active {background: #ccc url(http://i.imgur.com/q00xTJ9.png) repeat-x 0 0!important;box-shadow:0 1px 5px rgba(0,0,0,.6) inset,0 1px 0 rgba(0,0,0,.2)!important}
 
.sceditor-button.sceditor-button-size {
  background: url(http://i.imgur.com/fZYgLFV.png) 0 0 no-repeat scroll!important;
  height: 22px!important;
  width: 51px
 }
 
.sceditor-button.sceditor-button-font {
  background: url(http://i.imgur.com/fmbuqHA.png) 0 0 no-repeat scroll!important;
  height: 22px!important;
  width: 81px
 }
 
.sceditor-button.sceditor-button-font,.sceditor-button.sceditor-button-size {
  -moz-box-shadow: none!important;
  -webkit-box-shadow: none!important;
  border-radius: 3px!important;
  box-shadow: none!important;
  cursor: default
 }
 
.sceditor-button.sceditor-button-font > div,.sceditor-button.sceditor-button-size > div {display: none}
 
.sceditor-container iframe,.sceditor-container textarea {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  margin: 15px!important;
  min-height: 180px
 }
 
.sceditor-container textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
 }

Lhe agrada?

Caminho: Painel de Controle >> Visualização >> Imagens e Cores > Cores >>> Folha de estilo CSS

Até!

Perfeito, muito obrigado.