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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Magazine 2016
Participe da pesquisa de satisfação 2016 e dê sua opinião sobre os diversos serviços de Forumeiros.
Parceiros Forumeiros
Quem está conectado
143 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 142 Visitantes :: 2 Motores de busca

Jhool

[ 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

Em curso 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 : 176
Pontos Ativos : 516

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

Em curso Re: Personalizar SCeditor

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


Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 729
Pontos Ativos : 1429

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

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

Em curso 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!


Seta Respeite as Regras do fórum e conheça a nossa equipe staff e diretrizes do FdF!
Seta Conheça a nossa Lista de tutoriais e nossa Lista de FAQs.
Seta Perdeu a senha de administração? Veja o que fazer.
Seta Ferramentas do Administrador.

Cream
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8482
Pontos Ativos : 13768

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso Re: Personalizar SCeditor

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


Luiz~
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 23/04/2016
Mensagens : 729
Pontos Ativos : 1429

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

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

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1927
Pontos Ativos : 4610

http://ajuda.forumeiros.com

Em curso 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
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1927
Pontos Ativos : 4610

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

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

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1927
Pontos Ativos : 4610

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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'

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1927
Pontos Ativos : 4610

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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?


Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1927
Pontos Ativos : 4610

http://ajuda.forumeiros.com

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso 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 : 176
Pontos Ativos : 516

http://atelier262.forumeiros.com/

Em curso Re: Personalizar SCeditor

Mensagem por Vinicius Reis Ontem à(s) 23:05

UP

Vinicius Reis
Nível 9

Masculino
Inscrito dia : 22/04/2016
Mensagens : 176
Pontos Ativos : 516

http://atelier262.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