[TUTORIAL] Toolbar personalizada

Neste tutorial será ensinada a forma de colocar uma toolbar totalmente personalizada no seu fórum. Assim não terá de recorrer a websites externos para colocar algo deste tipo no seu fórum, poderá fazê-lo você mesmo(a).

--> Lista de Tutoriais, Dicas e Astúcias <--
Toolbar personalizada

1º - Adicionar o código na folha CSS:
Nesta etapa apenas copie o código abaixo para a seguinte localização:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


Adicione o seguinte código:

#myfooter{
background-image: url(URL DA IMAGEM DA TOOLBAR);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}

Laranja: Aqui deverá colocar o link da imagem que deseja colocar como toolbar.
Verde: Neste local deverá definir se deseja que esse mesmo fundo se repita ou não (é aconselhável que não se repita)
Azul: Aqui poderá definir o valor da borda das imagens da sua toolbar. Coloque "0px" caso não deseje colocar nenhuma.
Indigo: Esta propriedade serve para alterar a posição das imagens. Se estiverem demasiadamente em baixo poderá colocá-las mais para cima através do aumento do número desta propriedade.
Castanho: Em vez de adicionar espaços manualmente entre cada imagem poderá fazê-lo de uma só vez através duma só propriedade. Neste caso será adicionada automaticamente uma distância de 20px entre as imagens.

Disponível para versões Phpbb3 e Invision

2º - Configurar a toolbar
Para que possamos visualizar a toolbar temos ainda que seguir um último passo: colocar uma divisão específica para que a toolbar apareça sempre ao fundo do fórum.

Em primeiro lugar devemos aceder à seguinte localização:Painel de Controle -> Visualização -> Homepage -> Geral.

Assunto da mensagem - Representa o título da mensagem da home page, ele será sempre em maior destaque do que os outros textos É permitido o uso de códigos HTML neste campo.

Conteúdo da mensagem - Aqui fica a mensagem propriamente dita. Poderá utilizar códigos HTML e BBCode. É importante lembrar também que esta mensagem será visível para todos.

Depois de ter seguido o caminho indicado deverá colar o seguinte código:

<div id="myfooter" style="height: 40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;" >

<p align="center">

Informação sobre os ícones aqui

</p></form></div></p></div>

Vermelho: Nesta parte poderá alterar a altura da toolbar. Quanto maior forem os seus ícones maior deverá ser o valor desta propriedade.
Verde: Já nesta propriedade poderá definir a largura da sua toolbar.

Nota: Estes são os únicos valores que deverá alterar no código fornecido acima. Caso altere outros valores poderá comprometer o funcionamento desta aplicação.

Disponível para versão Phpbb2 e Punbb

3º - Configurar a toolbar nas versões PhpBB2 e PunBB (alteração de templates)
Para que possamos visualizar a toolbar nas versões discriminadas em cima, teremos forçosamente de alterar os templates das mesmas. No entanto o processo é bastante simples. Terá de aceder a;
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


E adicionar o seguinte código:

#myfooter{
background-image: url(URL DA IMAGEM DA TOOLBAR);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}

Laranja: Aqui deverá colocar o link da imagem que deseja colocar como toolbar.
Verde: Neste local deverá definir se deseja que esse mesmo fundo se repita ou não (é aconselhável que não se repita)
Azul: Aqui poderá definir o valor da borda das imagens da sua toolbar. Coloque "0px" caso não deseje colocar nenhuma.
Indigo: Esta propriedade serve para alterar a posição das imagens. Se estiverem demasiadamente em baixo poderá colocá-las mais para cima através do aumento do número desta propriedade.
Castanho: Em vez de adicionar espaços manualmente entre cada imagem poderá fazê-lo de uma só vez através duma só propriedade. Neste caso será adicionada automaticamente uma distância de 20px entre as imagens.

Depois de colocarmos este código teremos de proceder à modificação dos templates. Para isso começamos por dirigir-nos à seguinte localização:

Painel de controle Visualização Templates Geral overall_footer

Comece por clicar em (modificar) e entrará na parte de edição desse mesmo template.

</body> </html> Deverá procurar esta parte do template. Encontra-se mesmo no fundo de tudo, ou seja, basta mover completamente o scroll para baixo.

Salvar Deverá carregar neste botão depois de alterar o conteúdo do template.

Como foi referido em cima deverá procurar a parte "</body>
</html>". Assim que a encontrar deverá colar acima dessas duas tags o seguinte:

<div id="myfooter" style="height: 40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;" ><p align="center">

Informação sobre os ícones aqui

</p></div>

Vermelho: Nesta parte poderá alterar a altura da toolbar. Quanto maior forem os seus ícones maior deverá ser o valor desta propriedade.
Verde: Já nesta propriedade poderá definir a largura da sua toolbar.

Nota: Estes são os únicos valores que deverá alterar no código fornecido acima. Caso altere outros valores poderá comprometer o funcionamento desta aplicação. Além do mais não se preocupe caso fique com algo semelhante a "</div>
</body>
</html>", é normal. Se colou o código acima de "</body>" fez tudo bem.

Por fim, depois de salvar, irá voltar à parte dos templates. Clique em para publicar o template. Caso tenha seguido todos os passos acima descritos a sua toolbar deverá estar a funcionar corretamente.

4º - Informações e ajudas suplementares

Para ajudá-lo com a sua toolbar fornecemos-lhe ainda algumas imagens que poderá utilizar. Veja os links abaixo:

https://i.servimg.com/u/f81/11/91/65/81/mac_ba10.png
https://i.servimg.com/u/f81/11/91/65/81/mac_ba11.png
https://i.servimg.com/u/f81/11/91/65/81/macdar10.png
https://i.servimg.com/u/f81/11/91/65/81/simple10.png

• Pode ser outras imagens?:
  Caso deseje uma imagem diferente e não saiba como fazê-la poderá pedir-nos auxílio na área de Criações gráficas sendo que este tipo de trabalho está submetido à categoria de "outros"
  
  
• Resultado:
  
  

---

© Fórum dos Fóruns & Jalokim (Help Forumotion)

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Toolbar personalizada