XenForo is the renowned forum software we are using to run this present web site.
Now it's a fairly great piece of software but I find it lacks documentation.
This article is about customizing the colour palette specifically for XenForo 1.5.12.
In fact adjusting the colour palette is probably one of the first thing you will want to do after installation to personalize your web site.
To demonstrate which UI elements are affected by various colour identifier we are using the default XenForo styles and changing a single colour to bright red.
Colour @primaryDarker is notably used as background colour for bar at the top our your web site.
It's also defining the text colour and highlight of the currently selected navigation tab.
Colour @primaryDark is notably used for the background colour of your user name when you hover over it.
The background colour of the Reports count field at the top left corner is also using it.
Here is what @primaryMedium is notably used for the text of the forum titles in our node list, it's the text of our breadcrumb, it the user name below it's avatar and "Edit", "Delete", "Reply" links on posts. This one is hard to get right as it need to contrast with a lot of other colours. It's also prominent at the bottom and top of your pages.
@primaryLightish is use for the gradient of the current tab in the navigation bar and some border highlight:
@primaryLight is used for some headers in floating panels on the node list but is absent from the the Forum and Thread screens it seems.
@primaryLighter is used in the breadcrumbs border, text in the navigation bar, Reports and User name in the top bar. It's also used for the gradient of the "Post Reply" button, avatar border and user group border, the "Share This Page" as well as current style name, "Contact Us", "Help", "Home", "Top" links are also using it:
@primaryLighterStill is used in user for background and gradient below user avatar next to posts. It's also used for various borders and forum info bar background:
@primaryLightest gives you notably the avatar thick border and the floating info panels backgrounds and the editor tool bar. It's also the blur around the navigation bar focused texts and the breadcrumb background.
@textCtrlBackground is the background colour for for search input box and other such input fields. It also being used as the highlight colour for the text of inactive navigation tabs when you hover over them. Moreover it's the text colour of current navigation tab options and "Post New Thread" button.
Now it's a fairly great piece of software but I find it lacks documentation.
This article is about customizing the colour palette specifically for XenForo 1.5.12.
In fact adjusting the colour palette is probably one of the first thing you will want to do after installation to personalize your web site.
To demonstrate which UI elements are affected by various colour identifier we are using the default XenForo styles and changing a single colour to bright red.
Colour @primaryDarker is notably used as background colour for bar at the top our your web site.
It's also defining the text colour and highlight of the currently selected navigation tab.
Colour @primaryDark is notably used for the background colour of your user name when you hover over it.
The background colour of the Reports count field at the top left corner is also using it.
Here is what @primaryMedium is notably used for the text of the forum titles in our node list, it's the text of our breadcrumb, it the user name below it's avatar and "Edit", "Delete", "Reply" links on posts. This one is hard to get right as it need to contrast with a lot of other colours. It's also prominent at the bottom and top of your pages.
@primaryLightish is use for the gradient of the current tab in the navigation bar and some border highlight:
@primaryLight is used for some headers in floating panels on the node list but is absent from the the Forum and Thread screens it seems.
@primaryLighter is used in the breadcrumbs border, text in the navigation bar, Reports and User name in the top bar. It's also used for the gradient of the "Post Reply" button, avatar border and user group border, the "Share This Page" as well as current style name, "Contact Us", "Help", "Home", "Top" links are also using it:
@primaryLighterStill is used in user for background and gradient below user avatar next to posts. It's also used for various borders and forum info bar background:
@primaryLightest gives you notably the avatar thick border and the floating info panels backgrounds and the editor tool bar. It's also the blur around the navigation bar focused texts and the breadcrumb background.
@textCtrlBackground is the background colour for for search input box and other such input fields. It also being used as the highlight colour for the text of inactive navigation tabs when you hover over them. Moreover it's the text colour of current navigation tab options and "Post New Thread" button.
Last edited: