• We've added extra Spam Protection. if you get problem with account registration / registration rejected. please contact us
  • You need minimum 5 good posts for download files. Don´t push posting-counter with posts copy paste, thx, good, smileys..... Read This.
  • Note: don´t push posting-counter with messages like thx, good, haha, only use reactions! threads will be deleted without any comment or notification. Read Rules.

How To ? customize XenForo style

affiliatestech

New Member
Joined
May 18, 2019
Messages
10
Reaction score
1
Points
3
Age
32
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.
 
Top

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock