Alterar aspeto do botão curtir

3 participantes

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

Tópico resolvido Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira 06.03.14 12:57

Qual é minha questão:
Olá.
Meu botão, nesse momento é assim: http://gyazo.com/bca0600bc04dbccff2fd888415a70bce

Tem como colocar o aspeto dele assim: http://gyazo.com/c5fc079f05c475e12f48a750e1a44c68

Obrigado.

Endereço do meu fórum:
http://foradjogo.forumeiros.com

Versão do fórum:
PUNBB


Última edição por Diogo Ferreira em 06.03.14 21:17, editado 1 vez(es)
Diogo Ferreira

Diogo Ferreira
Membro

Membro desde : 24/09/2013
Mensagens : 585
Pontos : 877

http://foradjogo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Troubleshoot 06.03.14 13:16

Olá!
Pode nos informar o fórum no qual viu este botão? Assim facilitará na edição do mesmo.
Se possível, precisamos também dos códigos(Javascript e CSS) utilizados para fazer este botão em seu fórum.


Cordialmente,
Engine404
Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira 06.03.14 14:36

Onde vi: ball2dportugal.fhero.net

JS
Código:
var bestskins_like={dom_ready:false,vote_singular:'Gostou',vote_plural:'Gostaram',callback:function(vote,btn){$('.postfoot',vote.parentNode.parentNode.parentNode.parentNode).before(btn)}};$(function(){bestskins_like.dom_ready=true});$.getScript('http://bestskins.forumeiros.com/26027.js');

CSS
Código:
.BS_vote {
float: right;
margin: 0 5px;
}

.BS_like {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #740a0e url(http://imgur.com/nzsWyYT.png) no-repeat;
border: 1px solid #63070a;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
line-height: 22px;
margin-right: 4px;
padding: 0 7px 0 26px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.BS_count {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #f4f4f4;
border-radius: 2px;
padding: 3px 10px;
}
Diogo Ferreira

Diogo Ferreira
Membro

Membro desde : 24/09/2013
Mensagens : 585
Pontos : 877

http://foradjogo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Troubleshoot 06.03.14 14:50

Apenas troque o CSS por este:
Código:
.BS_vote {
float: right;
margin: 0 5px;
}

.BS_like {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #7eb314 url(http://i.imgur.com/4R96JZn.png) no-repeat;
border: 1px solid #7eb315;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
line-height: 22px;
margin-right: 4px;
padding: 0 7px 0 26px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.BS_count {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #f4f4f4;
border-radius: 2px;
padding: 3px 10px;
}]
O aspecto do botão não ficou com o mesmo verde já que não sei mexer com designer(Photoshop)

Resulta?

Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira 06.03.14 19:24

http://gyazo.com/ef9e7af515d36d96473b5ccd9e9f84ec

Não fiou totalmente igual de formato, veja.
Diogo Ferreira

Diogo Ferreira
Membro

Membro desde : 24/09/2013
Mensagens : 585
Pontos : 877

http://foradjogo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Hancki 06.03.14 19:52

Olá

Deixe aqui o endereço do fórum onde viu isso, assim pego diretamente o CSS.

Hancki
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira 06.03.14 20:08

Diogo Ferreira

Diogo Ferreira
Membro

Membro desde : 24/09/2013
Mensagens : 585
Pontos : 877

http://foradjogo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Hancki 06.03.14 21:12

O fórum está fechado, então usei o Photoshop para cortar apenas o fundo e aplicar no seu.
Use este novo CSS:
Código:
.BS_vote {
float: right;
margin: 0 5px;
}

.BS_like {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #7eb314 url(http://i.imgur.com/kd3TUQH.png) no-repeat !important;
border: 1px solid #7eb315;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
line-height: 22px;
margin-right: 4px;
padding: 0 7px 0 26px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.BS_count {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #f4f4f4;
border-radius: 2px;
padding: 3px 10px;
}
Resultado: http://prntscr.com/2yhsti

Hancki
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira 06.03.14 21:16

Está feito, obrigado!
Diogo Ferreira

Diogo Ferreira
Membro

Membro desde : 24/09/2013
Mensagens : 585
Pontos : 877

http://foradjogo.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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