The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Use different category header background images?

View previous topic View next topic Go down

Use different category header background images?

Post by Tattastic on February 21st 2016, 1: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)




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

Thanks in advance for any responses.





Tattastic
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Genesis on February 21st 2016, 2: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");
}

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Use different category header background images?

Post by Tattastic on February 21st 2016, 3:47 pm

This hasn't seemed to work Sad

Any other suggestions?

Tattastic
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Genesis on February 21st 2016, 5:00 pm

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

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Use different category header background images?

Post by Tattastic on February 21st 2016, 5: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
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Genesis on February 21st 2016, 6: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
}

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Use different category header background images?

Post by Tattastic on February 21st 2016, 6: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
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Tattastic on February 21st 2016, 10:29 pm

Any other suggestions? Anyone?

Tattastic
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Tattastic on February 25th 2016, 8:09 pm

Anyone have any ideas?

Tattastic
Forumember

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

http://www.clan-aom.com

Back to top Go down

Re: Use different category header background images?

Post by Pebbles on March 1st 2016, 11:16 pm


Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

View previous topic View next topic Back to top


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