Imagem de fundo individual para categorias

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

Resolvido Imagem de fundo individual para categorias

Mensagem por Agables em 05/02/18, 02:35 pm

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á!
avatar

Agables
Nível 2

Masculino
Inscrito dia : 04/02/2018
Mensagens : 5
Pontos Ativos : 9

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

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por virus em 06/02/18, 11:49 am

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.
avatar

virus
Usuário destaque

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

Ver perfil do usuário

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por Agables em 06/02/18, 02:15 pm

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

Agables
Nível 2

Masculino
Inscrito dia : 04/02/2018
Mensagens : 5
Pontos Ativos : 9

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

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por virus em 06/02/18, 07:42 pm

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.

avatar

virus
Usuário destaque

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

Ver perfil do usuário

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por Agables em 11/02/18, 11:27 am

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

Agables
Nível 2

Masculino
Inscrito dia : 04/02/2018
Mensagens : 5
Pontos Ativos : 9

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

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por virus em 12/02/18, 12:09 am

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"
   });
});

Feliz 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.
avatar

virus
Usuário destaque

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

Ver perfil do usuário

Resolvido Re: Imagem de fundo individual para categorias

Mensagem por Luiz em 14/02/18, 06:56 pm

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Luiz
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 6570
Pontos Ativos : 7333

Ver perfil do usuário https://github.com/lffg/

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