Reputação mais profissional

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

Resolvido Reputação mais profissional

Mensagem por Jpjupa em 14/09/11, 01:06 pm

Qual é minha questão:
Já vi em alguns fóruns, o +/- da mensagem diferente.
Poderiam me ajudar?

Medidas que eu tomei para corrigir o problema:
Nenhum

Imagens do meu problema:
Nenhum

Endereço do meu fórum:
http://rbforum.forumbrasil.net/forum

Versão do meu fórum:
PHPBB3
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Reputação mais profissional

Mensagem por Cream em 14/09/11, 01:08 pm

Olá,

Veja se o seguinte tutorial lhe ajuda:
Spoiler:

Reputação profissional


Com este tutorial iremos aprender a personalizar a reputação de uma maneira bastante "radical". Iremos deixar a maneira actual dos Fóruns Forumeiros e colocar um "ar mais profissional" neste recurso. Esta personalização irá mudar completamente a reputação dos fóruns, para uma maneira mais "em conta".


--> Tutoriais dicas, e astúcias <--
Reputação profissional




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.


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

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


- Estrutura do código CSS e como adicionar ao fórum:
Não há muito o que comentar, o código CSS é 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)

Antes de adiciona-lo na folha de estilos, preste atenção a parte destacada a verde;
.vote {
float: right;
margin-left: 4px;
width: 9px;
}
.vote .vote-button {
font-weight: 700;
margin-left: -1px;
text-align: center;
}
.vote .vote-button a {
text-decoration: none !important;
}
.vote .vote-bar {
border: 1px solid #666666;
font-size: 0;
height: 50px;
margin: 0 auto;
width: 3px;
}
.vote .vote-no-bar {
letter-spacing: -2px;
margin-left: -2px;
white-space: nowrap;
}
.vote .vote-bar-plus {
background-color: #00FF00;
}
.vote .vote-bar-minus {
background-color: red;
}


.vote-count {
background: url("sd-1.archive-host.com/membres/images/142586199450897653/FDF/button_count.png") no-repeat scroll 0 0 transparent;
color: #4AAE00;
font-size: 10px;
font-weight: 700;
height: 17px;
padding-top: 2px;
text-align: center;
width: 27px;
}
O campo a verde com o link " http://sd-1.archive-host.com/membres/images/142586199450897653/FDF/button_count.png " refere-se às URLs das imagens. Caso queira modifica-la você estará disposto. A alteração desta imagem não irá ter nada haver com as imagens de "Dar voto" e as imagens de "Voto dado". Esta imagem simplesmente é a "base" da reputação...


- Estrutura do código JavaScript e como adicionar ao fórum:
Não há muito o que comentar, o código .JS é extenso mais valerá a pena para fazer este magnifico efeito que todos irão gostar, mas para tal aceda em:

Painel de controle ->> Módulos ->> HTML & JAVASCRIPT->> Cores ->> (Aba) Gestão dos códigos JavaScript ->>

Título Flecha ajudeiros O que desejar
Investimento Flecha ajudeiros Em todas as páginas

Código:
function discat(cat){$('#menu > div').slideUp(500);$('#subcat'+cat).slideDown(900)}$(function(){$("dd.dterm[style*='489903.gif']").closest("dl.icon").addClass("t-uniq");$("#profile_field_2_-20").focus(function(){$(this).val(($(this).val()?$(this).val()+"\n":"")+new Date().getDate()+"/"+(new Date().getMonth()+1)+"/"+(new Date().getFullYear()-2000)+" ([b]"+$("#i_icon_mini_logout").attr("alt").replace(/^.*?\[ (.*) \]$/,"$1")+"[/b])"+" : ").unbind("focus")})});$(function(){$(".vote").each(function(){$(this).find(".vote-button:first a").html('<img src="http://sd-1.archive-host.com/membres/images/142586199450897653/FDF/buttonok.png" alt="Voter" title="Voter pour ce message" />').click(function(){$.get($(this).attr("href"));$(this).parent().html('<img src="http://sd-1.archive-host.com/membres/images/142586199450897653/FDF/buttonok_off.png" alt="Vote enregistré" title="Vote enregistré" />');return!1});$(this).closest(".postbody").find("ul.profile-icons").append("<li />").find("li:last").append($(this).find(".vote-button:first a")).append($(this).find(".vote-bar").length?' <div class="vote-count" title="Nombre d\'évaluations positives">'+$(this).find(".vote-bar").attr("title").replace(/^.*\(([0-9]*) .*?\)$/,"$1"):"")+'</div>';$(this).remove()});if($("code").filter(function(){var a=$(this).text().indexOf("["),b=$(this).text().indexOf("]"),c=$(this).text().indexOf("[/"),d=$(this).text().indexOf("<"),e=$(this).text().indexOf('"'),f=$(this).text().indexOf("'"),g=$(this).text().indexOf("/");return a==-1||b==-1||c==-1||a>b||b>c||d!=-1&&d<a||e!=-1&&e<a||f!=-1&&f<a||g!=-1&&g<a}).each(function(){$(this).wrapInner('<pre class="prettyprint'+($(this).text().indexOf("<")==-1&&/[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text())?" lang-css":"")+' linenums" />')}).length){var s=document.createElement("script");s.type="text/javascript";s.async=!0;s.src="http://forum.forumactif.com/12076.js";document.getElementsByTagName("head")[0].appendChild(s)}});


--> Tutoriais dicas, e astúcias <--
Reputação profissional



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


  • Posso modificar as imagens de "Votar" e as de "Voto dado"?
    Sim claro! Para fazer estas alterações relactivamente as imagens, terá de modificar o código JavaScript que lhe foi citado a cima deste tutorial. Para fazer esta alteração somente deve ter a atenção nos campos a vermelho e a verde assinalados no código .JS abaixo:

    function discat(cat){$('#menu > div').slideUp(500);$('#subcat'+cat).slideDown(900)}$(function(){$("dd.dterm[style*='489903.gif']").closest("dl.icon").addClass("t-uniq");$("#profile_field_2_-20").focus(function(){$(this).val(($(this).val()?$(this).val()+"\n":"")+new Date().getDate()+"/"+(new Date().getMonth()+1)+"/"+(new Date().getFullYear()-2000)+" ("+$("#i_icon_mini_logout").attr("alt").replace(/^.*?\[ (.*) \]$/,"$1")+")"+" : ").unbind("focus")})});$(function(){$(".vote").each(function(){$(this).find(".vote-button:first a").html('<img src="Link da imagem para votar" alt="Voter" title="Voter pour ce message" />').click(function(){$.get($(this).attr("href"));$(this).parent().html('<img src="link da imagem com o voto dado" alt="Vote enregistré" title="Vote enregistré" />');return!1});$(this).closest(".postbody").find("ul.profile-icons").append("<li />").find("li:last").append($(this).find(".vote-button:first a")).append($(this).find(".vote-bar").length?' <div class="vote-count" title="Nombre d\'évaluations positives">'+$(this).find(".vote-bar").attr("title").replace(/^.*\(([0-9]*) .*?\)$/,"$1"):"")+'</div>';$(this).remove()});if($("code").filter(function(){var a=$(this).text().indexOf("["),b=$(this).text().indexOf("]"),c=$(this).text().indexOf("[/"),d=$(this).text().indexOf("<"),e=$(this).text().indexOf('"'),f=$(this).text().indexOf("'"),g=$(this).text().indexOf("/");return a==-1||b==-1||c==-1||a>b||b>c||d!=-1&&d<a||e!=-1&&e<a||f!=-1&&f<a||g!=-1&&g<a}).each(function(){$(this).wrapInner('<pre class="prettyprint'+($(this).text().indexOf("<")==-1&&/[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text())?" lang-css":"")+' linenums" />')}).length){var s=document.createElement("script");s.type="text/javascript";s.async=!0;s.src="http://forum.forumactif.com/12076.js";document.getElementsByTagName("head")[0].appendChild(s)}});


  • Têm algum resultado final?
    Sim! Se fez o tutorial todo direitinho o resultado final deve ficar igual ou parecido com este:
    -





© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Reputação profissional

Até mais.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Reputação mais profissional

Mensagem por Jpjupa em 14/09/11, 01:20 pm

Poderia me passar o código usado no http://www.prpixel.com ?
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Reputação mais profissional

Mensagem por Cream em 14/09/11, 01:29 pm

Olá,

O código usado neste fórum é o seguinte:
Spoiler:
.vote {
background-color: #FFFFFF;
border: 1px solid #D4D6D5;
border-radius: 5px 5px 5px 5px;
padding: 4px 1px;
text-align: center;
width: 20px;
}

.vote .vote-button a[href$="plus"] {
-moz-background-inline-policy: continuous;
background: url("http://i47.servimg.com/u/f47/13/27/41/49/tick_c10.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 19px;
width: 22px;
}

.vote .vote-button a[href$="plus"] {
-moz-background-inline-policy: continuous;
background: url("http://i47.servimg.com/u/f47/13/27/41/49/tick_c10.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 19px;
width: 22px;
}

Adicione na folha de estilo CSS.
Até mais.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Reputação mais profissional

Mensagem por Jpjupa em 14/09/11, 01:30 pm

O ícone de - não funcionou.
Aguardo.

E teria como colocar ele um tiquinho mais para esquerda? por causa dos traços do perfil.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Reputação mais profissional

Mensagem por Cream em 14/09/11, 01:40 pm

Olá,

Troque o código anterior por este:
Spoiler:
.vote {
background-color: #FFFFFF;
border: 1px solid #D4D6D5;
border-radius: 5px 5px 5px 5px;
padding: 4px 1px;
text-align: center;
width: 20px;
}

.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('http://i47.servimg.com/u/f47/13/27/41/49/tick_c10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href $="minus"] {
background-image:url('http://i47.servimg.com/u/f47/13/27/41/49/minus_10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

Até mais.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

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

Resolvido Re: Reputação mais profissional

Mensagem por Jpjupa em 14/09/11, 01:41 pm

Poderia colocar um pouco mais para esquerda?
E agora está sem o separador, está apenas as imagens sem o traço separador.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Reputação mais profissional

Mensagem por Cream em 14/09/11, 01:54 pm

Olá,

Troque o código anterior por este:
Spoiler:
.vote {
background-color: #FFFFFF;
border: 1px solid #D4D6D5;
border-radius: 5px 5px 5px 5px;
padding: 4px 1px;
text-align: center;
width: 20px;
}

.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: 25px;
width: 6px;
}

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

.vote .vote-button a[href $="plus"] {
background:url('http://i47.servimg.com/u/f47/13/27/41/49/tick_c10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href $="minus"] {
background-image:url('http://i47.servimg.com/u/f47/13/27/41/49/minus_10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

Logo após, adicione este outro código CSS:
.vote {
margin-right: 25px;
}
Vermelho ->> Modifique para o valor da margem.

Até mais.
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.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