• This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Category Design: Jake Bunce Tribute!


Well-known member
I have had a number of compliments on the way I’ve designed my category container bars. I take credit or otherwise for designing the look but it's all down to other clever persons for how to do it.
If you like a feature in the pic see below for how to do it and links to Jake's threads.

SCR- Morgain.png

Thank you for compliments from Shelley, Digital Doctor,Fuhrmann, and Dodgeboard.

The code all comes from the wonderful Jake Bunce, plus I had very kind help from Dodgeboard.
So I thought it would be a nice repayment to put all the bits together in one place so people can see the possibilities all together.

My subtitles here are linked to Jake's threads for each item.

I am no way a coder only a junior tweaker so please visit Jake's threads for any help. I can only help with art design issues.

CATEGORY SPACING help from Jake Bunce.
I wanted the Categories to be a bit less space greedy so I cut the space at the bottom, before the next one starts.

Admin * Appearance * Styles * Default Style * Templates

.nodeList .node.level_1
    margin-bottom: 5px !important;
Change the number 5 to bigger or smaller as desired.


Admin / Styles/* Appearance/ * Styles/ * Default Style/ * Style Property Groups

Category Strip – change bottom to 2px. Cuts bottom of the coloured bar to make it narrower.
Category Strip Title – 14pt + Bold. Larger text to stand out and show off colours.
Category Strip Description – 12pt. Larger text for those like me who peer at small text uncomfortably.


If you want the pretty XF default for one or more Container bars to stay, just don’t put in anything for those. Only put code in this EXTRA.css section for the gradients you want to change.

IMPORTANT If you want to use colours for the titles as well think carefully about colour combinations. Red on red won't show up. The two colours need to be light on dark/ strong, or vice versa, dark on pale.
You also need to consider the Category Strip Description colour - will it show up on ALL the Category colours you're choosing?

There are some psychological and combination issues to consider which are helpful -
- BLUE = honest/ reliable/ clear. Can be peaceful. Bright strong blues and white look very clean.
Aqua signals deception.
- YELLOW text needs to be bold and a bit orange to show up on another colour.
Note YELLOW + BLACK is Nature's crisis or danger combo = poison! It is striking but aggressive.
- RED = action/ blood/ health/ happiness in moderate quantities. Overdoing it is aggressive. Good with white or black or both, or grey.
- GREEN = nature, health, creativity, calm. Bright greens and white look very clean.
- BROWN can be dreary but with a good choice of surrounding colours can be rich and precious. Also good for borders.
- PURPLE = royal, leadership, sexuality esp. female. Goes well with blues and greens.
- BLACK is very popular as it = death, drama, depth. But have a care things can be READ! Small text against black is harsh - lots of people don't have good quality displays or good lighting to see by. Standby colour for text info.
- GREY fashionably overused and frustrating when text is small, pale and invisible! Signals quietness, calm, lesser importance. Striking balance for red, and good with purple. Shades well with blue or green.
- WHITE = stillness, death, freezing, clearness. Can set off another colour for clean look.
- CREAM/ IVORY A softer warmer version of white.

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

/*** Category 1 ***/
.nodeList .node_1 .categoryStrip
    background-color: red;
/*** Category 4 ***/
.nodeList .node_4 .categoryStrip
    background-color: blue;
Copy one time for each Category you want to change.
This example shows code to colour category number 1 and 4.
Get the different NUMBERS for your site by hovering the Category title on the frontend.
The node number is on the end of the URL.


Jake’s thread has TWO options:
1. How to put in a neat rectangle of pure colour.
2. How to put in a graphic.

I used option 2 so if you want pure colour go see Jake’s thread.

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

/*** Category 1 ***/
    background-image: url('PATH/TO/IMAGE1.GIF');
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
/*** Category 2 ***/
    background-image: url('PATH/TO/IMAGE2.GIF');
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
As before get the node NUMBER for each one you want to change, by hovering the Category title on the frontend. The node number is on the end of the URL.
Copy this code above for each Category you want to have an image, and match your node numbers (Categories) on the first line.
Above is example of 2 nodes/ categories, 1 and 2.
Helpful to include the number of the node in the graphic’s name.

40px is about maximum size for the image to work well.

My path to image is long!

background-image: url('http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2.png');
To get the images transparent Dodgeboard recommended -
1. Download Paint.net.
2. Open the graphic
3. In Tools, select Magic Wand
4. Click on the white background you wish to delete
5. hit the delete key
6. Gray/white checkered background indicates transparant
7. Repeat until you have all the white background deleted.
8. Play with the Tolerance setting to adjust how color variances are selected.


This colours each Category Title a selected colour each, plus the forum titles below it the same colour.

Jake’s thread also tells you how to apply this font colour to just forums.
Also to Link and Page nodes.
NOTE if you want the forum title changes you need to make a small replacement of code on the template node_forum_level_2 (Jake’s thread gives it)

Admin * Appearance * Styles * Default Style * Templates

.nodeCategory15 a,
.nodeCategory15 a:visited
    color: #339933;
    font-weight: bold;
.nodeList .node_15 .nodeTitle a,
.nodeList .node_15 .nodeTitle a:visited
    color: #339933;
You get the .nodeCategory number by hovering the Category title on the frontend.
The node number is on the end of the URL.
Copy this and change the node number for each copy to match your nodes (Categories)

Where I have “color: #339933;” change the colour numbers
OR delete the # hash, and replace the numbers with simple colour names “red” “blue” etc.


BIG THANK YOU to Jake Bunce, and Dodgeboard for lots of kindly help.


Well-known member
DD thank you for the Jake interview thread. I've posted a prettied up portiait of Jake there to add to the fan club.

Morgain: thanks for sharing the origins of your pimped out forum ... love your tweaks and the story behind the scenes.
Er ... "pimped out" sounds awful. Pimps are lowlife scum who ruin the lives of vulnerable young girls and boys as I know all too well.


Well-known member
Jake Bunce for President!!! :p
Oh dear let's not wish that on a nice guy - not to be thrown into a filthy pit of dishonest, corrupt, ven violent operators insane with powerlust.
Not Jake's kind of world I think.

No I would vote Jake into a solid but not overwhelming trust fund so he could happily live in a gorgeous penthouse / manor house, in comfort and beauty, merrily coding away never having to do any other work unless he wished it.


Well-known member
Jake Bunce needs a regular appreciation thread. He's the most gracious out of all the coders I've noticed around here. Being gracious is like a rare trait in someone really talented. Especially after you come across really rude and grumpy coders.
Totally agree 8th except there are others coders out there who are very helpful as well who've put out good mods and hence get a donation :).