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.

Different Colors For Each Category

View previous topic View next topic Go down

Solved Different Colors For Each Category

Post by Vanityy on February 12th 2016, 4:50 am

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.
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by SLGray on February 12th 2016, 5:31 am

Do you mean the backgrounds or the titles?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39204
Reputation : 2628
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Vanityy on February 13th 2016, 5:57 am

The backgrounds.
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Ange Tuteur on February 13th 2016, 1:41 pm

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. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Vanityy on February 13th 2016, 4:52 pm

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

I did this:
Code:
.category-main { !important
background-color:#f04c25;
border-color:#f04c25;
}
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Ange Tuteur on February 13th 2016, 5:50 pm

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Vanityy on February 13th 2016, 5:54 pm

Did it, didn't seem to work either.
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Ange Tuteur on February 13th 2016, 5:59 pm

The URL of your forum this is applied to ?
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Vanityy on February 13th 2016, 6:00 pm

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

http://katalyst.forumotion.com/forum
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Ange Tuteur on February 13th 2016, 6:03 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Vanityy on February 13th 2016, 6:08 pm

Yes! Thank you very much!

Solved! Smile
avatar
Vanityy
Helper
Helper

Male Posts : 2335
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Different Colors For Each Category

Post by Ange Tuteur on February 13th 2016, 6:28 pm

You're welcome !

Topic archived

Have a good weekend. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

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