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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 02:18 pm por iScroll

» Como fazer sub entrada?
Hoje à(s) 02:04 pm por Czins

» Como ocultar iframe de um tópico para visitantes
Hoje à(s) 01:46 pm por Luiz

» MP para administradores
Hoje à(s) 01:42 pm por Luiz

» Caixa de Login
Hoje à(s) 01:20 pm por iScroll

» Personalizar cabeçalho
Hoje à(s) 01:12 pm por iScroll

» Personalizar posts
Hoje à(s) 11:00 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
APOllO
 
odelgado
 
Kyko
 
mrvisible
 
Shek
 
Luiz
 
iScroll
 
rlmac
 

Quem está conectado
299 usuários online :: 7 usuários cadastrados, 1 Invisível e 291 Visitantes :: 3 Motores de busca

alexandro.tadeu, Czins, iScroll, Kyo Panda, Luiz, odelgado, Shek

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

[TUTORIAL] Modificar os botões do SCEditor para ícones da FontAwesome

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

[TUTORIAL] Modificar os botões do SCEditor para ícones da FontAwesome

Mensagem por Luiz em 02/05/17, 01:15 pm

Modificar os botões do SCEditor para ícones da FontAwesome
O tutorial a seguir permite que o usuário troque todos os botões do SCEditor para FontAwesome icons.

Modificar os botões do SCEditor para ícones da FontAwesome
TUTORIAIS, DICAS E ASTÚCIAS

Opção 1. Via 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

Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
Seta 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".
Seta 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.
Seta 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.

Em seguida, basta adicionar o código a seguir na caixa de texto:
Código:
/**
 * Trocar os botões do SCEditor por FontAwesome Icons.
 *
 * @author Luiz~
 *
 * @see <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence MIT
 */
.sceditor-button {
  position: relative;
}
 
.sceditor-button * {
  text-indent: initial!important;
  color: #000!important;
  line-height: 15px!important;
}
 
