colocar imagem + e -

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Administrador
Navegador usado : Opera
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://mastergz.forumbrasil.net

Descrição do problema

Olá como por uma imagem aqui no + e -

http://prntscr.com/6mh3hr

eu tentei esse aqui em baixo , mas nao conseguir minha tela ficou com o fundo todo branco
https://ajuda.forumeiros.com/t56722-tutorial-alterar-os-sinais-de-reputacao

Olá,

Senhor queria chegar este faq por gentileza.
[FAQ] Gestão do sistema de reputação / botão obrigado


Até!

Olá, eu quero por essas imagens no lugar dos sinias la

https://i.imgur.com/RTp9RAI.png
https://i.imgur.com/TO9BBnl.png

http://prntscr.com/6mh3hr

@Vitor-Vicente por favor leia: https://ajuda.forumeiros.com/t81683-imagem-do-botao-reputacao-nao-aparece

Abs.

ola, nao conseguir aparecer o botao de + e - nao ficou assim, imagem abaixo

http://prntscr.com/6mlhpu

Olá, como não estou com a internet muito boa, volte a ler este tutorial: https://ajuda.forumeiros.com/t56722-tutorial-alterar-os-sinais-de-reputacao

Se não resultar veremos o que fazer.

Mas é o mesmo codigo

Vitor-Vicente escreveu:Mas é o mesmo codigo

Achei que não tinha visto o tutorial, mas, sobre o tutorial, colocou a URL da imagem nos locais indicados?. Minha internet está muito ruim. Caso não funcione o código, irei esperar minha internet melhorar para pode lhe ajudar melhor. ¬¬

Abs.

creio que fiz certo quer que eu passe o codigo aqui, pra ver se tem algo errado

Saudações!

O senhor fez tudo correto sim, o código só precisa de algumas modificações devido ao tamanho da imagem que é muito grande. Fiz as alterações e peço que procure por estes dois códigos no teu próprio código referente à isto e ao tutorial:

Código:

.vote .vote-button a[href*="plus"] {
background: url('http://i.imgur.com/RTp9RAI.png ');
background-repeat: no-repeat;
color: transparent;
display: block;
height: 21px;
width: 22px;
}

Código:

.vote .vote-button a[href*="minus"] {
background-image: url(http://i.imgur.com/TO9BBnl.png);
background-repeat: no-repeat;
color: transparent;
display: block;
height: 21px;
width: 22px;
}

Depois de encontra-los, substitua ambos os códigos por este:

Código:

.vote .vote-button a[href*="plus"] {
background-image: url('http://i.imgur.com/RTp9RAI.png');
background-repeat: no-repeat;
background-size: 100%;
margin-left: -3px !important;
position: relative;
color: transparent;
display: block;
height: 21px;
top: -5px;
width: 22px;
}
.vote .vote-button a[href*="minus"] {
background-image: url('http://i.imgur.com/TO9BBnl.png');
background-repeat: no-repeat;
background-size: 100%;
margin-left: -3px;
color: transparent;
display: block;
height: 21px;
width: 22px;
}

Até!

Ola teria como por aquela barra de separaçao , eles tao muitos juntos.

Procure por este código:

Código:

.vote {
-moz-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
padding: 4px 1px;
text-align: center;
width: 20px;
}

Substitua por este:

Código:

.vote {
-moz-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
padding: 4px 1px;
text-align: center;
width: 20px;
height: 50px !important;
}

Depois procure por este:

Código:

.vote .vote-button a[href*="plus"] {
background-image: url('http://i.imgur.com/RTp9RAI.png');
background-repeat: no-repeat;
background-size: 100%;
margin-left: -3px !important;
position: relative;
color: transparent;
display: block;
height: 21px;
top: -5px;
width: 22px;
}
.vote .vote-button a[href*="minus"] {
background-image: url('http://i.imgur.com/TO9BBnl.png');
background-repeat: no-repeat;
background-size: 100%;
margin-left: -3px;
color: transparent;
display: block;
height: 21px;
width: 22px;
}

E substitua por este:

Código:

.vote .vote-button a[href*="plus"] {
background-image: url(http://i.imgur.com/RTp9RAI.png);
background-repeat: no-repeat;
background-size: 100%;
color: transparent;
display: block;
height: 21px;
margin-left: -3px!important;
position: relative;
top: -5px;
width: 22px;
border-bottom: 2px solid rgb(152, 152, 152);
}
.vote .vote-button a[href*="minus"] {
background-image: url(http://i.imgur.com/TO9BBnl.png);
background-repeat: no-repeat;
background-size: 100%;
color: transparent;
display: block;
height: 21px;
margin-left: -3px;
width: 22px;
margin-top: 5px !important;
border-top: 2px solid rgb(152, 152, 152);
}

Isto foi o máximo que consegui, espero que lhe agrade!

Até!

Olá

o codigo que pediu pra eu procurara foi esse

.vote {
-moz-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
padding: 4px 1px;
text-align: center;
width: 20px;
}

eu encontrei esse ta parecido com algumas diferenças

.vote {
padding: 4px 1px 4px 1px;
text-align: center;
width:20px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}


fiz todas as substituiçoes

ou resultado foi esse aqui abaixo:

http://prntscr.com/6mp1od

é o mesmo resultado que vc conseguiu ou esta diferente?

Foi este mesmo!
Agrade-lhe amigo?

ta em risco do usuario clicar errado ainda.

Creio que não... quer que eu aumente mais o espaço entre eles?

Sim, se for possivel .

Substitua os códigos fornecidos anteriormente, por este:

Código:

.vote {
-moz-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
padding: 4px 1px;
text-align: center;
width: 20px;
height: 60px !important;
}
.vote .vote-button a[href*="plus"] {
background-image: url(http://i.imgur.com/RTp9RAI.png);
background-repeat: no-repeat;
background-size: 100%;
color: transparent;
display: block;
height: 21px;
margin-left: -3px!important;
position: relative;
top: -5px;
width: 22px;
border-bottom: 2px solid rgb(152, 152, 152);
}
.vote .vote-button a[href*="minus"] {
background-image: url(http://i.imgur.com/TO9BBnl.png);
background-repeat: no-repeat;
background-size: 100%;
color: transparent;
display: block;
height: 21px;
margin-left: -3px;
width: 22px;
margin-top: 15px !important;
border-top: 2px solid rgb(152, 152, 152);
}

Está incluso o ".vote {", ".vote .vote-button a[href*="plus"] {" e ".vote .vote-button a[href*="minus"] {".

Até!

vlw, ta joia , ficou bom