Imagem de fundo individual para categorias

Detalhes da questão

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

Descrição

Olá!

Gostaria de saber como adicionar uma imagem de fundo diferente para cada categoria. Sei que é possível adicionar, por exemplo, uma imagem de fundo ao título da categoria e à tabela por meio da Gestão das imagens, porém essas implementações são globais, aplicadas em todas as categorias. Nesse caso, eu teria de recorrer a algum tipo de código?

Agradeço desde já!

Aonde exatamente você quer colocar?



Há muitos espaços e lugares onde pode ser adicionado.

R; Sim. Nesse caso geralmente se usa códigos quando não se aplica apenas usando painel e as funções do fórum.

Eu gostaria de colocar nesse fundo branco, onde tem o ícone, o número de postagens, etc. A imagem tomaria todo esse espaço.

Nesse caso eu falo de um script que já utilizei em meu fórum. Foi um pouco difícil de achar algo parecido na época então eu tinha guardado ele aqui rsrs.

Eu adaptei ele um pouco para ele reconhecer o espaço que você quer adicionar.

Painel de controle -> Módulos -> Gestão dos códigos javascript -> Criar um novo javascript.

Título * : Opcional.
Investimento : Índice.
Código JavaScript * :

Código:

jQuery(function(){
jQuery(".forabg .topiclist .forums .row:eq(1)").after('
<a href="https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg"><img class="bg-cat-forum" alt="imagem da categoria" src="https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg" /></a>

<br />
<br />
')
});


Código:

(".forabg .topiclist .forums .row:eq(1)")

Nessa parte (1) ele se refere qual categoria será aplicado. Em ordem crescente o seu fórum tem 2 categorias criadas por enquanto então só pode até 1.
(Começa de 0 adiante)

Atualmente o código contém duas coisas que é o link ancora que vai para outro site que se refere a imagem e a própria imagem.

Código:

<a href='https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg'></a><img class="bg-cat-forum" alt="imagem da categoria" src="https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg" />

Não existe créditos do desenvolvedor. Provavelmente foi de um fórum terceiro não pertencente ao forumeiros.

Testei esse código, mas infelizmente ele não funcionou. O espaço continua em branco.

basicamente seria isso que você quer né. Só investir no indice o script para testar e ele funciona da mesma maneira como explicado acima. O único problema é que vai ter que adicionar manualmente para cada categoria nova criada.

Código:

$(function (){
   $('.forabg .forums li.row').eq(0).css({
      "background-image": "url('https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg')",
      "background-repeat": "no-repeat"
   });
});

Por exemplo se criar outra categoria deve notar o eq(0) que a primeira categoria é 0 e adiante 1,2,3,4
ex de code


Categoria 2 criada

Código:

$(function (){
   $('.forabg .forums li.row').eq(1).css({
      "background-image": "url('https://i.ytimg.com/vi/1nxaKHZXklU/maxresdefault.jpg')",
      "background-repeat": "no-repeat"
   });
});

 E para juntar ficaria assim

Código:

$(function (){
   $('.forabg .forums li.row').eq(0).css({
      "background-image": "url('https://cdn.gearsofwar.com/media/default/games/gears-4/GoW4_KeyArt_Horiz_RGB_Final_Lo.jpg')",
      "background-repeat": "no-repeat"
   });
   $('.forabg .forums li.row').eq(1).css({
      "background-image": "url('https://i.ytimg.com/vi/1nxaKHZXklU/maxresdefault.jpg')",
      "background-repeat": "no-repeat"
   });
});

 Não sei muito dos code ainda, mas se você editar com cuidado vai conseguir utilizar. Pode restringir apenas para o índice ou sub-fóruns e com isso será útil.

Se quiser um código melhor e só avisar. Mas teste e me diga se ficou como queria.