Personalizar SCeditor

4 participantes

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

Tópico resolvido Personalizar SCeditor

Mensagem por Vinicius Reis 30.11.16 13:51

Detalhes da questão


Endereço do fórum: http://atelier262.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá queridinhos, e queridinhas!

Eu quero muito que meu SCeditor fique o quanto mais parecido com este: http://prnt.sc/ddm8v7
Olha como ele está atualmente: http://prnt.sc/ddm9yf

Eu vi este SCeditor no fórum aqui




Bom vamos lá!

Imagem no B: aqui
Imagem do I: aqui
Imagem do U: aqui
Imagem do S: aqui

Imagem do editar a cor: aqui
-> Está função é um pouco diferente da do que forumeiros, ela só especifica cores especificas, olhe as cores que ela aparece, e como ela aprece: http://prntscr.com/ddme28


Imagem da opção de mudar o tamanho da letra: aqui
-> Está função é um pouco diferente da do que forumeiros, ela só especifica tamanhos especificos, olhe os tamanhos que ela aparece, e como ela aprece: http://prnt.sc/ddmerm

Imagem da função de mudar o estilo da fonte: aqui
-> Está função é um pouco diferente da do que forumeiros, ela só especifica o lugar especifico, onde ela aparece, e como ela aprece: http://prntscr.com/ddmgj3

Imagem do função de pular linha o famoso hr: aqui, está opção é um pouco difrente da do forumeiros, eu quero que ela aparece quando vai comentar algo e quando vai criar um tópico.

Imagem da função code: aqui

Imagem da opção esconder: aqui

Imagem da opção imagem: aqui, está opção é um pouco diferente da do forumeiros, ela especifica o lugar onde a imagem vai! E não tem opção de hospedar img nem nada assim, só coloca a url da img e pronto, img dela em dropdown http://prnt.sc/ddmj7w

Imagem da opção video: aqui

Imagem da opção link: aqui

Imagem da opção lista: aqui, quero que está opção apareça para quem vai fazer um tópico e para quem vai comentar algo.

Imagem da opção de citação: aqui

Imagem da opção spoiler: aqui


E só, nada mais, nada menos que isto. Obrigado!

Cores: Tabela de cores da opção de mudar as cores aqui:
Código:

#009D9D
#2E72CB
#30BA76
#606090
#6C77C1
#92CF91
#98E2EB
#BABD2F
#C2C2DA
#CB546B
#EB1D51
#ED67EA
#EDCC8D
#E68D43
#F0A78E
#FEB1FC

Cor de fundo cinza: #2b2b2b
Cor da letra "Responder": #c2c2da
Cor da linha que separa o Responder, com o SCEditor: #e5e5e5




Obrigado.

Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Luiz 30.11.16 13:59

Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 30.11.16 14:28

E como eu posso retira-los?!

Obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Cream 30.11.16 16:38

Olá autor,

De acordo com o tutorial, basta retirar a palavra "div" e adicionar a propriedade "display : none !important;". Por exemplo, para o botão de negrito:
Código:
.sceditor-button-bold{
display: none !important;
}

Até mais!
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 30.11.16 18:50

Thanks, e agora como faço para fazer aquela tabela de cores lá? As opções de tamanhos de letras/e fontes como faço para modificar o tamanho também?!
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Luiz 30.11.16 19:02

Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 30.11.16 19:24

Eu adoraria que tivesse só apenas essas opções de cores na ESCOLHA mesmo.
[AQUELAS QUE EU MOSTREI NO TÓPICO]
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 05.12.16 11:53

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 07.12.16 0:43

Para as cores, crie um novo Javascript com o investimento em Todas as páginas com o código abaixo:

Código:
/*global jQuery*/

/**
 * Change the default list of colors on sceditor
 *
 * @author Kyo Panda (ajuda.forumeiros.com)
 * @license MIT
 */
 
