XF 2.2 Color Palette and Basic Colors - diagram, cheat sheet, guide?


Well-known member
Is there a guide | cheat sheet | diagram, or similar, available for the Color Palette and Basic Colors?
For example, what aspects of the site are Color 3, Accent 2, Neutral 1 etc.

I know I could just change one to something like hot pink and then see through the front-end what's now hot pink, but rather than stepping through this exercise I wonder if anyone has got a simple diagram/chart of xF's major UI pages showing the color palette for major items.
  • Like
Reactions: RDR


Well-known member
What's funny is when XF2 first came out that's the first thing I did, change a single color palette to a hot pink to view the changes :D. If I recall correctly, there's really no set guide someone could make. You should just think of the XF2 color palette as the general color scheme that will change the overall look of the forum. Specific changes should be done at the Basic color properties followed by even further changes using style properties + CSS edits.

For instance, color 5 will change the moderator bar, header, footer, and the color of the links when they hover.

Color 4 will change link colors, tab headers, editor colors, and other various bits. I'm pointing this stuff out because there's no way a guide could really handle all of this.

I made some changes in our framework to really help speed things up when it came to color changes, but this took a little bit of work to get it working properly.


My best recommendation when working with the default color palette: change to similar tones of your desired color scheme. If you want a green style, change the light blue to a light green, dark blue to dark green. Then from there edit the basic colors directly.