[TUTORIAL] Personalizar a paleta de cores do SCEditor

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

  • 0

[TUTORIAL] Personalizar a paleta de cores do SCEditor Empty [TUTORIAL] Personalizar a paleta de cores do SCEditor

Mensagem por Alex em 29.03.18 17:22

Personalizar a paleta de cores do SCEditor
Com este tutorial, será possível modificar o número de cores disponíveis na barra e quais cores você deseja nela num estilo elegante. Este tutorial pode ser aplicado para todas as versões.

Personalizar a paleta de cores do SCEditor
TUTORIAIS, DICAS E ASTÚCIAS

Configurando a paleta de cores

Para que o efeito possa funcionar corretamente, você deve configurar a paleta de cores do SCEditor de forma correta. Para isso, acesse:

Painel de Controle Seta Branca Geral Seta Branca Mensagens e e-mails Seta Branca Configuração

E na opção Tipo de editor - paleta de cores marque a opção Simples.
[TUTORIAL] Personalizar a paleta de cores do SCEditor Captur23
E de seguida salve a alteração da configuração.

Instalação do Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript

[TUTORIAL] Personalizar a paleta de cores do SCEditor Javaac10
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110111Seta Habilitar o gerenciamento dos códigos JavaScript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110210Seta Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110310Seta Localização - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110410Seta Código JavaScript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

E adicione o seguinte código:
Código:
$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    var mColorBasic = [],
    html = $('<div />');
           
    // Começa a lista de cores. Cada linha da paleta possui 8 cores, dai estar dividido.
         
    mColorBasic["Preto"] = "#000000";
    mColorBasic["Azul Escuro"] = "#00008B";
    mColorBasic["Verde-Azulado"] = "#008080";
    mColorBasic["Verde Escuro"] = "#006400";
    mColorBasic["Índigo"] = "#4B0082";
    mColorBasic["Carmesim"] = "#DC143C";
    mColorBasic["Laranja"] = "#FF4500";
    mColorBasic["Castanho Escuro"] = "#663300";
   
    mColorBasic["Cinza Escuro"] = "#666666";
    mColorBasic["Azul Royal"] = "#4169E1";
    mColorBasic["Turquesa Escuro"] = "#00CED1";
    mColorBasic["Verde"] = "#008000";
    mColorBasic["Roxo"] = "#9400D3";
    mColorBasic["Vermelho"] = "#FF0000";
    mColorBasic["Laranja Claro"] = "#FF9933";
    mColorBasic["Castanho"] = "#A0522D";
   
    mColorBasic["Cinza Claro"] = "#D3D3D3";
    mColorBasic["Azul Céu"] = "#87CEEB";
    mColorBasic["Ciano"] = "#00FFFF";
    mColorBasic["Verde Maçã"] = "#32CD32";
    mColorBasic["Malva"] = "#DA70D6";
    mColorBasic["Salmão"] = "#FA8072";
    mColorBasic["Dourado"] = "#FFD700";
    mColorBasic["Castanho Claro"] = "#CD853F";
   
    mColorBasic["Branco"] = "#FFFFFF";
    mColorBasic["Turquesa Pálido"] = "#AFEEEE";
    mColorBasic["Azul Esveridado"] = "#7FFFD4";
    mColorBasic["Verde Pálido"] = "#98FB98";
    mColorBasic["Rosa"] = "#FFC0CB";
    mColorBasic["Pêssego"] = "#FFDAB9";
    mColorBasic["Amarelo"] = "#FFFF00";
    mColorBasic["Madeira"] = "#DEB887";
         
    // Acaba a lista de cores
         
    for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
         
    html.find('span').click(function(e) {
      callback($(this).attr('color'));
      editor.closeDropDown(true);
      e.preventDefault();
    });
         
    editor.createDropDown(caller, "color-picker", html);
  }
})});

Instalação do CSS


CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS

Painel de controle Seta Branca Visualização Seta Branca Imagens e Cores Seta Branca Cores Seta Branca Folha de estilo CSS

[TUTORIAL] Personalizar a paleta de cores do SCEditor Stylea10
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110111Seta Salvar CSS - Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110210Seta Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum".
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110310Seta Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum.
[TUTORIAL] Personalizar a paleta de cores do SCEditor 110410Seta Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

E adicione o seguinte código:
Código:
/* Icones da paleta */
.color-option {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid #fff !important;
  margin: 3px !important;
  box-shadow: 0 0 2px #778899;
  cursor: pointer !important;
}
 
.color-option span{
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  margin: -1px!important;
}
 
.color-option, .color-option span {
  border-radius: 2px;
}
 
/* Construção da paleta - ATENÇÃO: A largura influencia a quantidade de cores por linha */
.sceditor-dropdown.sceditor-color-picker {
  width: 180px !important;
  padding: 5px !important;
  border-radius: 5px !important;
}

  • Resultado:
    [TUTORIAL] Personalizar a paleta de cores do SCEditor Captur24



Dúvidas gerais

  • Como posso mudar as cores?
    Você pode alterar as cores no código JavaScript, na parte que possui esta formatação:
    Código:
    mColorBasic["Preto"] = "#000000";
    Neste caso, pegámos a cor Preto, mas pode alterar para a que quiser. Para alterar cores, tem que seguir este padrão:
    mColorBasic["{COR}"] = "{HEXADECIMAL}";
    {COR} - O nome da cor. Este irá aparecer quando passar com o mouse por cima.
    {HEXADECIMAL} - O código Hexadecimal da cor escolhida. Lembrando que o tipo Hexadecimal é do seguinte formato: #(6 caracteres/números), como por exemplo: #000000 (Preto). Pode encontrar as cores em: ColorHexa.

  • Quantas cores posso ter?
    Como o código só funciona no modo Simples da paleta de cores, você está limitado a 32 cores disponíveis. Sempre que adicionar mais do que 32 cores à lista do JavaScript, ele interpreta apenas a última cor que adicionou para além das 32, adicionando a mesma na última posição da paleta (canto inferior direito).


Alex

Alex
Usuário destaque

Masculino
Inscrito dia : 09/09/2016
Mensagens : 648
Pontos Ativos : 868

Ver perfil do usuário https://mundogoph.org/

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


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