We noticed you’re using an ad blocker!

We’ve detected that you are using adblock plus, uBlock Origin, AdGuard or some other adblocking software which is preventing the page from fully loading :(

We don’t have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads! We need money to operate the site, and almost all of it comes from our online advertising.

Please Disable Adblock or add whitelist or exclude xenforo.pk & dloady.com

customize XenForo style

A

affiliatestech

New Member
Registered
Joined
May 18, 2019
Messages
7
Reaction score
0
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