Use different category header background images?

As I have discussed moving my destiny group to other games, I am trying to differentiate between the games and the categories and forums on the home page, and it does not seem like it is possible to set different backgrounds for each forum category forum (see Here).

So, I am wondering can you set different background images for the Category headers? See screenshots below from example (not my planned use of images if it is possible, just wanted to make up some examples)




Forum address: www.clan-aom.com
Version : phpbb3

Thanks in advance for any responses.

I modified one of Ange's posts that helped me out for different color category headers, hopefully it works for this too.

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Placement : In the homepage

Code:

$(function() {
  var forum = {
    'AoM Destiny' : 'category-AoM Destiny',
    'AoM Info Center' : 'category-AoM Info Center',
  },
 
  a = $('.forabg'), i = 0, j = a.length, k, txt;
 
  for (; i < j; i++) {
    txt = a[i].getElementsByTagName('H2')[0].innerHTML.toLowerCase();
 
    for (k in forum) {
      if (txt == k.toLowerCase()) {
        a[i].className += ' ' + forum[k];
        break;
      }
    }
  }
});

The variable you should focus on modifying is the forum object :

Code:

  var forum = {
    'Main' : 'category-main',
    'Features' : 'category-features'
  },

To the left of the colon is the category name, and to the right of the colon is the class you want added to this category. Make sure to separate these pairs by a comma. Note that the last pair in the object doesn't need a comma, unless of course you add another pair after it. When you're finished editing make sure to save.

After this you can use CSS to modify the category style attributes.

Code:

.category-AoM Destiny {
  background-image: url("IMAGE LINK HERE");
}

This hasn't seemed to work

Any other suggestions?

Can you please send what you put in your JavaScript and your CSS?

Only tried one to see if it wpu;d work, this is what I have so far... I tried with the " marks as well before the image URL, and then noticed my nav and button css has ' either side.

Java

Code:

$(function() {
  var forum = {
    'AoM Info Center' : 'category-AoM Info Center',
  },
 
  a = $('.forabg'), i = 0, j = a.length, k, txt;
 
  for (; i < j; i++) {
    txt = a[i].getElementsByTagName('H2')[0].innerHTML.toLowerCase();
 
    for (k in forum) {
      if (txt == k.toLowerCase()) {
        a[i].className += ' ' + forum[k];
        break;
      }
    }
  }
});

CSS

Code:

.category-AoM Info Center {
  background-image: url('http://i84.servimg.com/u/f84/19/38/41/91/about10.jpg');
}

Try this for CSS:

Code:

.category-AoM Info Center {
  background-image: url('http://i84.servimg.com/u/f84/19/38/41/91/about10.jpg'), !important;
  border-color: #000
}

Still no luck with that as well - noticed AOM INFO CENTER was in caps on category names (within Admin Panel), so tried in caps as well now (both JAVA and CSS).

Any other suggestions? Anyone?

Anyone have any ideas?

maybe this can help you out?
https://www.phpbb.com/community/viewtopic.php?f=74&t=1368355