[Tutorial] Adicionar fontes no SCeditor
Página 1 de 1 • Compartilhe
- Zump
- Tempo Online : 33d 4h 43m 44s
Mensagens : 52
Reputação : 53
Autor: Zump (while)
Funcionalidade: Em todas as versões
![]() | Adicionar fontes no SCeditor |
As vezes gostaríamos de adicionar novas fontes no SCeditor. Neste tutorial vamos aprender como é possível adicionar novas fontes.
--> Tutoriais, dicas e astúcias <--
Adicionar fontes no SCeditor
Adicionar fontes no SCeditor
1º - Paginas 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 :seta2: Modulos :seta2: HTML & JavaScript :seta2: "Aba" Gestão dos códigos JavaScripts |
![[Tutorial] Adicionar fontes no SCeditor Painel13](https://i.servimg.com/u/f48/15/88/72/83/painel13.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
2º - Código a ser usado:
Coloque esse código no conteúdo do javascript
- Código:
$(function(){$(function() {
$('.sceditor-button-font').click(function() {
newFont('Lobster');
newFont('Merriweather');
newFont('Katibeh');
newFont('Inconsolata');
newFont('Dosis');
newFont('BioRhyme');
newFont('Tillana');
$('.sceditor-font-option.new-font').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[font='+$(this).attr('data-font')+']','[/font]');$('.sceditor-font-picker').remove();e.preventDefault()})
});
function newFont(font){$('.sceditor-font-picker div').append('<a unselectable="on" class="sceditor-font-option new-font" href="#" data-font="'+font+'"><font unselectable="on" face="'+font+'">'+font+'</font></a>')}
})});
3° - Edição dos templates
Para que possamos fazer tal função em nosso fórum, precisaremos modificar o Template "Overall_header", como mostramos abaixo:
Painel de controle :seta2: Visualização :seta2: Templates :seta2: "Aba" Geral :seta2: Overall_header |
![[Tutorial] Adicionar fontes no SCeditor Templa10](https://i.servimg.com/u/f48/15/88/72/83/templa10.png)
4º - Adicionando o código:
Adicione esse código no topo do seu overall_header:
- Código:
<link href="https://fonts.googleapis.com/css?family=BioRhyme|Dosis|Inconsolata|Katibeh|Lobster|Merriweather|Tillana" rel="stylesheet">
- Resultado:
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos