Change colours and sizes with style properties
Style properties let you change colours, sizes and spacing without editing a single template, including the ones add-ons bring.
Updated 3 min read By the D.C Style team
On this page
Style properties are XenForo's settings for how your forum looks: colours, fonts, sizes, spacing and borders. Changing a style property is the safest way to change your forum's appearance, because you never touch a template, so XenForo and add-on upgrades cannot undo your work. Add-ons can add style properties of their own, which is how you recolour their parts without writing any CSS.
Find the style properties for your style
- In the Admin CP, open Appearance > Style properties.
- Check the style name in the page title. If it is not the style your members use, switch it with the style menu at the top of the list. Changes only affect the style you edit, and the styles below it.
- Pick a group. Properties are grouped by area: Color palette, Basic colors, Typography, Header and navigation, Buttons, Avatars and more.
- Change the value and click Save. Reload the forum to see the result.
Tip: Start with Color palette. Most other colours refer to the palette, so changing a few palette colours recolours the whole style in a consistent way.
Values that follow your palette
A colour can be a fixed value, such as #1d4ed8, or a reference to another property, such as @xf-linkColor. A reference keeps the property in step with your palette. If you later change your link colour, everything that refers to it changes too. Prefer references when you want a part of the page to match the rest of your style.
If your style has light and dark variations, which XenForo 2.3 supports, colour properties can have a separate value for each variation. Check both before you decide a colour looks right.
Style properties from add-ons
An add-on can add its own properties to an existing group. For example, Story adds two to the Avatars group:
- Unseen story ring color: the ring around a member's avatar when they have stories you have not seen yet.
- Active story ring color: the ring when you have seen all of them.
Out of the box they follow your style's own colours, so they suit most styles without changes. See Set up Story for the rest of its settings.
Customized, inherited and reverting
Styles can have parent and child styles, and a child style takes every property from its parent unless you change it. Each property shows where its value comes from:
- Value customized: the value for this property has been customized in this style.
- Value inherited: the customized value comes from a parent style.
To undo a change, use Revert customized value on that property. The property goes back to the value from the parent style, or XenForo's default. You only lose the change to that one property, so it is a safe way to experiment.
Tip: If you use a style bought from a style designer, make your changes in a child style of it. When the designer releases an update, you install it over the parent and your changes stay where they are. How to set up a child style.
When a style property is not enough
Style properties cover most changes, but not all. For a layout change or a small CSS tweak, see Customize templates safely. If a change does not appear after you save, your browser or Cloudflare may be showing an older copy of the page. Changes not showing? explains how to check.
Still stuck? Open a support ticket with the style you use, the property you changed and a screenshot of the part of the page you want to change.