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

Ir para baixo

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

Mensagem por Hancki 02.04.10 20:17

[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) Templates   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)





[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) WarningPara 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
[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) Logo 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)
[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) 111



- 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)
[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) 1114

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)
[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) Img11




© Fórum dos Fóruns


[TUTORIAL] Botão de reputação na forma de imagens (PhpBB 2 e PunBB) Act_bottom 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)
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos