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

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

  • 0

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

Mensagem por Hancki em 02/04/10, 04:17 pm

   Edição de templates

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

(carregue na imagem para aumentar)



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


- 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

(clique na imagem para aumentar)

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!



- Veja os resultados:

(clique na imagem para aumentar)




© Fórum dos Fóruns


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

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

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