[TUTORIAL] Toolbar personalizada

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

  • 0

[TUTORIAL] Toolbar personalizada

Mensagem por Luciano98 em 02/04/12, 11:57 pm

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



- 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

(clique na imagem para aumentar)

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
- 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.

(carregue na imagem para aumentar)
Seta 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.
Seta 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
- 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

(clique na imagem para aumentar)

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 Seta Visualização Seta Templates Seta Geral :seta2: overall_footer

Comece por clicar em (modificar) e entrará na parte de edição desse mesmo template.
Seta </body>
</html>
Deverá procurar esta parte do template. Encontra-se mesmo no fundo de tudo, ou seja, basta mover completamente o scroll para baixo.
Seta 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.

- Informações e ajudas suplementares

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


  • 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
avatar

Luciano98
Ex-Admineiro
Ex-Admineiro

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


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum