Alterar aspeto do botão curtir

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

Resolvido Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira em 06/03/14, 09:57 am

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, 06:17 pm, editado 1 vez(es)
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Troubleshoot em 06/03/14, 10:16 am

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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2192
Pontos Ativos : 2931

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira em 06/03/14, 11:36 am

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;
}
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Troubleshoot em 06/03/14, 11:50 am

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?

avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2192
Pontos Ativos : 2931

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira em 06/03/14, 04:24 pm

http://gyazo.com/ef9e7af515d36d96473b5ccd9e9f84ec

Não fiou totalmente igual de formato, veja.
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Hancki em 06/03/14, 04:52 pm

Olá

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

Hancki
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

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira em 06/03/14, 05:08 pm

avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Hancki em 06/03/14, 06:12 pm

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

Resolvido Re: Alterar aspeto do botão curtir

Mensagem por Diogo Ferreira em 06/03/14, 06:16 pm

Está feito, obrigado!
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

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