Cores diferentes em cada categoria

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

Atendido / Resolvido Cores diferentes em cada categoria

Mensagem por Punisher em 22.04.18 1:11

Detalhes da questão


Endereço do fórum: http://nwdcorporation.forumeiros.com
Versão do fórum: ModernBB

Descrição


Olá, eu uso este código atualmente nas minhas categorias:
Código:
ul.forums {
    background-color: #ffffff;
}
ul.forums li.row:hover {
    border-left: 4px solid orange;
}
ul.forums .posts:after {
    content: 'Mensagens';
}
ul.forums .topics:after {
    content: 'Tópicos';
}
}

Eu gostaria de deixar cada categoria com uma cor diferente, como no FdF, alguem poderia me ajudar?
Punisher

Punisher
Nível 8

Masculino
Inscrito dia : 16/10/2017
Mensagens : 139
Pontos Ativos : 233

Ver perfil do usuário http://rota-nwd.forumeiros.com

Atendido / Resolvido Re: Cores diferentes em cada categoria

Mensagem por Luiz em 22.04.18 1:24

Olá,

Crie um novo JavaScript investido no início com o código a seguir:
Código:
/*globals jQuery*/

/**
 * Apply different backgrounds in categories.
 *
 * @author  Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.0
 * @license  MIT
 */

(function($) {
  'use strict';

  var config = [
    {
      name: 'Fórum',
      background: '#39c'
    },
    {
      name: 'Fórum 2',
      background: '#444'
    }
  ];

  $(function() {
    $('.forabg').each(function() {
      var $this = $(this);
      var text  = $this.find('.table-title').text();

      if (! text) return;

      $.each(config, function() {
        if (text !== this.name) return;

        $this
          .find('.header')
          .css('background-color', this.background);
      });
    });
  });
})(jQuery);

O funcionamento é simples:

Existe um vetor de configuração que contém o nome da categoria e em seguida a cor que ela assumirá:
Código:
var config = [
  {
    name: 'Fórum',
    background: '#39c'
  },
  {
    name: 'Fórum 2',
    background: '#444'
  }
];
Basicamente, você deverá escolher um nome para a categoria e em seguida uma cor de fundo.
Você pode criar quantos grupos quiser, basta copiar a estrutura deles, por exemplo, para criar três:
Código:
var config = [
  {
    name: 'Fórum',
    background: '#39c'
  },
  {
    name: 'Fórum 2',
    background: '#444'
  },
  {
    name: 'Fórum 3',
    background: '#f10'
  }
];

Lembre-se somente de não adicionar vírgula no último grupo!

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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

Atendido / Resolvido Re: Cores diferentes em cada categoria

Mensagem por Punisher em 22.04.18 1:48

Eu configurei assim:
Código:
   {
      name: 'Area - COP',
      background: '#7900C9'
    },
Mas a primeira categoria continua na cor padrão.

@Edit: Era só mudar o nome da Categoria para Area COP no painel e no código, pode fechar, agradeço Luiz
Punisher

Punisher
Nível 8

Masculino
Inscrito dia : 16/10/2017
Mensagens : 139
Pontos Ativos : 233

Ver perfil do usuário http://rota-nwd.forumeiros.com

Atendido / Resolvido Re: Cores diferentes em cada categoria

Mensagem por Luiz em 22.04.18 1:52

Tópico resolvido


Movido para "Questões resolvidas".
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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