Colorir o Background de campos específicos de acordo com o grupo do membro

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

Atendido / Resolvido Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 23.02.18 16:42

Detalhes da questão


Endereço do fórum: http://logpose.forumeiros.com
Versão do fórum: phpBB3

Descrição


Olá,

Com o intuito de gerar certa personalização em meu Fórum, estou a tentar utilizar algum JS para que o mesmo altere determinados campos relacionados ao usuário, de acordo com a cor do nickname do mesmo, ou seja, seu grupo.

Os códigos que estou tentando utilizar é esse:

Código:
$(function () {
  ////////////////////////////////
  var colorDefaultNick = '#050503';
  ////////////////////////////////
  $('.postprofile .preguicadeveronome').each(function () {
    var $nick = $(this).find('.nick-user a span[style*="color:#"]:first');
    if($nick) {
      $(this).css('background', $nick.css('color'));
      $nick.css('color', colorDefaultNick);
    }
  });
});

O mesmo faz com que a cor do fundo do perfil do membro, esta que por sua vez possui a cor #050503 se altere para a cor do nick do mesmo. No entanto, apenas a cor da variável .preguicadeveronome recebe o efeito, e gostaria que os demais campos que eu adicionasse posteriormente também sofressem essa alteração de forma individual. Além disto, gostaria de um pouco de instrução sobre como eu poderia adequar este código para outros setores do RPG, pois, por exemplo, ao tentar fazer com que cada linha da memberlist tenha o fundo de acordo com o nick, não há efeito algum, independente de como eu reescreva este mesmo código.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Hancki em 23.02.18 23:21

Olá!

Eu fiz aqui um código aleatório, mas que está perto do que quer. Eu deixei-o com várias explicações para que você o possa ler, interpretar, mudar e repensar no que quer fazer.
Se o colocar agora numa página Javascript, o seu perfil nos tópicos vai ficar uma bagunça, mas de propósito, para que consiga perceber as possibilidades e também o que pode mudar ou não. O código é este:
Código:
$(function() {

    // Função louca para que os valores retornados pelos navegadores se convertam de valores RGB para valores HEXADECIMAIS, para ser tipo #329392 em vez de rgb(0,0,0)
    function converterRGBparaHEX(nickusuario) {
        var cor = nickusuario.css('color')
        var hex;
        if (cor.indexOf('#') > -1) {
            hex = cor;
        } else {
            var rgb = cor.match(/\d+/g);
            hex = '#' + ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
        }
        return hex;
    }
    // De volta à normalidade

    var corNick1 = '#011b3b'; // Aqui pode definir a cor do grupos de Administradores
    var corNick2 = '#9E2020'; // Aqui pode definir a cor do grupos de Criadores de Deck's
    var corNick3 = '#050503'; // Aqui pode definir a cor do grupos de Organizadores
    var corNick4 = '#050503'; // Aqui pode definir a cor do grupos de MoçosBonitosComoOHancki
    var corNick5 = '#050503'; // Daqui para a frente, pode criar novas variáveis com números seguidos, lembrando sempre que na função IF 7 linhas abaixo, tem que ir adicionando as condicionantes para os novos números

    $('.postprofile .nomeplayer a[href*="/u"] span[style*="color:#"]').each(function() {
        var nick = $(this);
        var cornick = nick.css('color');
        var elementosmaisperto = nick.parents('.postprofile').find('.preguicadeveronome, .blocosperfil'); // Este elemento é o a classe ".postprofile" mais perto da classe do nick. Pode colocar tipo ".post" e isso mudará o fundo do ".post" mais próximo desse nickname. Isto basicamente é o que você quer mudar as cores e assim. Pode usar vírgulas para definir várias classes ao mesmo tempo DENTRO do elemento ".postprofile".
        console.log(converterRGBparaHEX(nick));

        // Agora abaixo pode configurar o CSS em jQuery para o que quer que fique diferente ou colocar exatamente do estilo que deseja usando apenas CSS. Ou se for mais criativo, outra coisa qualquer.
        if (cornick = corNick1) { // Admins
            elementosmaisperto.css('background-color', 'blue').css('color', 'red');
            nick.css('text-shadow', '0px 2px 13px rgba(255, 0, 255, 1)');
        } else if (cornick = corNick2) { // Criadores
            elementosmaisperto.css('background-color', 'silver');
        } else if (cornick = corNick3) { // Organizadores
            elementosmaisperto.css('background-color', 'red');
        } else if (cornick = corNick4) { // ETC
            elementosmaisperto.css('background-color', 'green');
        } else if (cornick = corNick5) { // ETC
            elementosmaisperto.css('background-color', 'grey');
        }
    });
});

