Dúvida sobre o tutorial de alterar os sinais de reputação

Item: Dúvida sobre o tutorial de alterar os sinais de reputação
Rating: 1

por Kill Kill 20.12.12 23:51

Qual é minha questão:
Olá, gostaria de tirar uma dúvida sobre esse tutorial: https://ajuda.forumeiros.com/t56722-tutorial-alterar-os-sinais-de-reputacao

Esse tutorial torna possível que modifiquemos os botões "+" e "-" do sistema de reputação, porém, o que eu gostaria era de modificar a barrinha verde e vermelha, será que isso seria possível? Queria mudar não só a imagem de + e -, mas também essas barrinhas: https://i.servimg.com/u/f20/16/50/02/64/sem_ta10.png

Não encontrei no tutorial como se faz isso, poderiam me ajudar? Desde já agradeço.

Endereço do meu fórum:
http://madhouseclans.top-talk.net

Versão do fórum:
PHPBB3

por Consolado 21.12.12 2:01

Olá!

Deverá ir até a seção de criações gráficas e pedir novos tipos de botões para esta função, pois dificilmente vai encontrar botões para a mesma.

Melhores cumprimentos.

por Kill Kill 21.12.12 2:02

Mas eu gostaria de criá-los, não é possível?

por Consolado 21.12.12 2:14

Olá!

Possível é, mais, somente utilizando editores de imagens ou pedindo na seção gráfica do Fórum dos Fóruns.

Melhores cumprimentos.

por Kill Kill 21.12.12 2:43

Mas eu sei usar. Gostaria apenas de saber como faço para fazer a modificação no código para que possa ser possível alterar a barrinha que mencionei.

por Sennior 21.12.12 20:44

Olá meu querido! Eu amo você

Por favor queira estar lendo o seguinte tutorial, ele modifica junto o que o senhor deseja:

Spoiler:

TUTORIAL - Dúvida sobre o tutorial de alterar os sinais de reputação Gestion_points

Personalizar os sinais de reputação

Vários membros já fizeram questões acerca da mudança de aparência do " + " e " - " de reputação nos tópicos. Sendo assim foi elaborado este tutorial de forma a esclarecer mais rapidamente os nossos membros. Assim sendo iremos aprender como personalizar os sinais negativo e positivo da reputação.

--> Tutoriais dicas, e astúcias <--
Alterar os sinais de Reputação

Conhecimentos gerais
Antes de personalizarmos temos que ter um grau de conhecimento sobre o assunto. Por isso é aconselhável que tenha conhecimento neste tópico: [FAQ] Gestão do sistema de reputação / botão obrigado.

1º - Ativação e noções básicas:
Para termos uma noção básica o CSS permite que o membro edite o tema do fórum conforme ele deseja. Frequentemente os usuários estão sempre com dúvidas, questionando como modificar o botão de reputação, mas para modificarmos como dito acima usaremos um código em CSS e assim estaremos chegando ao ponto principal do Tutorial.
Painel de controle ->> Módulos ->> Pontos e Reputação ->> Reputação ->>

(carregue na imagem para aumentar)
TUTORIAL - Dúvida sobre o tutorial de alterar os sinais de reputação Ativar10

TUTORIAL - Dúvida sobre o tutorial de alterar os sinais de reputação 110111

Ativar o sistema de reputação - Para activar o sistema, terá de marcar "Sim", para efeito contrário "Não". A activação é necessária para que sejam contabilizados os pontos de reputação.

Com a função Reputação ativa, pode-se notar que você não conseguirá ver os símbolos " + " e " - ", sendo impossível votar em si próprio.

2º - Estrutura do código e como adicionar ao fórum:
Não há muito o que comentar, o código é extenso mais valerá a pena. Aceda em:

Painel de controle ->> Visualização ->> Imagens e cores ->> Cores ->> (Aba) Folha de estilo CSS ->>

(carregue na imagem para aumentar)
TUTORIAL - Dúvida sobre o tutorial de alterar os sinais de reputação Cadigo10

Antes de adicioná-lo na foolha de estilos, preste atenção na parte destacada em verde;

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

.vote .vote-no-bar {
display: none;
}

.vote .vote-bar {
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d4d6d5;
font-size: 0px;
height: 50px;
margin: 0px;
width: 20px;
padding: 3px 0px 3px 0px;
}

.vote .vote-bar-plus {
margin-left: 7px;
width: 6px;
}

.vote .vote-bar-minus {
margin-left: 7px;
width: 6px;
}

.vote .vote-button a[href $="plus"] {
background:url('URL_DA_IMAGEM');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href $="minus"] {
background-image:url('URL_DA_IMAGEM');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

Os campos em "verde" refere-se às URLs das imagens. Caso queira modificá-la você estará disposto.

--> Tutoriais dicas, e astúcias <--
Alterar os sinais de Reputação

Não gostei das imagens padrões do código, onde posso encontrar mais?
Deverá ir até a seção de criações gráficas e pedir novos tipos de botões para esta função, pois dificilmente vai encontrar botões para a mesma.