Modificar cor de fundo das mensagens de um usuário grupo específico

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

Atendido / Resolvido Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Bruno Franks em 27.01.18 13:09

Detalhes da questão


Endereço do fórum: http://ams7.forumeiros.com/
Versão do fórum: phpBB2

Descrição


Olá, tudo bem? Espero que sim Feliz
Bom, estava dando uma olhada nos tutoriais aqui do fórum e me deparei com esse: Tutorial - Modificar cor de fundo das mensagens de um usuário específico.
Gostaria de saber como aplicar o mesmo efeito porém ao invés de ser para "usuários específicos" fosse para um grupo específico. Assim, eu poderia definir uma cor para cada grupo (administradores, narradores, etc.) e as mensagens do usuário daquele grupo teriam um fundo diferente destacando-as.
Um detalhe importante que imagino ser necessário observá-lo: no caso de um mesmo usuário participar de dois grupos, o grupo que tiver mais prioridade (na ordem da lista dos grupos em Painel de Controle → Usuários e Grupos → Administração dos Grupos) definiria a cor do fundo das mensagens.
Desde já, agradeço!
P.S.: Postei o tópico aqui porque ainda que trate de uma questão de "Aparência" o código no tutorial citado trata de JavaScript. Qualquer coisa, me perdoem a negligência.  Feliz
Bruno Franks

Bruno Franks
Nível 9

Masculino
Inscrito dia : 20/06/2012
Mensagens : 153
Pontos Ativos : 201

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

Atendido / Resolvido Re: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Luiz em 27.01.18 13:12

Howdy,

Precisarei que o senhor libere a visualização de pelo menos um tópico para os convidados (para que eu possa fazer testes).
Estaremos no aguardo para prosseguir com a sua questão.

P.S.: Postei o tópico aqui porque ainda que trate de uma questão de "Aparência" o código no tutorial citado trata de JavaScript. Qualquer coisa, me perdoem a negligência.
E... Você acertou a sessão. Muito feliz

Não se esqueça de votar nos seus candidatos favoritos!


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: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Bruno Franks em 27.01.18 13:25

Aloha!
Aqui está. Liberei os tópicos dessa seção: http://ams7.forumeiros.com/f12-chales
Confere?
Bruno Franks

Bruno Franks
Nível 9

Masculino
Inscrito dia : 20/06/2012
Mensagens : 153
Pontos Ativos : 201

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

Atendido / Resolvido Re: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Luiz em 27.01.18 13:27

Olá novamente,

O senhor deseja um resultado como este?

Modificar cor de fundo das mensagens de um usuário grupo específico RHQ1qr8

Estarei aguardando sua resposta para prosseguir. o/

Não se esqueça de votar nos seus candidatos favoritos!
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: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Bruno Franks em 27.01.18 15:00

Olá!
Sim... esse resultado, entretanto, gostaria que o efeito também fosse aplicado nas duas células abaixo: a célula da esquerda abaixo do avatar (td.row1.browse-arrows) e a célula da direita abaixo da mensagem com as opções de contato do usuário (td.row1.messaging.gensmall).
Haveria como?


Última edição por Bruno Franks em 27.01.18 15:16, editado 1 vez(es) (Razão : Aparentemente eu não sei a diferença entre esquerda e direita. Havia confundido as posições das células citadas, mas agora está certo. Obrigado!)
Bruno Franks

Bruno Franks
Nível 9

Masculino
Inscrito dia : 20/06/2012
Mensagens : 153
Pontos Ativos : 201

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

Atendido / Resolvido Re: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Luiz em 27.01.18 16:13

Olá novamente,

Crie um JavaScript investido nos tópicos contendo:
Código:
/**globals jQuery*/

/**
 * Post background as group color.
 * Paint the background of the post with the specified color.
 *
 * @author  Luiz Felipe F.
 * @see    {@link https://lffg.github.io}
 */

(function ($) {
  'use strict';

  var config = [
    { color: '#F0E078', background: 'red' }
  ];

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

      if (!$user.length) return;
      if (!$user.css('color')) return;

      $.each(config, function () {
        var self = this;

        var $dummy = $('<span>').css('color', self.color);

        if ($dummy.css('color') !== $user.css('color')) return;

        $this
          .children('td')
            .css('background-color', self.background)
          .end()
            .next('tr')
              .children('td')
                .css('background-color', self.background)
        ;
      });
    });
  });
})(jQuery);

Nessa parte (do script acima):
Código:
var config = [
  { color: '#F0E078', background: 'red' }
];

É a configuração. Para configurar mais, basta adicionar uma vírgula após o último elemento, por exemplo:
Código:
var config = [
  { color: '#F0E078', background: 'red' },
  { color: 'COR DO GRUPO 2', background: 'FUNDO PARA MEMBROS DO GRUPO 2' },
  { color: 'COR DO GRUPO 3', background: 'FUNDO PARA MEMBROS DO GRUPO 3' }
];

Lembre-se de não colocar vírgula após o último elemento!

Qualquer dúvida, só falar. Piscada

Não se esqueça de votar nos seus candidatos favoritos!


o/


Última edição por Luiz em 27.01.18 18:35, editado 1 vez(es)
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: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Bruno Franks em 27.01.18 18:21

Ótimo! O efeito foi aplicado corretamente! Muitíssimo obrigado!
Só uma observação para quem for ler este tópico depois procurando o mesmo resultado:

Para alterar a cor do fundo das mensagens, devo alterar o valor aqui:
Código:
var config = [
  { color: 'COR DO GRUPO', background: 'COR DESEJADA PARA O FUNDO' }
];

E aqui:
Código:
$this
          .children('td')
            .css('background-color', 'COR DESEJADA PARA O FUNDO')
          .end()
            .next('tr')
              .children('td')
                .css('background-color', 'COR DESEJADA PARA O FUNDO')
        ;
Certo?



Agora, caso eu queira alterar a cor do fundo das mensagens de outros grupos, além de adicionar o seguinte código:
Código:
var config = [
  { color: '#F0E078', background: 'red' },[/size]
  { color: 'COR DO GRUPO 2', background: 'FUNDO PARA MEMBROS DO GRUPO 2' },
  { color: 'COR DO GRUPO 3', background: 'FUNDO PARA MEMBROS DO GRUPO 3' }
];
Qual mais devo acrescentar?
Bruno Franks

Bruno Franks
Nível 9

Masculino
Inscrito dia : 20/06/2012
Mensagens : 153
Pontos Ativos : 201

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

Atendido / Resolvido Re: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Luiz em 27.01.18 18:28

Não, você não deve mexer em nada aqui:
Código:
$this
          .children('td')
            .css('background-color', 'COR DESEJADA PARA O FUNDO')
          .end()
            .next('tr')
              .children('td')
                .css('background-color', 'COR DESEJADA PARA O FUNDO')
        ;

É só no array de configuração mesmo, como expliquei na minha mensagem acima.

O resto o script faz tudo sozinho! Feliz

E isso:
Código:
$this
          .children('td')
            .css('background-color', 'COR DESEJADA PARA O FUNDO')
          .end()
            .next('tr')
              .children('td')
                .css('background-color', 'COR DESEJADA PARA O FUNDO')
        ;

É uma parte importante do script que NÃO pode ser modificada pelo utilizador.

o/

---

EDIT:

Acabei percebendo que tinha cometido um erro no script. O script que postei acima já foi editado, no entanto, a versão atualizada é essa:
Código:
/**globals jQuery*/

/**
 * Post background as group color.
 * Paint the background of the post with the specified color.
 *
 * @author  Luiz Felipe F.
 * @see    {@link https://lffg.github.io}
 */

(function ($) {
  'use strict';

  var config = [
    { color: '#F0E078', background: 'red' }
  ];

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

      if (!$user.length) return;
      if (!$user.css('color')) return;

      $.each(config, function () {
        var self = this;

        var $dummy = $('<span>').css('color', self.color);

        if ($dummy.css('color') !== $user.css('color')) return;

        $this
          .children('td')
            .css('background-color', self.background)
          .end()
            .next('tr')
              .children('td')
                .css('background-color', self.background)
        ;
      });
    });
  });
})(jQuery);

Mas a explicação que postei na mensagem acima, acerca do array de configuração ainda se mantém.
Você só deve editar, no script, o que está dentro deste array (config):
Código:
var config = [
  { color: '#F0E078', background: 'red' }
];

O que ele faz? Ele colore de vermelho todas as mensagens dos membros do grupo que tem a cor:
Código:
#F0E078

Para adicionar mais grupos, veja o exemplo abaixo.

Se você tiver um grupo com a cor:
Código:
#3399cc
E quiser colocar o fundo de azul, basta adicionar:
Código:
{ color: '#3399cc', background: '#0000ff' }
No array, então, vai ficar assim:
Código:
var config = [
  { color: '#F0E078', background: 'red' },
  { color: '#3399cc', background: '#0000ff' }
];

Deu pra entender como funciona? Piscada

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: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Bruno Franks em 27.01.18 19:03

Ah sim... agora sim!
Tudo entendido! Novamente, muito obrigado Feliz Pode fechar/arquivar o tópico!
Bruno Franks

Bruno Franks
Nível 9

Masculino
Inscrito dia : 20/06/2012
Mensagens : 153
Pontos Ativos : 201

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

Atendido / Resolvido Re: Modificar cor de fundo das mensagens de um usuário grupo específico

Mensagem por Luiz em 27.01.18 19:04

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