[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB)

As versões PunBB e phpBB2, permitem uma personalização total do fórum, pela modificação dos templates. Já que temos possibilidades quase infinitas de personalização, veremos como podemos colocar imagens a nosso gosto, nos botões de reputação (+ e -).

--> Tutoriais e astúcias <--
Botão de reputação na forma de imagens (PhpBB 2 e PunBB)

Para que possamos prosseguir com o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja: Modificar os templates do fórum

PunBB e phpBB2

1º - Acessar a template
Terá de acessar a gestão dos templates para efetuar as mudanças. Aceda à:
Painel de Controle -> Visualização -> Templates -> Geral -> viewtopic_body




2º - Modificar o código:
Para podermos fazer a mudança dos botões, temos, em primeiro lugar, que perceber o que se deve modificar. Para encontrar o código a ser modificado, clique nas teclas CTRL+F.


Voto positivo ( + )

Localize:

Código:

<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a>

Já encontrado, podemos começar a modificação. Iremos mudar o carácter + por uma imagem e para isso, devemos modificar da seguinte forma:
Substitua o código acima por este, que trocará o texto por uma imagem. Lembre-se de definir o endereço desta imagem no que está em vermelho!

<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="LINK DA SUA IMAGEM"></a>

O meu código, é este:

Código:

<img src="http://i81.servimg.com/u/f81/11/91/65/81/plus10.png">

Voto negativo ( - )

Localize:

Código:

<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a>

Já encontrado, podemos começar a modificação. Iremos mudar o carácter - por uma imagem e para isso, devemos modificar da seguinte forma:
Substitua o código acima por este, que trocará o texto por uma imagem. Lembre-se de definir o endereço desta imagem no que está em vermelho!

<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="LINK DA SUA IMAGEM"></a>

O meu código, é este:

Código:

<img src="http://i81.servimg.com/u/f81/11/91/65/81/minus10.png">

3º - Adicionar um código CSS para evitar possíveis problemas de posicionamento:
Chega ao fim a edição dos templates! Mas, de qualquer forma, ainda é necessário adicionarmos um código CSS que servirá para evitar que a imagem se desconfigure devido ao seu tamanho. Para que possamos fazer isso, você deverá aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


No editor que há, adicione o seguinte código:

.vote {
float: right;
width: 10px;
margin-left: 4px;
}

O valor em vermelho deverá ser modificado de acordo com a largura das imagens. Por exemplo, se as imagens possuem 10px de largura, onde está vermelho deverá colocar 10, se possuem 20, deverá colocar 20, assim em diante!



4º - Veja os resultados:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Botão de reputação na forma de imagens (PhpBB 2 e PunBB)