Colocar cor no fundo do Icone

Detalhes da questão

Endereço do fórum: http://policia-militar-sf.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

olá gostaria de saber como colocar uma cor no fundo quando o icone é selecionado como na imagem abaixo

http://prntscr.com/hb0zcv

obrigado!

Olá novamente!

Aqui está o que o senhor precisa:
https://ajuda.forumeiros.com/t110696-mudar-background-do-topico-de-acordo-com-o-icone#780063

Leia com atenção. Caso não consiga entender muito bem, basta dizer que tentarei explicar melhor!

Por fim deixo-lhe o link da FAQ sobre os ícones de mensagens, veja:
https://ajuda.forumeiros.com/t8479-faq-adicionar-icones-de-mensagens

Basicamente você cria um ícone de mensagem, com nome e imagem, e edita no código conforme está no seu fórum, entende?!

Att!

Gaaratsu escreveu:Olá novamente!

Aqui está o que o senhor precisa:
https://ajuda.forumeiros.com/t110696-mudar-background-do-topico-de-acordo-com-o-icone#780063

Leia com atenção. Caso não consiga entender muito bem, basta dizer que tentarei explicar melhor!

Por fim deixo-lhe o link da FAQ sobre os ícones de mensagens, veja:
https://ajuda.forumeiros.com/t8479-faq-adicionar-icones-de-mensagens

Basicamente você cria um ícone de mensagem, com nome e imagem, e edita no código conforme está no seu fórum, entende?!

Att!

então eu não entendi aonde eu coloco o segundo codigo ?

Olá novamente!

O segundo código ele está explicando que é possível configurá-lo naquela parte(sendo que ele pegou do código completo, o primeiro código), o terceiro é se o senhor quiser adicionar mais.
Compreende?

Att!

tipo eu não estou conseguindo colocar a cor em cada icone poderia me ajudar ?

Claro!

Me passe o código que o senhor está editando e as cores que deseja. O background no caso deste código está em rgba, por isso fica assim: rgba(136, 187, 85, 0.3)
Talvez seja por este motivo que o senhor não esteja conseguindo, estou certo?!

tipo se eu passar os links dos icones + cor vc poderia fazer o codigo ?

Ícone 1: https://i.imgur.com/VlBWuVo.png | Cor: Verde
Ícone 2: https://i.imgur.com/ic87Khd.png | Cor: Vermelho
Ícone 3: https://i.imgur.com/FKMMEN2.png | Cor: Verde
Ícone 4: https://i.imgur.com/IavionT.png | Cor: #8C668C
Ícone 5: http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Alert-icon.png | Cor: #D966D9

Aqui está:

Código:

(function ($) {
  'use strict';
 
  var config = [
    { url: 'https://i.imgur.com/VlBWuVo.png', background: 'rgba(0, 100, 0, 1.0)' },
    { url: 'https://i.imgur.com/ic87Khd.png', background: 'rgba(255, 0, 0, 1.0)' },
    { url: 'https://i.imgur.com/FKMMEN2.png', background: 'rgba(0, 128, 0, 1.0)' },
    { url: 'https://i.imgur.com/IavionT.png', background: 'rgba(140, 102, 140, 1.0)' },
    { url: ' http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Alert-icon.png', background: 'rgba(217, 102, 217, 1.0)' }
  ];
 
  $(function () {
    $('.dterm').each(function () {
      var $this = $(this);
 
      $.each(config, function (index, icon) {
        var regex = new RegExp (icon.url, 'gi');
        if (!regex.test($this.css('background-image'))) {
          return;
        }
 
        $this
          .parent('.icon')
            .css('background-color', icon.background)
          .end()
            .parent('.row')
              .css('background-color', '#fff')
        ;
      });
    });
  });
}(jQuery));

Att!

Ficou legal vc poderia apenas alterar a cor pra mim tipo o vermelho e verde poderia por no tom da minha imagem ?

http://prntscr.com/hb0zcv

ranzatti escreveu:Ficou legal vc poderia apenas alterar a cor pra mim tipo o vermelho e verde poderia por no tom da minha imagem ?

http://prntscr.com/hb0zcv

O senhor quer igual a imagem(ícone) ou igual a cor de fundo como na imagem indicada?

Cor!

Substitua por este:

Código:

(function ($) {
  'use strict';
 
  var config = [
    { url: 'https://i.imgur.com/VlBWuVo.png', background: 'rgba(0, 100, 0, 1.0)' },
    { url: 'https://i.imgur.com/ic87Khd.png', background: 'rgba(255, 38, 38, 0.3)' },
    { url: 'https://i.imgur.com/FKMMEN2.png', background: 'rgba(0, 166, 81, 0.3)' },
    { url: 'https://i.imgur.com/IavionT.png', background: 'rgba(140, 102, 140, 1.0)' },
    { url: ' http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Alert-icon.png', background: 'rgba(217, 102, 217, 1.0)' }
  ];
 
  $(function () {
    $('.dterm').each(function () {
      var $this = $(this);
 
      $.each(config, function (index, icon) {
        var regex = new RegExp (icon.url, 'gi');
        if (!regex.test($this.css('background-image'))) {
          return;
        }
 
        $this
          .parent('.icon')
            .css('background-color', icon.background)
          .end()
            .parent('.row')
              .css('background-color', '#fff')
        ;
      });
    });
  });
}(jQuery));

Att!

alterei mais não surgiu efeito!

ranzatti escreveu:alterei mais não surgiu efeito!

Certifique-se que substituiu o código, pois fiz a alteração como desejado. Deixei a mesma cor de fundo para o tópico que tiver esses ícones como na imagem indicada.
Por isso lhe perguntei se o senhor queria o fundo da mesma cor que dos ícones ou igual da imagem mostrada.

Gaaratsu escreveu:

ranzatti escreveu:alterei mais não surgiu efeito!

Certifique-se que substituiu o código, pois fiz a alteração como desejado. Deixei a mesma cor de fundo para o tópico que tiver esses ícones como na imagem indicada.
Por isso lhe perguntei se o senhor queria o fundo da mesma cor que dos ícones ou igual da imagem mostrada.

ja resolvi aqui o erro muito obrigado novamente Gaaratsu ja apliquei o ++