.sceditor-button div {
  font-size: 0px!important;
  background-image: none!important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.sceditor-button div:before {
  font-size: 15px!important;
  font-family: FontAwesome;
  text-indent: initial!important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500!important;
}
 
.sceditor-button-bold div:before {
  content: "\f032";
}
 
.sceditor-button-italic div:before {
  content: "\f033";
}
 
.sceditor-button-underline div:before {
  content: "\f0cd";
}
 
.sceditor-button-strike div:before {
  content: "\f0cc";
}
 
.sceditor-button-left div:before {
  content: "\f036";
}
 
.sceditor-button-center div:before {
  content: "\f037";
}
 
.sceditor-button-right div:before {
  content: "\f038";
}
 
.sceditor-button-justify div:before {
  content: "\f039";
}
 
.sceditor-button-bulletlist div:before {
  content: "\f0ca";
}
 
.sceditor-button-orderedlist div:before {
  content: "\f0cb";
}
 
.sceditor-button-horizontalrule div:before {
  content: "\f068";
}
 
.sceditor-button-quote div:before {
  content: "\f10d";
}
 
.sceditor-button-code div:before {
  content: "\f1c9";
}
 
.sceditor-button-faspoiler div:before {
  content: "\f146";
}
 
.sceditor-button-fahide div:before {
  content: "\f070";
}
 
.sceditor-button-table div:before {
  content: "\f0ce";
}
 
.sceditor-button-servimg div:before {
  content: "\f03e";
}
 
.sceditor-button-image div:before {
  content: "\f1c5";
}
 
.sceditor-button-link div:before {
  content: "\f0c1";
}
 
.sceditor-button-youtube div:before {
  content: "\f166";
}
 
.sceditor-button-dailymotion {
  display: none;
}
 
.sceditor-button-flash div:before {
  content: "\f008";
}
 
.sceditor-button-headers div:before {
  content: "\f1dc";
}
 
.sceditor-button-size div:before {
  content: "\f034";
}
 
.sceditor-button-color div:before {
  content: "\f1fc";
}
 
.sceditor-button-font div:before {
  content: "\f031";
}
 
.sceditor-button-removeformat div:before {
  content: "\f024";
}
 
.sceditor-button-more div:before {
  content: "\f067";
}
 
.sceditor-button-subscript div:before {
  content: "\f12c";
}
 
.sceditor-button-superscript div:before {
  content: "\f12b";
}
 
.sceditor-button-fascroll div:before {
  content: "\f060";
}
 
.sceditor-button-faupdown div:before {
  content: "\f062";
}
 
.sceditor-button-farand div:before {
  content: "\f074";
}
 
.sceditor-button-date div:before {
  content: "\f133";
}
 
.sceditor-button-time div:before {
  content: "\f017";
}
 
.sceditor-button-pastetext div:before {
  content: "\f0ea";
}
 
.sceditor-button-source div:before {
  content: "\f016";
}
 
.sceditor-button-emoticon div:before {
  content: "\f118";
}

Logo após a aplicação do CSS, o resultado já será notável no SCEditor.

Opção 2. Via 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

Seta 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.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta Investimento - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta 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.

Feito isso, adicione o código Javascript:
Código:
/**
 * Trocar os botões do SCEditor por FontAwesome Icons.
 *
 * @author Luiz~
 * @author Kyo Panda
 *
 * @see <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence MIT
 */
(function ($) {
  'use strict';
 
  var fontAwesomeSceditorStyles = [
    '.sceditor-button {',
    '  position: relative;',
    '}',
    '',
    '.sceditor-button * {',
    '  text-indent: initial!important;',
    '  color: #000!important;',
    '  line-height: 15px!important;',
    '}',
    '',
    '.sceditor-button div {',
    '  font-size: 0px!important;',
    '  background-image: none!important;',
    '  text-rendering: auto;',
    '  -webkit-font-smoothing: antialiased;',
    '  -moz-osx-font-smoothing: grayscale;',
    '}',
    '',
    '.sceditor-button div:before {',
    '  font-size: 15px!important;',
    '  font-family: FontAwesome;',
    '  text-indent: initial!important;',
    '  position: absolute;',
    '  left: 50%;',
    '  top: 50%;',
    '  transform: translate(-50%, -50%);',
    '  font-weight: 500!important;',
    '}',
    '',
    '.sceditor-button-bold div:before {',
    '  content: "\\f032";',
    '}',
    '',
    '.sceditor-button-italic div:before {',
    '  content: "\\f033";',
    '}',
    '',
    '.sceditor-button-underline div:before {',
    '  content: "\\f0cd";',
    '}',
    '',
    '.sceditor-button-strike div:before {',
    '  content: "\\f0cc";',
    '}',
    '',
    '.sceditor-button-left div:before {',
    '  content: "\\f036";',
    '}',
    '',
    '.sceditor-button-center div:before {',
    '  content: "\\f037";',
    '}',
    '',
    '.sceditor-button-right div:before {',
    '  content: "\\f038";',
    '}',
    '',
    '.sceditor-button-justify div:before {',
    '  content: "\\f039";',
    '}',
    '',
    '.sceditor-button-bulletlist div:before {',
    '  content: "\\f0ca";',
    '}',
    '',
    '.sceditor-button-orderedlist div:before {',
    '  content: "\\f0cb";',
    '}',
    '',
    '.sceditor-button-horizontalrule div:before {',
    '  content: "\\f068";',
    '}',
    '',
    '.sceditor-button-quote div:before {',
    '  content: "\\f10d";',
    '}',
    '',
    '.sceditor-button-code div:before,',
    '.sceditor-button-c0de div:before {',
    '  content: "\\f1c9";',
    '}',
    '',
    '.sceditor-button-faspoiler div:before {',
    '  content: "\\f146";',
    '}',
    '',
    '.sceditor-button-fahide div:before {',
    '  content: "\\f070";',
    '}',
    '',
    '.sceditor-button-table div:before {',
    '  content: "\\f0ce";',
    '}',
    '',
    '.sceditor-button-servimg div:before {',
    '  content: "\\f03e";',
    '}',
    '',
    '.sceditor-button-image div:before {',
    '  content: "\\f1c5";',
    '}',
    '',
    '.sceditor-button-link div:before {',
    '  content: "\\f0c1";',
    '}',
    '',
    '.sceditor-button-youtube div:before {',
    '  content: "\\f166";',
    '}',
    '',
    '.sceditor-button-dailymotion {',
    '  display: none;',
    '}',
    '',
    '.sceditor-button-flash div:before {',
    '  content: "\\f008";',
    '}',
    '',
    '.sceditor-button-headers div:before {',
    '  content: "\\f1dc";',
    '}',
    '',
    '.sceditor-button-size div:before {',
    '  content: "\\f034";',
    '}',
    '',
    '.sceditor-button-color div:before {',
    '  content: "\\f1fc";',
    '}',
    '',
    '.sceditor-button-font div:before {',
    '  content: "\\f031";',
    '}',
    '',
    '.sceditor-button-removeformat div:before {',
    '  content: "\\f024";',
    '}',
    '',
    '.sceditor-button-more div:before {',
    '  content: "\\f067";',
    '}',
    '',
    '.sceditor-button-subscript div:before {',
    '  content: "\\f12c";',
    '}',
    '',
    '.sceditor-button-superscript div:before {',
    '  content: "\\f12b";',
    '}',
    '',
    '.sceditor-button-fascroll div:before {',
    '  content: "\\f060";',
    '}',
    '',
    '.sceditor-button-faupdown div:before {',
    '  content: "\\f062";',
    '}',
    '',
    '.sceditor-button-farand div:before {',
    '  content: "\\f074";',
    '}',
    '',
    '.sceditor-button-date div:before {',
    '  content: "\\f133";',
    '}',
    '',
    '.sceditor-button-time div:before {',
    '  content: "\\f017";',
    '}',
    '',
    '.sceditor-button-pastetext div:before {',
    '  content: "\\f0ea";',
    '}',
    '',
    '.sceditor-button-source div:before {',
    '  content: "\\f016";',
    '}',
    '',
    '.sceditor-button-emoticon div:before {',
    '  content: "\\f118";',
    '}',
    '',
  ].join('\n');
 
  $('<style>', {
    type: 'text/css',
    text: fontAwesomeSceditorStyles
  }).appendTo('head');
}(jQuery));
Ressalva-se que: O usuário poderá optar por escolher um dos dois métodos listados acima. Ambos os passos funcionam. Recomenda-se que use o método dois (via Javascript), para poupar espaço na Folha de Estilo CSS.

  • Resultado do tutorial:


avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3752
Pontos Ativos : 4440

https://github.com/lffg/

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