Variar imagem de fundo de acordo com os fóruns

Detalhes da questão

Endereço do fórum: http://www.novaerarpg.com
Versão do fórum: Invision

Descrição

A imagem de fundo do meu fórum é esta abaixo:



A página principal do meu fórum, portanto, está assim:



O que eu quero é o seguinte: quando alguém abrir o primeiro fórum que tá aparecendo na imagem, chamado Dark and Deep Storyteller, a imagem de fundo será trocada por outra. Queria saber se é possível fazer isso com todos os fóruns do meu site, alterando as imagens de fundo de acordo com cada fórum e sub-fórum.

Grato desde já.

Adicione a um novo Javascript com investimento em todas as páginas:

Código:

(function($) {
   'use strict';
   
   if (!/^\/f\d+-.*/i.test(location.pathname)) {
      return;
   }
   
   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };
   
   var background = config.backgrounds[~~location.pathname.replace(/^\/f(\d+)-.*/i, '$1')];
   
   if (!background) {
      return;
   }
   
   $('<style>', { html: [
      'body {',
      '  background-image: url(' + background + ');',
      '}',
   ].join('\n') })
      .appendTo('head')
   ;
}(jQuery));

Nessa parte o senhor pode configurar os backgrounds:

Código:

   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };

Sempre com ID_DO_FÓRUM: 'http://endereco.da/imagem.png'.

o/

Olá Kyo Panda,

Funcionou em partes. Eu queria que o background mudasse também para todos os sub-links que viessem abaixo dos IDs que eu colocar. Por exemplo,

Fórum 1
- Sub-fórum 1
- Sub-fórum 2

Eu queria que, ao mudar o background do Fórum 1, mudasse automaticamente para todos os seus sub-fóruns, tópicos, etc. Tem como fazer isso?

up

up

Troque por esse:

Código:

(function($) {
   'use strict';
   
   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };
   
   var href = $('#navstrip a[href^="/f"]:last').attr('href');
   
   if (!href) {
      return;
   }
   
   var background = config.backgrounds[~~href.replace(/^\/f(\d+)-.*/i, '$1')];
   
   if (!background) {
      return;
   }
   
   $('<style>', { html: [
      'body {',
      '  background-image: url(' + background + ');',
      '}',
   ].join('\n') })
      .appendTo('head')
   ;
}(jQuery));

Kyo Panda escreveu:Troque por esse:

Código:

(function($) {
   'use strict';
   
   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };
   
   var href = $('#navstrip a[href^="/f"]:last').attr('href');
   
   if (!href) {
      return;
   }
   
   var background = config.backgrounds[~~href.replace(/^\/f(\d+)-.*/i, '$1')];
   
   if (!background) {
      return;
   }
   
   $('<style>', { html: [
      'body {',
      '  background-image: url(' + background + ');',
      '}',
   ].join('\n') })
      .appendTo('head')
   ;
}(jQuery));

Esse código não funcionou nada, Kyo.

Como assim nada? Não fale assim do código. Ele tem sentimentos!

Spoiler:

---

Peço perdão, faltou uma peça:

Código:

(function($) {
   'use strict';
   
   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };
   
   $(function() {
      var href = $('#navstrip a[href^="/f"]:last').attr('href');
   
      if (!href) {
         return;
      }
      
      var background = config.backgrounds[~~href.replace(/^\/f(\d+)-.*/i, '$1')];
      
      if (!background) {
         return;
      }
      
      $('<style>')
         .text([
              'body {'
            , '    background-image: url(' + background + ');'
            , '}'
         ].join('\n'))
         .appendTo('head')
      ;
   });
}(jQuery));

Kyo Panda escreveu:Como assim nada? Não fale assim do código. Ele tem sentimentos!

Spoiler:

---

Peço perdão, faltou uma peça:

Código:

(function($) {
   'use strict';
   
   var config = {
      backgrounds: {
         1: 'https://i37.servimg.com/u/f37/17/02/65/26/fundo_11.jpg',
         3: 'https://image.freepik.com/psd-gratis/projeto-abstrato-do-fundo_1297-82.jpg',
      },
   };
   
   $(function() {
      var href = $('#navstrip a[href^="/f"]:last').attr('href');
   
      if (!href) {
         return;
      }
      
      var background = config.backgrounds[~~href.replace(/^\/f(\d+)-.*/i, '$1')];
      
      if (!background) {
         return;
      }
      
      $('<style>')
         .text([
              'body {'
            , '    background-image: url(' + background + ');'
            , '}'
         ].join('\n'))
         .appendTo('head')
      ;
   });
}(jQuery));

Hahahah. Agora sim deu certo. Valeu Kyo!

Abraços.

o/

---