Explore, pense.. e caso tenha dúvidas ou até queira adicionar mais coisas, é só dizer.

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

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

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 24.02.18 3:23

Olá Hancki, apliquei o codigo m questão mas não houve efeito algum nos campos do perfil.

E não entendi muito bem como funciona esse trecho do CSS.

Código:
if (cornick = corNick1) { // Admins
            elementosmaisperto.css('background-color', 'blue').css('color', 'red');
            nick.css('text-shadow', '0px 2px 13px rgba(255, 0, 255, 1)');

Eu entendi as condicionantes, porém não entendi as funções que a mesma aplica. O que altera o que, por qual motivo?
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por virus em 25.02.18 2:52

zen O que acha de mudar a cor de fundo de acordo com o rank do usuário?
virus

virus
Usuário destaque

Masculino
Inscrito dia : 03/03/2013
Mensagens : 697
Pontos Ativos : 909

Ver perfil do usuário

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 25.02.18 5:24

Não sei, eu gostaria de aplicar o efeito a outras áreas como a lista de membros, onde o fundo de cada membro teria a cor do grupo, e acho que pelo Rank seria impossivel identificar isso, não?
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Pedxz em 25.02.18 10:30

Olá,
Se você ativar a barra de ferramentas, dá para ocultar com CSS, mas o importante é com a barra de ferramentas novas variáveis vão aparecer elas são as langs, por exemplo o rank:
Código:
_lang["rank_title"] = "<span style=\"color:red\">New</span> Member";
Sendo assim possível fazer um script if rank_title == x adiciona o background-color y.


Agradeço uma resposta,
obrigado

Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2805
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 25.02.18 15:44

Hm, então eu aceito a proposta de utilizar os ranks sim :3
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 26.02.18 15:16

upzinho
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 27.02.18 16:03

upzinho
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 28.02.18 14:19

Someone? ;-;
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Chanp em 01.03.18 20:43

Olá,
Irei tentar dar progresso ao seu caso.

Peço que me informe o ID do rank, o nome dele e a cor que o senhor deseja escolher como representativa do rank. Isso serve pra todos os ranks que o senhor desejar fazer o que solicitou na primeira mensagem.

o/
Chanp

Chanp
Nível 9

Masculino
Inscrito dia : 04/01/2018
Mensagens : 195
Pontos Ativos : 228

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

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 01.03.18 21:51

Código:
<span class="seidouzan">Seidouzan</span> = #E05A5A, id 1
<span class="hakuren">Hakuren High</span> = #429CF5, id 2
<span class="kidokawa">Kidokawa Seishuu</span> = #E34C32, id 3
<span class="teikoku">Teikoku Gakuen</span> = #02AB48, id 4
<span class="raimon">Raimon High</span> = #F0BD3C, id 5
<span class="seishou">Seishou Gakuen</div> = #744AFF, id 6
webmaster = #4781A1, id 7
Sem matrícula = #A8A8A8, id 9


Não sei se deveria enviar com a tag html junto, mas por via das duvidas...
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 03.03.18 11:52

Relembrando.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 04.03.18 15:28

go go power uppp
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 04.03.18 18:22

Olá,

Qual parte do perfil você deseja colorir com a cor do usuário?
-> http://prntscr.com/imrjac

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 05.03.18 0:42

Eita, este fórum da print não é meu sksksksk acabei esquecendo de trocar o link, pois recentemente passei o domínio do mesmo a outro usuário tendo em vista que eu não iria desenvolvê-lo de fato.

Pois bem, os campos que eu estaria aplicando o efeito seriam divs que eu criaria para customizar o perfil como um todo, as mesmas ainda não possuem nomes, além disso como citado acima aplicaria tambem o efeito em regiões mais diversas como o próprio fundo da memberlist, fazendo com que cada linha correspondesse a cor do grupo do usuário. Por isso pedi um código mais genérico para que eu pudesse simplesmente ir alterando-o a meu gosto.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 05.03.18 17:17

@zHugh escreveu:Eita, este fórum da print não é meu sksksksk acabei esquecendo de trocar o link, pois recentemente passei o domínio do mesmo a outro usuário tendo em vista que eu não iria desenvolvê-lo de fato.

Pois bem, os campos que eu estaria aplicando o efeito seriam divs que eu criaria para customizar o perfil como um todo, as mesmas ainda não possuem nomes, além disso como citado acima aplicaria tambem o efeito em regiões mais diversas como o próprio fundo da memberlist, fazendo com que cada linha correspondesse a cor do grupo do usuário. Por isso pedi um código mais genérico para que eu pudesse simplesmente ir alterando-o a meu gosto.

Qual a URL de seu fórum?
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 05.03.18 20:19

http://logpose1.forumeiros.com/t286-teste#2375

No caso eu gostaria de colorir o fundo de campos como:

.preguicadeveronome

.nomeplayer

.rankdousuario

e demais divs que futuramente eu iria acrescentando no fórum.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 05.03.18 20:37

Seria isso? ._.

Colorir o Background de campos específicos de acordo com o grupo do membro 9NoZKs6

Ou você quer definir a cor para cada grupo?
Aguardo uma resposta.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 05.03.18 23:22

Sim, é exatamente o que eu quero, no entanto como o Pedxz havia me proposto fazer isso a partir do Rank, eu acabei alterando a ordem das coisas em meu fórum @-@. No caso, os grupos viraram os ranks e vice versa, e o efeito deixa de ter o sentido desejado se for baseado nos novos grupos :<

Poderia fazer que fosse baseando-se no rank? Caso seja necessário inserir manualmente todos os ranks, me fale qual as linhas que eu preciso inserir no codigo para cada rank. Por hora use apenas o rank de modelo mesmo.

Código do rank de exemplo
Código:
<div class="novato">Novato</div>
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 06.03.18 12:35

Qual seria a diferença entre definir pela própria cor do nome do usuário? Acho mais prático, não?
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 06.03.18 14:52

Pois os Ranks e os grupos terão cores distintas, e o que será mais considerado dentro da área dos posts (tratando-se do RPG) serão os RANKS.

Mas pensando bem eu posso adaptar isso, pode fazer baseado no que achar melhor e mais eficiente, grupo ou rank.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 06.03.18 14:56

Acho que podemos fazer algo mais eficiente. Confesso que nunca gostei de trabalhar com ranks.
Com base na cor do grupo, você pode definir uma outra cor (talvez um pouco mais clara) para os membros daquele grupo.

O que acha?
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 06.03.18 15:43

Não pretendo alterar a cor pois o tema trabalharia com um certo padrão em sua paleta. Esta que é baseada diretamente na cor dos grupos, sendo assim pode fazer com a cor dos grupos mesmo, assim como havia mostrado na print que me enviou.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 06.03.18 20:15

Cá está:
Código:
(function($) {
  'use strict';

  var selectors = [
    '.preguicadeveronome',
    '.rankdousuario',
    '.nomeplayer'
  ];

  $(function() {
    $('.post').each(function() {
      var $post = $(this);
      var $user = $post.find('.nomeplayer > a[href] > span[style]');

      $post.find(selectors.join(',')).css('background-color', $user.css('color'));
    });
  });
})(jQuery);

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 06.03.18 20:49

Olá, não resultou.

:<

E uma duvida, como eu faria para alterar o codigo de modo que ele funcionasse em outras coisas, não apenas no background. Por exemplo, se eu quisesse colorir a borda de uma div.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 06.03.18 22:01

Aparentemente algumas classes foram alteradas desde o último código elaborado. :v
Troque-o por:
Código:
(function($) {
  'use strict';

  var selectors = [
    '.preguicadeveronome',
    '.rankdousuario',
    '.nomeplayer'
  ];

  $(function() {
    $('.post1').each(function() {
      var $post = $(this);
      var $user = $post.find('.nick-user > a[href] > span[style]');

      $post.find(selectors.join(',')).css('background-color', $user.css('color'));
    });
  });
})(jQuery);

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por zHugh em 06.03.18 23:12

Sim, mas uai... Eu tinha arrumado no JS tambem o.O

Devo ser uma falha humana e as coisas simplesmente não funcionam comigo :B

Agora funfou bem, e bem demais Luiz o/

Thank you very much.

para adicionar mais efeitos basta que eu insira mais linhas de

Código:
      $post.find(selectors.join(',')).css('background-color', $user.css('color'));

e altere o que eu quero mudar né? tipo... ao invés de background-color, colocar border-color para aplicar nas bordas.
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Colorir o Background de campos específicos de acordo com o grupo do membro

Mensagem por Luiz em 06.03.18 23:35

Basicamente isso. Feliz

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum