Styling

While XenForo comes with an attractive and easy-to-use style and user interface, many administrators will want to personalize their own installation in order to fit with the rest of their website, or simply to add their own touches.

Pre-Built Styles

There are a host of designers and programmers producing styles for the XenForo system, so you may be able to find a professionally-designed, pre-built style that meets your needs.

Applying a pre-built style to your own XenForo installation takes only a few minutes and is easy enough for most site administrators to manage.

A wide variety of pre-built styles are available in the XenForo Resource Manager.

Creating Your Own Styles

Appearance splash page

Even if you use a pre-built style, you may still need to make your own changes to the style, such as using your own logo or applying your own color scheme.

XenForo is provided with an immensely powerful styling system to allow administrators of any skill level to make wide ranging adjustments to the look and feel of their site.

Multiple layers of control are available, ranging from simple point-and-click adjustments to full scale HTML and CSS editing.

The layers, in order of the level of expertise required to make use of them, are described in the Styling Reference:

Maintaining Template Edits Through Upgrades

XenForo updates generally modify templates to fix bugs or add new features. If you have customized a particular template, your customized version will not automatically be updated with these changes. Templates which need your attention will be displayed on the Outdated Templates page.

It is very important to maintain template customizations and bring them up-to-date with each upgrade. If you do not do this, functionality may break. You should do this immediately after upgrading, even if functionality does not appear to be affected. The longer you wait, the harder it will be to update your customizations.

In XenForo 1.2, you have the option of merging your template changes with the new version of the template. This uses a technique called three-way merging. It identifies the your custom changes to the "old" version of the template along with the changes from the "new" version of the template. It then tries to bring these all together. In many cases, this can be done automatically without error.

However, if you made custom changes to a section that also changed in the new version of the template, this creates a conflict that you will have to manually resolve. You need to choose which version of the conflicting section to use (or both versions).

When you select the Merge Changes link for a template that is listed as being outdated, you will see what the final, merged version of the template will be. Successfully merged sections will be highlighted in blue. Conflicting sections will be highlighted in yellow with buttons to help you resolve the conflict. Once you have resolved any conflict, you may click on the text to edit it to fit your exact needs.