Different Colors For Each Category

My problem is simple. I would like to change the color of each category's header. For example, the first category could be red, the next category below it could be yellow.

Do you mean the backgrounds or the titles?

The backgrounds.

Hi @Forumedic,

This can be done by using a bit of JavaScript and CSS. Go to Modules > JS codes management > Create a new script

Placement : In the homepage

Code:

$(function() {
  var forum = {
    'Main' : 'category-main',
    'Features' : 'category-features'
  },

  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

Code: 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-main {
  background-color:#8C5;
  border-color:#7B4;
}

If necessary, you can use the

Code: !important

flag to override styles. That is if your rule doesn't take effect.

If any questions let me know.

Didn't work. Where shoukd I put the "!important"?

I did this:

Code:

.category-main { !important
  background-color:#f04c25;
  border-color:#f04c25;
}

It should go at the end of the property value. e.g. :

Code:

selector {
  property:value !important;
  property:value;
}

Info : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Did it, didn't seem to work either.

The URL of your forum this is applied to ?

I should have put that in the first post, sorry.

http://katalyst.forumotion.com/forum

There's an error in the script. Add a comma after this :

Code:

'Features':'category-features'

and this :

Code:

'Discussion':'category-discussion'

and it should be good.

Yes! Thank you very much!

Solved!

You're welcome !

Topic archived

Have a good weekend.