; (function ($) {
    'use script';

    var colors;

    colors = [
        ['#009D9D', '#2E72CB', '#30BA76'],
        ['#606090', '#6C77C1', '#92CF91'],
        ['#98E2EB', '#BABD2F', '#C2C2DA'],
        ['#CB546B', '#EB1D51', '#ED67EA'],
        ['#EDCC8D', '#E68D43', '#F0A78E'],
        ['#FEB1FC']
    ];

    $(function () {
        if (!$.sceditor) {
            return;
        }

        color = $.sceditor.commands.color;

        color._menu = function (editor, caller, callback) {
            var html, list, i, j;

            html = $('<div>', {
                class: 'sceditor-custom-color-list'
            });

            for (i = 0; i < colors.length; i++) {
                list = $('<ul>');

                for (j = 0; j < colors[i].length; j++) {
                    list.append($('<li>', {
                        html: $('<a>', {
                            href: 'javascript:void(0)',
                            class: 'sceditor-custom-color',
                            style: 'color: ' + colors[i][j],
                            html: colors[i][j]
                        }).prop('outerHTML')
                    }));
                }

                html.append(list);
            }

            html.find('a').on('click', function () {
                callback($(this).text());
                editor.closeDropDown(true);
            });

            editor.createDropDown(caller, "color-picker", html);
        };

        $.sceditor.command.set('color', color);
    });
})(jQuery);

E adicione ao CSS:

Código:
/** BEGIN Custom SCEditor Colors */

.sceditor-custom-color-list {
  background-color: #1c3c41;
  padding: 10px !important;
  border-radius: 5px;
  border: 1px #333 solid;
}

.sceditor-custom-color-list ul {
  overflow: hidden;
  padding-bottom: 10px;
}

.sceditor-custom-color-list ul:last-child {
  padding-bottom: 0;
}

.sceditor-custom-color-list ul li {
  display: block;
  float: left;
  width: 33.3%;
  text-align: center;
  padding-right: 10px;
  box-sizing: border-box;
}

.sceditor-custom-color-list ul li:last-child {
  padding-right: 0;
}

.sceditor-custom-color {
  font-family: 'Lucida Console', 'Monaco', monospace;
  font-size: 14px;
}

.sceditor-custom-color:hover,
.sceditor-custom-color:active {
  background-color: transparent !important;
  text-decoration: underline;
}

/** END Custom SCEditor Colors */
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 23.12.16 21:31

Para alterar o tamanho da fonte:

Código:
/* globals jQuery */

(function($) {
    'use strict';

    if (!$.sceditor) {
        return;
    }

    $.sceditor.command.get('size')._dropDown = function(editor, caller, callback) {
        var sizes = {
            '10': 'Pequeno',
            '16': 'Grande',
            '18': 'Muito grande',
        };

        var list = [];

        $.each(sizes, function(size, label) {
            list.push([
                '<a class="sceditor-fontsize-option" data-size="' + size + '" href="#" unselectable="on">',
                '  <span style="font-size: ' + size + 'px;" unselectable="on">' + label + '</span>',
                '</a>',
            ].join('\n'));
        });

        var $content = $('<div>');

        $content
            .append(list.join(''))
            .on('click', 'a', function(event) {
                callback($(this).data('size'));
                editor.closeDropDown(true);
                event.preventDefault();
            });

        editor.createDropDown(caller, 'fontsize-picker', $content);
    };
}(jQuery));

E agora serei sincero: Será bem difícil de acertar os demais. Cada alteração no SCEditor é um parto para ser criada, isso nas mais simples, como o seletor de cores e de tamanho. Agora os outros 3 (seleção de fonte, alinhamento e imagem) que são botões "compostos", onde você seleciona a ação (pela setinha) e realiza a ação clicando no botão ao lado, ficará um pouco mais extenso e complexo que os outros, extenso o suficiente para passar do nível que podemos posso dar suporte.

Assim sendo, esse é o último botão que implemento. Fica ao seu critério manter o "up" no tópico.

Tudo de bom. o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 24.12.16 1:42

Vinicius Reis escreveu:Legal, teria como deixar a cor da caixa onde está as cores com o bordado #202020 ao invés de branco?!

É possível fazer as outras coisas que eu citei no tópico? Por exemplo mudar o designer dele? (dele que eu falo é o SKEditor mesmo, deixar que nem a foto)

Obrigado.




Ah sim!

Este ao contrário das cores, não teve efeito algum, investi em todas as páginas e mesmo assim não deu em nada.

Obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 24.12.16 9:01

Troque por esse:

Código:
/* globals jQuery */

(function($) {
    'use strict';

    $(function() {
        if (!$.sceditor) {
            return;
        }

        $.sceditor.command.get('size')._dropDown = function(editor, caller, callback) {
            var sizes = {
                '10': 'Pequeno',
                '16': 'Grande',
                '18': 'Muito grande',
            };

            var list = [];

            $.each(sizes, function(size, label) {
                list.push([
                    '<a class="sceditor-fontsize-option" data-size="' + size + '" href="#" unselectable="on">',
                    '  <span style="font-size: ' + size + 'px;" unselectable="on">' + label + '</span>',
                    '</a>',
                ].join('\n'));
            });

            var $content = $('<div>');

            $content
                .append(list.join(''))
                .on('click', 'a', function(event) {
                    callback($(this).data('size'));
                    editor.closeDropDown(true);
                    event.preventDefault();
                });

            editor.createDropDown(caller, 'fontsize-picker', $content);
        };
    });
}(jQuery));
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 24.12.16 17:43

Obrigado, agora deu!

Teria como fazer isto:
Legal, teria como deixar a cor da caixa onde está as cores com o bordado #202020 ao invés de branco?!

É possível fazer as outras coisas que eu citei no tópico? Por exemplo mudar o designer dele? (dele que eu falo é o SKEditor mesmo, deixar que nem a foto)

Obrigado.




Thank you very much.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 28.12.16 10:24

Com exceção dos botões (Pré-visualizar, Fechar) no canto direito, podemos alcançar um resultado aproximado. Porém, existem dois tipos de formulários: O no fim da página de tópicos (que se assemelha ao do Atelier 801) e o da página de postagem (mais completo).

Preciso que o senhor envie o modelo do segundo.

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 28.12.16 17:35

http://prnt.sc/doyjfb

Personalizar SCeditor Separation = hr
Personalizar SCeditor Table = tabela
Personalizar SCeditor Ui-tab = Uma outra função que n existe no fórum da forumeiros...
Personalizar SCeditor Edit-list = Lista

Obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 29.12.16 0:40

Trocar os ícones o senhor mesmo pode fazer pelo tutorial que o @Luiz~ passou (se já não o fez) e quanto a botões com funções extras, eu me abstenho a fazer. Como citado na mensagem acima, o trabalho para criar cada um deles se equipara a criar uma página nova.

Quanto ao visual, tentarei chegar o mais próximo possível, já que não tenho acesso ao HTML desses blocos.

Em adição, o que faço com a caixa de emoticons do lado do formulário de postagem. Deixo lá ou oculto?

Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 29.12.16 0:53

Sim, eu só estava falando qual imagem era qual bbcode! E já troquei os ícones.

Pode ocultar com certeza, tudo que impeça a total igualdade do objetivo, oculte por favor. Porém já sai que não será 100% igual mais quanto mais parecido, melhor é.

Ah eu salvei a página para você, aqui.

Muito obrigado Kyo.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 09.01.17 11:04

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 10.01.17 23:27

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 15.01.17 6:16

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 17.01.17 9:13

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 20.01.17 13:35

#UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 21.01.17 17:02

#UP ²
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 22.01.17 23:05

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 24.01.17 14:11

UP
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 24.01.17 23:27

Adicione ao seu CSS:

Código:
#quick_reply,
#postingbox #message-box {
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 0 0 20px;
}

#postingbox #message-box {
  margin-top: 10px;
}

#postingbox #smiley-box {
  display: none;
}

#quick_reply:before {
  content: "Responder";
  display: block;
  font-size: 24px;
  padding: 10px 0 5px;
  margin: 0 5px 20px;
  border-bottom: 1px #e4e4e4 solid;
}

#textarea_content {
  width: auto !important;
}

#quick_reply .sceditor-container,
#postingbox .sceditor-container {
  box-sizing: border-box;
  border: none;
  padding: 0 !important;
  background-color: transparent !important;
  text-align: left !important;
}

#quick_reply .sceditor-toolbar,
#postingbox .sceditor-toolbar {
  position: relative;
  border: none;
  padding: 0 0 0 15%;
  text-align: left;
  margin: 0;
}

#quick_reply .sceditor-toolbar:before,
#postingbox  .sceditor-toolbar:before {
  content: "Mensagem";
  display: block;
  color: #c2c2da;
  position: absolute;
  top: 0;
  height: 30px;
  line-height: 30px;
  text-align: right;
  right: 85%;
  padding-right: 20px;
  font-weight: normal;
  font-size: 14px;
}

#quick_reply .sceditor-group,
#postingbox .sceditor-group {
  background: linear-gradient(180deg, #fff, #e5e5e5);
  padding: 0;
  overflow: hidden;
}

#quick_reply .sceditor-button,
#postingbox .sceditor-button {
  border-radius: 0;
  border-right: 1px #d4d4d4 solid;
}

#quick_reply .sceditor-button:last-child,
#postingbox .sceditor-button:last-child {
  border-right: none;
}

#quick_reply .sceditor-button.active,
#quick_reply .sceditor-button:hover,
#postingbox .sceditor-button.active,
#postingbox .sceditor-button:hover {
  box-shadow: none;
}

#quick_reply textarea,
#postingbox textarea {
  background-color: #fff !important;
  border-radius: 5px;
  width: 82% !important;
  box-sizing: border-box;
  margin: 5px 0 0 15%;
  height: 100px !important;
  color: #333;
  padding: 10px;
}

#quick_reply #textarea_content + div {
  text-align: left !important;
  padding-left: 15%;
}

#quick_reply #textarea_content + div .button2,
#postingbox + .panel .submit-buttons .button1,
#postingbox + .panel .submit-buttons .button2 {
  margin: 0;
  border: none;
  font-weight: 700;
  padding: 8px 10px !important;
  outline: none;
  border-radius: 0 3px 3px 0;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #0782ca, #0b48ca);
}

#quick_reply #textarea_content + div .button2[name="preview"],
#postingbox + .panel .submit-buttons .button2[name="preview"] {
  background: linear-gradient(180deg, #58bcda, #3197b5);
  margin-right: -5px;
  border-radius: 3px 0 0 3px;
}

#postingbox + .panel .submit-buttons .button2[name="preview"] {
  margin-right: -8px;
}

#quick_reply #textarea_content + div .button2:hover,
#quick_reply #textarea_content + div .button2:focus,
#quick_reply #textarea_content + div .button2:active,
#postingbox + .panel .submit-buttons .button1:hover,
#postingbox + .panel .submit-buttons .button1:focus,
#postingbox + .panel .submit-buttons .button1:active {
  background: linear-gradient(180deg, #0899ef, #094ee2);
}

#quick_reply #textarea_content + div .button2[name="preview"]:hover,
#quick_reply #textarea_content + div .button2[name="preview"]:focus,
#quick_reply #textarea_content + div .button2[name="preview"]:active,
#postingbox + .panel .submit-buttons .button2[name="preview"]:hover,
#postingbox + .panel .submit-buttons .button2[name="preview"]:focus,
#postingbox + .panel .submit-buttons .button2[name="preview"]:active {
  background: linear-gradient(180deg, #71d8f7, #34a9cc);
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 25.01.17 13:11

ÓTIMO!!! AMEI! VALEU A PENA ESPERAR, OBRIGADO.

Na opção de criar um novo tópico tercia como trocar isto: http://prnt.sc/e051ge por isso: http://prnt.sc/e051rb ??

Obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda 25.01.17 14:34

Troque o CSS passado por esse:

Código:
#quick_reply,
#postingbox {
  background-color: #2a2a2a;
  border-radius: 10px;
  padding: 0 0 20px;
}
 
#postingbox #message-box {
  margin-top: 10px;
}
 
#postingbox #smiley-box {
  display: none;
}
 
#quick_reply:before,
#postingbox:before {
  content: "Responder";
  display: block;
  font-size: 24px;
  padding: 10px 0 5px;
  margin: 0 5px 20px;
  border-bottom: 1px #e4e4e4 solid;
}
 
#textarea_content {
  width: auto !important;
}
 
#quick_reply .sceditor-container,
#postingbox .sceditor-container {
  box-sizing: border-box;
  border: none;
  padding: 0 !important;
  background-color: transparent !important;
  text-align: left !important;
}
 
#quick_reply .sceditor-toolbar,
#postingbox .sceditor-toolbar,
#postingbox .fields1 dl {
  position: relative;
  border: none;
  padding: 0 0 0 15%;
  text-align: left;
  margin: 0;
}
 
#quick_reply .sceditor-toolbar:before,
#postingbox  .sceditor-toolbar:before,
#postingbox .fields1 dl dt {
  content: "Mensagem";
  display: block;
  color: #c2c2da;
  position: absolute;
  top: 0;
  height: 30px;
  line-height: 30px;
  text-align: right;
  right: 85%;
  padding-right: 20px;
  font-weight: normal;
  font-size: 14px;
}

#postingbox .fields1 dl dt {
    font-size: 0;
    width: auto;
}

#postingbox .fields1 dl dt:before {
    content: "Título";
    font-size: 14px;
    display: block;
}

#postingbox .fields1 dd {
    margin: 0;
}

#postingbox .fields1 .inputbox {
    background: #fff;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    border-radius: 5px;
}
 
#quick_reply .sceditor-group,
#postingbox .sceditor-group {
  background: linear-gradient(180deg, #fff, #e5e5e5);
  padding: 0;
  overflow: hidden;
}
 
#quick_reply .sceditor-button,
#postingbox .sceditor-button {
  border-radius: 0;
  border-right: 1px #d4d4d4 solid;
}
 
#quick_reply .sceditor-button:last-child,
#postingbox .sceditor-button:last-child {
  border-right: none;
}
 
#quick_reply .sceditor-button.active,
#quick_reply .sceditor-button:hover,
#postingbox .sceditor-button.active,
#postingbox .sceditor-button:hover {
  box-shadow: none;
}
 
#quick_reply textarea,
#postingbox textarea {
  background-color: #fff !important;
  border-radius: 5px;
  width: 82% !important;
  box-sizing: border-box;
  margin: 5px 0 0 15%;
  height: 100px !important;
  color: #333;
  padding: 10px;
}
 
#quick_reply #textarea_content + div {
  text-align: left !important;
  padding-left: 15%;
}
 
#quick_reply #textarea_content + div .button2,
#postingbox + .panel .submit-buttons .button1,
#postingbox + .panel .submit-buttons .button2 {
  margin: 0;
  border: none;
  font-weight: 700;
  padding: 8px 10px !important;
  outline: none;
  border-radius: 0 3px 3px 0;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #0782ca, #0b48ca);
}
 
#quick_reply #textarea_content + div .button2[name="preview"],
#postingbox + .panel .submit-buttons .button2[name="preview"] {
  background: linear-gradient(180deg, #58bcda, #3197b5);
  margin-right: -5px;
  border-radius: 3px 0 0 3px;
}
 
#postingbox + .panel .submit-buttons .button2[name="preview"] {
  margin-right: -8px;
}
 
#quick_reply #textarea_content + div .button2:hover,
#quick_reply #textarea_content + div .button2:focus,
#quick_reply #textarea_content + div .button2:active,
#postingbox + .panel .submit-buttons .button1:hover,
#postingbox + .panel .submit-buttons .button1:focus,
#postingbox + .panel .submit-buttons .button1:active {
  background: linear-gradient(180deg, #0899ef, #094ee2);
}
 
#quick_reply #textarea_content + div .button2[name="preview"]:hover,
#quick_reply #textarea_content + div .button2[name="preview"]:focus,
#quick_reply #textarea_content + div .button2[name="preview"]:active,
#postingbox + .panel .submit-buttons .button2[name="preview"]:hover,
#postingbox + .panel .submit-buttons .button2[name="preview"]:focus,
#postingbox + .panel .submit-buttons .button2[name="preview"]:active {
  background: linear-gradient(180deg, #71d8f7, #34a9cc);
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 25.01.17 14:54

Ótimo ^^

Teria como arrumar aquele negocio das cores? Está com um bordado branco!

http://prntscr.com/e06iou

Obrigado novamente.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Luiz 25.01.17 16:18

Olá, adicione este código em sua CSS:
Código:
.sceditor-dropdown.sceditor-color-picker {
    border-color: #1c3c41!important;
    background: #1c3c41!important;
}
.sceditor-custom-color-list {
    border-color: #1c3c41!important;
}

Basta mudar para a cor que o senhor deseja.
No mais, sua questão encontra-se resolvida?

Até mais. Piscada
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 25.01.17 16:45

Ah obrigado..

Quase kkj

Agora o que me incomoda é os botões inserir (de cor cinza), eles estão quase invisíveis, olhe: http://prntscr.com/e085lp

Obrigado.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Luiz 25.01.17 17:11

Adicione mais este código:
Código:
div.sceditor-dropdown .button {
    color: #2a2a2a!important;
}

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis 25.01.17 17:15

Obrigado! Obrigado! Muito obrigado.

Podem fechar o tópico, pois finalmente está resolvido.
Vinicius Reis

Vinicius Reis
****

Membro desde : 22/04/2016
Mensagens : 200
Pontos : 274

http://atelier262.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizar SCeditor

Mensagem por Luiz 25.01.17 17:20

Disponha, Vinicius.
Créditos ao @Kyo Panda. Tudo isso foi graças à ele. Feliz

---
Personalizar SCeditor Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos