XenForo Tutorial

This tutorial explains how to correctly customize a XenForo style.

What not to do and why

Never edit style that you are planning to update in future!

When you import style XML file to update it, import will reset all your custom changes. That is why you should never apply changes to style you have imported.

To avoid that problem you should always create a child style for style you have imported and apply all changes to that child style. It will inherit all templates from parent style, so when you'll update parent style your child style will also be updated.

See style installation tutorial.

Editing style properties

Editing style properties is easy: you just change values and click "Update style properties" button.

But what if something went wrong? That is what "reset" link is for. It is located in top right corner for CSS properties:



and on right side of other properties:



That button will change style property to match its parent style.

Do not revert style properties from styles you have imported! That might result in errors and you might have to import style again.

Editing CSS

If you need to add custom CSS code, you should add it to template "extra.css"

In styles section click "Templates" link for template you want to edit, type "extra" in filter:



Click it. Add any CSS code to that template.

If you want to override CSS used in any other template, change rule a bit to give it higher priority than original rule or append !important to rule. Why? Because templates do not always load in same order. It might happen that extra.css is loaded before other css template, resulting in rule in extra.css being overridden. For example, to override this rule:

Code:
.foo { color: @primaryMedium; }
that is used only in div tags with color: white; use this:

Code:
div.foo { color: white; }
Adding div to it will make that rule higher priority than .foo, so even if div.foo is loaded before .foo, color will be white. Look for "css specificity" documentation for detailed explanation of priorities.

Reverting many style properties

Examples above explain how to reset individual style properties. But what if you have changed many style properties? Going through all properties to find out which ones you have edited would take too much time. There is a better option: click "Customized Components" link in menu.



First make sure correct style is selected by checking "Style" dropdown above form.

Then select properties you want to reset (or click "select all" to revert everything) and click "Revert Selected Items" button.

Problems

If you have any questions or ran into problems, please post your questions on support forum.