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
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
(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 |
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)
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:
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 |
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:
Laranja: Aqui deverá colocar o link da imagem que deseja colocar como toolbar.
#myfooter{
background-image: url(URL DA IMAGEM DA TOOLBAR);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}
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
Expandir esta imagem Ver em tamanho real
Comece por clicar em (modificar) e entrará na parte de edição desse mesmo template.