[TUTORIAL] Aumentar e diminuir a fonte dos tópicos

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

  • 0

[TUTORIAL] Aumentar e diminuir a fonte dos tópicos

Mensagem por Luciano98 em 03/01/12, 10:24 pm

Fontes dos tópicos

Com este tutorial irá aprender a criar um tipo de nova função, para aumentar o texto da página sendo assim terá dois botões, poderá diminuir e aumentar o texto.


--> Tutoriais, dicas e Astúcia <--
Aumentar e diminuir a fonte dos tópicos





- Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)



- Inserir o código para reproduzir o texto no fórum definido:
Devemos colocá-lo em um campo que seja mostrado no fórum definido, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código.

Para adicionar o código aceda a:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)

O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="http://ajuda.forumeiros.com/h5-regras"></script>



- Código à utilizar:
;jQuery(document).ready(function(){jQuery('ul.profile-icons, .misc-icons, .post-options').append('<a href="javascript:fontUp();return false"><img src="Imagem para aumentar texto"></a><a href="javascript:fontReset();return false"><img src="Imagem que ficará entre o botão de aumentar e diminuir"></a><a href="javascript:fontDown();return false" ><img src="Imagem do botão para diminuir as fontes"></a>')});function fontReset(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='10px'){o.style.fontSize=''};if(o.style.fontSize=='11px'){o.style.fontSize=''};if(o.style.fontSize=='12px'){o.style.fontSize=''};if(o.style.fontSize=='13px'){o.style.fontSize=''};if(o.style.fontSize=='14px'){o.style.fontSize=''};if(o.style.fontSize=='15px'){o.style.fontSize=''};if(o.style.fontSize=='16px'){o.style.fontSize=''};if(o.style.fontSize=='17px'){o.style.fontSize=''};if(o.style.fontSize=='18px'){o.style.fontSize=''};if(o.style.fontSize=='19px'){o.style.fontSize=''};if(o.style.fontSize=='20px'){o.style.fontSize=''};if(o.style.fontSize=='21px'){o.style.fontSize=''};if(o.style.fontSize=='22px'){o.style.fontSize=''};if(o.style.fontSize=='23px'){o.style.fontSize=''};if(o.style.fontSize=='24px'){o.style.fontSize=''}};function fontUp(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='10px'){o.style.fontSize='11px'}else if(o.style.fontSize=='11px'){o.style.fontSize='12px'}else if(o.style.fontSize=='12px'){o.style.fontSize='13px'}else if(o.style.fontSize=='13px'){o.style.fontSize='14px'}else if(o.style.fontSize=='14px'){o.style.fontSize='15px'}else if(o.style.fontSize=='15px'){o.style.fontSize='16px'}else if(o.style.fontSize=='16px'){o.style.fontSize='17px'}else if(o.style.fontSize=='17px'){o.style.fontSize='18px'}else if(o.style.fontSize=='18px'){o.style.fontSize='19px'}else if(o.style.fontSize=='19px'){o.style.fontSize='20px'}else if(o.style.fontSize=='20px'){o.style.fontSize='21px'}else if(o.style.fontSize=='21px'){o.style.fontSize='22px'}else if(o.style.fontSize=='22px'){o.style.fontSize='23px'}else if(o.style.fontSize=='23px'){o.style.fontSize='24px'}};function fontDown(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='24px'){o.style.fontSize='23px'}else if(o.style.fontSize=='23px'){o.style.fontSize='22px'}else if(o.style.fontSize=='22px'){o.style.fontSize='21px'}else if(o.style.fontSize=='21px'){o.style.fontSize='20px'}else if(o.style.fontSize=='20px'){o.style.fontSize='19px'}else if(o.style.fontSize=='19px'){o.style.fontSize='18px'}else if(o.style.fontSize=='18px'){o.style.fontSize='17px'}else if(o.style.fontSize=='17px'){o.style.fontSize='16px'}else if(o.style.fontSize=='16px'){o.style.fontSize='15px'}else if(o.style.fontSize=='15px'){o.style.fontSize='14px'}else if(o.style.fontSize=='14px'){o.style.fontSize='13px'}else if(o.style.fontSize=='13px'){o.style.fontSize='12px'}else if(o.style.fontSize=='12px'){o.style.fontSize='11px'}else if(o.style.fontSize=='11px'){o.style.fontSize='10px'}};
Os locais aonde está de vermelho é aonde terá de inserir as respectivas imagens descritas no código.

