Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Shek Crowley
 
Fou-Lu
 
Holkis
 
iScroll
 
Sr.Oliveira
 
Harleen
 
while
 
Stewart
 
fiapinho
 

Quem está conectado
278 usuários online :: 4 usuários cadastrados, Nenhum Invisível e 274 Visitantes :: 2 Motores de busca

fascicularia, Harleen, iScroll, L Mars

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Personalizar SCeditor

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

Resolvido Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 30 Nov 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Personalizar SCeditor

Mensagem por Luiz~ em Qua 30 Nov 2016 - 13:59


Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1572

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 30 Nov 2016 - 14:28

E como eu posso retira-los?!

Obrigado.

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Personalizar SCeditor

Mensagem por Cream em Qua 30 Nov 2016 - 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
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 13901

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 30 Nov 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Luiz~ em Qua 30 Nov 2016 - 19:02


Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1572

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 30 Nov 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Seg 5 Dez 2016 - 11:53

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Qua 7 Dez 2016 - 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 */


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Sex 23 Dez 2016 - 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
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Sab 24 Dez 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Sab 24 Dez 2016 - 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));


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Sab 24 Dez 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Qua 28 Dez 2016 - 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'


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 28 Dez 2016 - 17:35

http://prnt.sc/doyjfb

= hr
= tabela
= Uma outra função que n existe no fórum da forumeiros...
= Lista

Obrigado.

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Qui 29 Dez 2016 - 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?



Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qui 29 Dez 2016 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Seg 9 Jan 2017 - 11:04

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Ter 10 Jan 2017 - 23:27

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Dom 15 Jan 2017 - 6:16

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Ter 17 Jan 2017 - 9:13

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Sex 20 Jan 2017 - 13:35

#UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Sab 21 Jan 2017 - 17:02

#UP ²

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Dom 22 Jan 2017 - 23:05

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Ter 24 Jan 2017 - 14:11

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Ter 24 Jan 2017 - 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);
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 25 Jan 2017 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/
  • 0

Resolvido Re: Personalizar SCeditor

Mensagem por Kyo Panda em Qua 25 Jan 2017 - 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);
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 25 Jan 2017 - 14:54

Ótimo ^^

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

http://prntscr.com/e06iou

Obrigado novamente.

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Luiz~ em Qua 25 Jan 2017 - 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~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1572

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 25 Jan 2017 - 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
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Luiz~ em Qua 25 Jan 2017 - 17:11

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

Até mais.

Luiz~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1572

http://ajuda.forumeiros.com

Resolvido Re: Personalizar SCeditor

Mensagem por Vinicius Reis em Qua 25 Jan 2017 - 17:15

Obrigado! Obrigado! Muito obrigado.

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

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 194
Pontos Ativos : 574

http://atelier262.forumeiros.com/

Resolvido Re: Personalizar SCeditor

Mensagem por Luiz~ em Qua 25 Jan 2017 - 17:20

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

---
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~
Usuário destaque

Masculino
Inscrito dia : 23/04/2016
Mensagens : 813
Pontos Ativos : 1572

http://ajuda.forumeiros.com

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

- Tópicos similares

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