Personalizar SCeditor

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.

Olá!

Veja este tutorial:
https://ajuda.forumeiros.com/t57328-tutorial-alterar-icone-dos-botoes-bbcode

Até mais.

E como eu posso retira-los?!

Obrigado.

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!

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?!

Veja:

-> https://ajuda.forumeiros.com/t55941-paleta-de-cores-diversificada?highlight=paleta+de

Até mais.

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

UP

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 */

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/

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.

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));


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.

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'

http://prnt.sc/doyjfb

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

Obrigado.

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?

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.

UP

UP

UP

UP

#UP

#UP ²

UP

UP

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);
}

Ó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.

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);
}

Ótimo ^^

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

http://prntscr.com/e06iou

Obrigado novamente.

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.

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.

Adicione mais este código:

Código:

div.sceditor-dropdown .button {
    color: #2a2a2a!important;
}

Até mais.

Obrigado! Obrigado! Muito obrigado.

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

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

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".