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 coresPara que o efeito possa funcionar corretamente, você deve configurar a paleta de cores do SCEditor de forma correta. Para isso, acesse:
Painel de Controle Geral Mensagens e e-mails Configuração | E na opção Tipo de editor - paleta de cores marque a opção Simples. E de seguida salve a alteração da configuração.
Instalação do JavascriptAs 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 Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
![[TUTORIAL] Personalizar a paleta de cores do SCEditor 110111](https://i.servimg.com/u/f36/11/66/91/15/110111.gif) | 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 110210](https://i.servimg.com/u/f36/11/66/91/15/110210.gif) | 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 110310](https://i.servimg.com/u/f36/11/66/91/15/110310.gif) | 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 110410](https://i.servimg.com/u/f36/11/66/91/15/110410.gif) | 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 Visualização Imagens e Cores Cores Folha de estilo CSS |
![[TUTORIAL] Personalizar a paleta de cores do SCEditor 110111](https://i.servimg.com/u/f36/11/66/91/15/110111.gif) | 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 110210](https://i.servimg.com/u/f36/11/66/91/15/110210.gif) | 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 110310](https://i.servimg.com/u/f36/11/66/91/15/110310.gif) | 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 110410](https://i.servimg.com/u/f36/11/66/91/15/110410.gif) | 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; }
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).
|