Se quiserem utilizar um código já pronto está abaixo:
Código:
    ;jQuery(document).ready(function(){jQuery('ul.profile-icons, .misc-icons, .post-options').append('<a href="javascript:fontUp();return false"><img src="http://1.bp.blogspot.com/-laYbe7nEkbM/Tk9V2dUMX_I/AAAAAAAAFr8/V2teyR2L8ck/s1600/94.png"></a><a href="javascript:fontReset();return false"><img src="http://3.bp.blogspot.com/-pONUjnFLMB0/Tk9V2o0LFGI/AAAAAAAAFsE/_--4SHM3it4/s1600/96.png"></a><a href="javascript:fontDown();return false" ><img src="http://3.bp.blogspot.com/-j-rPgvI4dEA/Tk9V2n-P8SI/AAAAAAAAFsA/R3U1Kdq35Jo/s1600/95.png"></a>')});function fontReset(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='10px'){o.style.fontSize=''};if(o.style.fontSize=='11px'){o.style.fontSize=''};if(o.style.fontSize=='12px'){o.style.fontSize=''};if(o.style.fontSize=='13px'){o.style.fontSize=''};if(o.style.fontSize=='14px'){o.style.fontSize=''};if(o.style.fontSize=='15px'){o.style.fontSize=''};if(o.style.fontSize=='16px'){o.style.fontSize=''};if(o.style.fontSize=='17px'){o.style.fontSize=''};if(o.style.fontSize=='18px'){o.style.fontSize=''};if(o.style.fontSize=='19px'){o.style.fontSize=''};if(o.style.fontSize=='20px'){o.style.fontSize=''};if(o.style.fontSize=='21px'){o.style.fontSize=''};if(o.style.fontSize=='22px'){o.style.fontSize=''};if(o.style.fontSize=='23px'){o.style.fontSize=''};if(o.style.fontSize=='24px'){o.style.fontSize=''}};function fontUp(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='10px'){o.style.fontSize='11px'}else if(o.style.fontSize=='11px'){o.style.fontSize='12px'}else if(o.style.fontSize=='12px'){o.style.fontSize='13px'}else if(o.style.fontSize=='13px'){o.style.fontSize='14px'}else if(o.style.fontSize=='14px'){o.style.fontSize='15px'}else if(o.style.fontSize=='15px'){o.style.fontSize='16px'}else if(o.style.fontSize=='16px'){o.style.fontSize='17px'}else if(o.style.fontSize=='17px'){o.style.fontSize='18px'}else if(o.style.fontSize=='18px'){o.style.fontSize='19px'}else if(o.style.fontSize=='19px'){o.style.fontSize='20px'}else if(o.style.fontSize=='20px'){o.style.fontSize='21px'}else if(o.style.fontSize=='21px'){o.style.fontSize='22px'}else if(o.style.fontSize=='22px'){o.style.fontSize='23px'}else if(o.style.fontSize=='23px'){o.style.fontSize='24px'}};function fontDown(){var o=document.getElementById('main-content');if(o.style.fontSize==''){o.style.fontSize='12px'};if(o.style.fontSize=='24px'){o.style.fontSize='23px'}else if(o.style.fontSize=='23px'){o.style.fontSize='22px'}else if(o.style.fontSize=='22px'){o.style.fontSize='21px'}else if(o.style.fontSize=='21px'){o.style.fontSize='20px'}else if(o.style.fontSize=='20px'){o.style.fontSize='19px'}else if(o.style.fontSize=='19px'){o.style.fontSize='18px'}else if(o.style.fontSize=='18px'){o.style.fontSize='17px'}else if(o.style.fontSize=='17px'){o.style.fontSize='16px'}else if(o.style.fontSize=='16px'){o.style.fontSize='15px'}else if(o.style.fontSize=='15px'){o.style.fontSize='14px'}else if(o.style.fontSize=='14px'){o.style.fontSize='13px'}else if(o.style.fontSize=='13px'){o.style.fontSize='12px'}else if(o.style.fontSize=='12px'){o.style.fontSize='11px'}else if(o.style.fontSize=='11px'){o.style.fontSize='10px'}};

Com uma nova atualização da forumeiros poderá adicionar o código diretamente sem precisar de se utilizar a descrição do fórum...

- Criar e administrar as páginas:
Com essa opção será possível adicionar-mos o Javascript ao fórum sem muitos problemas, mas lembre-se que antes de publicar essa página .JS, pré-visualize a mesma.

Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos seus sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Nos tópicos : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
Seta Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.



- O resultado final:





© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Aumentar e diminuir a fonte dos tópicos
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.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