- Messages
- 5,036
- Website
- www.xenfocus.com
Note: This tutorial only applies to Xenforo 2.2.x. Themes have been recoded for 2.3 using the Style Variations system, which means the light/dark versions are included in a single theme file. They do not need any special installation steps like 2.2.
Introduction
"Pro themes" from XenFocus are simply bundles which contain both the light and dark versions of the same theme. These are distributed as a Parent/Child combination and must be installed using specific steps.
First, you must know what colour scheme is the Parent and what one is the Child. As a general rule (with xenfocus themes), light themes are always the Parent (and are zip files), while dark themes are always the Child (and are xml files).
How to install Pro styles
1. Download the style from the Client Area.
2. Unzip the file on your computer, and you should see:
3. Log into your admin cpanel, select the Appearance > Styles link and then press the Import button at the top right.
4. Import the Parent style (the .zip file) and make sure (No parent) is selected in the drop down menu. This will create a Parent theme as well as upload all of the theme assets (background images, etc).
5. Once the style has been imported, we want to create a Child style. This will allow us to easily modify and upgrade the style in the future. To do so, click the Add style button at the top. Add your own Title - the name of your site followed by either (light) or (dark) depending on the colour scheme is generally a good idea. Change the Parent Style option to your newly installed xenfocus theme (from Step 4). Press Save. This will create a child theme.
6. Now that your Child theme has been created, visit the Styles page and disable the Parent style by clicking the toggle icon. Disabling the style simply removes it from the Style Picker at the bottom of your site and prevents your members from selecting it. This is intentional. The Parent style won't actually be used by your members on your site, but it's important to have a Parent style since it makes updates much easier.
7. Next, click the Import button again and import the Child style from your computer (the dark xml file). This time, open the "Child of style" menu and select your child theme which you created in Step 5.
8. Once the style has finished importing, click the toggle icon next to it's name to hide it (like we did with the parent style). Next, click the Add Style button at the top right again. We're now creating a child version of your dark theme, so fill out the details similar to the screenshot below (make sure you select your dark theme in the "Parent style" setting. Press Save.
Once you're returned to your main styles page, you'll see a hierarchy of 4 themes, with each one progressively more indented than the other.
The top theme is the Parent theme and should never be edited. Don't edit it's code, don't edit it's style properties - nothing!
The second theme is a clone of your Parent theme. This is the theme which you should edit if required (eg. changing the logo, changing settings, etc).
The third and fourth themes will inherit all of the changes from the second theme. If you edit your logo in the second theme, the logo will automatically be added to all themes below it. This is helpful since you only need to edit your settings once, and both colour schemes will be updated.
The only thing remaining is to enable the dark/light toggle, which allows your members to easily switch between the two colour schemes!
How to upgrade Pro styles
1. Download the style from the Client Area.
2. Unzip the file on your computer, and you should see:
3. Find out what your Parent style is (refer to the list at the top of this post).
4.a. Note: If you originally installed your theme during 2.0 or 2.1 and therefore used the .xml file, you may want to upgrade using the .xml instead of the .zip file. To do this, simply unzip the .zip file on your computer and you'll have access to the .xml file. You can then import it instead of the .zip file in the next step.
4.b. Log into your admin cpanel, click Appearance > Styles and then the Import button at the top right. Browse to the .zip file (the Parent theme). Choose the Overwrite style option and select your Parent style from the list. The Parent style is the one at the top of your hierarchy (the one which is hidden to all members and has not been edited). Replacing that theme will mean the updated changes are inherited by your child themes.
5. Done!
Introduction
"Pro themes" from XenFocus are simply bundles which contain both the light and dark versions of the same theme. These are distributed as a Parent/Child combination and must be installed using specific steps.
First, you must know what colour scheme is the Parent and what one is the Child. As a general rule (with xenfocus themes), light themes are always the Parent (and are zip files), while dark themes are always the Child (and are xml files).
How to install Pro styles
1. Download the style from the Client Area.
2. Unzip the file on your computer, and you should see:
- xenfocus-readme.html
- style-*.zip
- style-*-dark.xml
3. Log into your admin cpanel, select the Appearance > Styles link and then press the Import button at the top right.
4. Import the Parent style (the .zip file) and make sure (No parent) is selected in the drop down menu. This will create a Parent theme as well as upload all of the theme assets (background images, etc).
5. Once the style has been imported, we want to create a Child style. This will allow us to easily modify and upgrade the style in the future. To do so, click the Add style button at the top. Add your own Title - the name of your site followed by either (light) or (dark) depending on the colour scheme is generally a good idea. Change the Parent Style option to your newly installed xenfocus theme (from Step 4). Press Save. This will create a child theme.
6. Now that your Child theme has been created, visit the Styles page and disable the Parent style by clicking the toggle icon. Disabling the style simply removes it from the Style Picker at the bottom of your site and prevents your members from selecting it. This is intentional. The Parent style won't actually be used by your members on your site, but it's important to have a Parent style since it makes updates much easier.
7. Next, click the Import button again and import the Child style from your computer (the dark xml file). This time, open the "Child of style" menu and select your child theme which you created in Step 5.
8. Once the style has finished importing, click the toggle icon next to it's name to hide it (like we did with the parent style). Next, click the Add Style button at the top right again. We're now creating a child version of your dark theme, so fill out the details similar to the screenshot below (make sure you select your dark theme in the "Parent style" setting. Press Save.
Once you're returned to your main styles page, you'll see a hierarchy of 4 themes, with each one progressively more indented than the other.
The top theme is the Parent theme and should never be edited. Don't edit it's code, don't edit it's style properties - nothing!
The second theme is a clone of your Parent theme. This is the theme which you should edit if required (eg. changing the logo, changing settings, etc).
The third and fourth themes will inherit all of the changes from the second theme. If you edit your logo in the second theme, the logo will automatically be added to all themes below it. This is helpful since you only need to edit your settings once, and both colour schemes will be updated.
The only thing remaining is to enable the dark/light toggle, which allows your members to easily switch between the two colour schemes!
How to upgrade Pro styles
1. Download the style from the Client Area.
2. Unzip the file on your computer, and you should see:
- xenfocus-readme.html
- style-*.zip
- style-*-dark.xml
3. Find out what your Parent style is (refer to the list at the top of this post).
4.a. Note: If you originally installed your theme during 2.0 or 2.1 and therefore used the .xml file, you may want to upgrade using the .xml instead of the .zip file. To do this, simply unzip the .zip file on your computer and you'll have access to the .xml file. You can then import it instead of the .zip file in the next step.
4.b. Log into your admin cpanel, click Appearance > Styles and then the Import button at the top right. Browse to the .zip file (the Parent theme). Choose the Overwrite style option and select your Parent style from the list. The Parent style is the one at the top of your hierarchy (the one which is hidden to all members and has not been edited). Replacing that theme will mean the updated changes are inherited by your child themes.
5. Done!
Last edited:
