[Tutorial] SCEditor escuro estilo IPB

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

Zump
Administrador
Tempo Online : 15d 4h 9m 2s
Mensagens : 52
Reputação : 53
Ver perfil do usuário

MensagemZump em Dom Out 16, 2016 6:05 pm

Autor: Zump
Funcionalidade: PunBB

Acesse:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores -> "Aba" Folha de estilo css

Adicione esse código em sua folha de estilo css:

Código:
div.sceditor-toolbar {
    -moz-background-clip: padding;
    -moz-border-radius: 3px 3px 0 0;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px 3px 0 0;
    -webkit-user-select: none;
    background: #f7f7f7;
    background-clip: padding-box;
    border-bottom: 1px solid silver;
    border-radius: 3px 3px 0 0;
    line-height: 0;
    overflow: hidden;
    padding: 3px 5px 2px;
    user-select: none;
}
body .sceditor-toolbar {
    background: #282828!important;
    border: 0!important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#b2b2b2',GradientType=0);
}
.sceditor-container {
    -moz-background-clip: padding;
    -moz-border-radius: 4px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 4px;
    background: #fff;
    background-clip: padding-box;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #222;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    position: relative;
}
body .sceditor-container {
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
    background-color: #e9e9e9!important;
    border: 0;
    box-shadow: 0 0 3px rgba(0,0,0,.15);
    padding: 0;
}
#quick_reply #textarea_content {
    background: #333!important;
    min-width: 99.5%!important;
    padding: 4px;
    position: relative;
}
.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3),inset -1px 0 rgba(0,0,0,0.3),inset 0 -1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3),inset -1px 0 rgba(0,0,0,0.3),inset 0 -1px 0 rgba(0,0,0,0.2);
    background: #fff;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3),inset -1px 0 rgba(0,0,0,0.3),inset 0 -1px 0 rgba(0,0,0,0.2);
}
.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, .sceditor-button div {
    display: block;
}
.sceditor-button {
    -moz-background-clip: padding;
    -moz-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px;
    background-clip: padding-box;
    border-radius: 3px;
    cursor: pointer;
    cursor: pointer;
    float: left;
    height: 20px;
    padding: 3px 5px;
    text-indent: -9999px;
    width: 16px;
}
.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-container iframe, .sceditor-container textarea {width:100%!important;text-align:left!important;}
.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-size {
    background: url(http://i.imgur.com/fZYgLFV.png) 0 0 no-repeat scroll!important;
    height: 22px!important;
    width: 51px;
}
#textarea_content > div > div.sceditor-toolbar > div > a.sceditor-button.sceditor-button-size > div, #textarea_content > div > div.sceditor-toolbar > div > a.sceditor-button.sceditor-button-font > div {background-image:none!important;}
.sceditor-button.sceditor-button-font {
    background: url(http://i.imgur.com/fmbuqHA.png) 0 0 no-repeat scroll!important;
    height: 22px!important;
    width: 81px;
}
#quick_reply .frm-set .frm-buttons {
    background: #444 url(http://i.imgur.com/ZqVZHfR.png) repeat-x 0 0;
    border: 1px solid #333;
    margin: 0;
    padding: 15px 3px!important;
    text-align: right;
}
#quick_reply > fieldset > div.frm-buttons > input[type="submit"] {
    -moz-border-radius: 3px;
    -moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
    background: #212121;
    border: 1px solid #212121;
    border-radius: 3px;
    border-width: 1px 1px 0;
    box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
    color: #fff;
    cursor: pointer;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    line-height: 1.3;
    min-width: 55px;
    outline: none;
    padding: 5px 10px!important;
    text-align: center;
    text-shadow: 0 -1px 0 #191919;
}

E clique em salvar.

  • Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum