The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Use different category header background images?

3 posters

Go down

Use different category header background images? Empty Use different category header background images?

Post by Tattastic February 21st 2016, 5:12 am

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)

Use different category header background images? Hrlp10
Use different category header background images? Hrlp210

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

Thanks in advance for any responses.




Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Take Notes February 21st 2016, 6:37 am

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

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Tattastic February 21st 2016, 7:47 pm

This hasn't seemed to work Sad

Any other suggestions?
Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Take Notes February 21st 2016, 9:00 pm

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

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Tattastic February 21st 2016, 9:33 pm

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');
}
Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Take Notes February 21st 2016, 10:18 pm

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
}
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Tattastic February 21st 2016, 10:49 pm

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

Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Tattastic February 22nd 2016, 2:29 am

Any other suggestions? Anyone?
Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Tattastic February 26th 2016, 12:09 am

Anyone have any ideas?
Tattastic
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Use different category header background images? Empty Re: Use different category header background images?

Post by Pebbles March 2nd 2016, 3:16 am

Pebbles
Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum