Different colour bars?


Well-known member
Is it possible to have a selection of bar colours, and select per category of forums?
(The coloured bar withy gradient, which gets title text on it.)

Jake Bunce

XenForo moderator
Staff member
You will have to be creative.

I recommend simply editing the category descriptions to include some colorful HTML. It won't change the color of the entire category bar, but it can easily set apart the different categories with colors inside of that bar.

Otherwise I can imagine some template code that references different background gradients based on node_id, but that is a little yucky.

Jake Bunce

XenForo moderator
Staff member
Looking for template code to use to create a different colour gradient on each Category bar please.
I know more now than I did a year ago. This can be done with simple CSS:

Admin CP -> Appearance -> Templates -> EXTRA.css

Rich (BB code):
.nodeList .node_1 .categoryStrip
	background-color: red;

.nodeList .node_4 .categoryStrip
	background-color: blue;
You need to specify the node_ids of the categories.

This is the result:

Screen shot 2011-10-27 at 2.40.37 PM.png


Well-known member
Jake I have had lots of friendly admiring comments on my pretty category bars all due to your clever code snippets.

They are so cool -I have the image, the coloured gradient per category - and the coloured title font.
I would love to place them in other locations like

- the sidebar - without the small text explanation along the bottom - so the side menu matches the main forumslist.
I've done this by making graphics from the forums list page but it's pretty clumsy looking really.

- in a page content area like the matching dedicated category view,
or on a Page giving info about that category.

Jake Bunce

XenForo moderator
Staff member
Which part of the sidebar exactly?

Changing the page background within a category requires creating a new style for that category:

Admin CP -> Applications -> Display Node Tree -> [click the category] -> Override user style choice


Well-known member
Thank you Jake.

Here's the sidebar I use on users_online / forums_list/ and the wiki
- I made an approx version mimicking the bars with graphics, not great
- the bars are too short they should stretch right across the sidebar.

Here's category view - dedicated page for a category in the node tree (this is a mockup)
I tried copying some code in the category _view template but it showed only the text on the bar and the standard XF icon.

Here's an info page (static page) using a cat bar as a graphic header so each section has a description.
How can I insert the cat bar in html?