Installing "Pro" themes

Ehren

Administrator
Staff member
Customer
Messages
4,273
Website
www.xenfocus.com
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
Screen Shot 2020-10-06 at 6.11.43 pm.png

3. Log into your admin cpanel, select the Appearance > Styles link and then press the Import button at the top right.

Screen Shot 2020-05-29 at 5.35.57 pm.png

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).

Screen Shot 2020-10-06 at 6.13.08 pm.png


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.

Screen Shot 2020-05-29 at 5.44.09 pm.png

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.

Screen Shot 2020-05-29 at 5.45.46 pm.png

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.

Screen Shot 2020-05-29 at 5.47.04 pm.png


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.

Screen Shot 2020-05-29 at 5.49.40 pm.png


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.

Screen Shot 2020-05-29 at 5.52.27 pm.png


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
Screen Shot 2020-10-06 at 6.11.43 pm.png

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.

Screen Shot 2020-10-06 at 6.19.20 pm.png

5. Done!
 
Last edited:

brago

New Member
Customer
Messages
3
Good evening, Ehren. Just bought this amazing style (pro version) and trying figure out why exactly the easiest part - the switch button - works weird for me (after click it does nothing) :D Followed each step as described above. I`ll put screenshots.
2.PNG
1.PNG
Here is the address if you wanna click - hyperzone.ru
 

Ehren

Administrator
Staff member
Customer
Messages
4,273
Website
www.xenfocus.com
Sorry for the question @Ehren but when I update the theme, do my prior settings get maintained or overwritten?
If you've followed all of the instructions in this tutorial, all of your prior settings will remain :)

I'm planning on creating a video tutorial for this shortly, which should be easier to follow compared to the text tutorial.
 

Twisted_Pepper

New Member
Customer
Messages
12
Hi,
I have updated as per instructions and we've lost all settings - even the basic default settings of the dark theme I mean now, as well as custom changes you made for us?
Hope you can help.
Many thanks
 

Ehren

Administrator
Staff member
Customer
Messages
4,273
Website
www.xenfocus.com
Hi,
I have updated as per instructions and we've lost all settings - even the basic default settings of the dark theme I mean now, as well as custom changes you made for us?
Hope you can help.
Many thanks
Hello,

If your theme was installed as part of a Parent/Child setup, all modifications should have been retained.. Was this the case, or did you simply install the theme as a solo theme?

If it was a solo theme, you'll need to reapply your previous modifications since it seems like they've been replaced. It would also be a good idea to spend a few moments configuring your themes so they're Parent/Child themes.
 

Twisted_Pepper

New Member
Customer
Messages
12
Hello,

If your theme was installed as part of a Parent/Child setup, all modifications should have been retained.. Was this the case, or did you simply install the theme as a solo theme?

If it was a solo theme, you'll need to reapply your previous modifications since it seems like they've been replaced. It would also be a good idea to spend a few moments configuring your themes so they're Parent/Child themes.
Hello,
It was updated as a parent and child theme. But even the standard setup of the style (using dark) is missing. Such as the coloured bars on the site. It’s a bleak grey and black.
Also some customised things you built for us are missing too.
Thanks for your help.
 

Ehren

Administrator
Staff member
Customer
Messages
4,273
Website
www.xenfocus.com
It was updated as a parent and child theme. But even the standard setup of the style (using dark) is missing. Such as the coloured bars on the site. It’s a bleak grey and black.
Also some customised things you built for us are missing too.
I'll likely need a username and password to your ACP so I can check your current setup. Seems like something is a little off..
 

Twisted_Pepper

New Member
Customer
Messages
12
I'll likely need a username and password to your ACP so I can check your current setup. Seems like something is a little off..
Okay thank you. I have an IP restriction in place but will remove it when in my office a little later. Will also send. A username and password at the same time. Many thanks.
 

mylo

New Member
Messages
10
Hi Ehren. I have the light version of Uniform running on my site but would like to import the dark version also. I purchased the Pro version because of the discount but the light style was already installed. Can I still use the guide above to import the dark version with the pro package or do I need the separate dark theme for importing?
 

Ehren

Administrator
Staff member
Customer
Messages
4,273
Website
www.xenfocus.com
Hi Ehren. I have the light version of Uniform running on my site but would like to import the dark version also. I purchased the Pro version because of the discount but the light style was already installed. Can I still use the guide above to import the dark version with the pro package or do I need the separate dark theme for importing?
You can use the guide above. Simply do step 7 (assuming you followed all of the previous steps to install the light version of Uniform) and you should be good to go!
 

vicontrol

Member
Customer
Messages
135
Hi Ehren,

We're converting our forum from XF1 to XF2 today.

When EXPORTING the styles, do I EXPORT the Uniform Pro as an independent style, and then the rest as child styles? I'm a bit confused.

Here is what it looks like right now in our TEST environment where all modifications were made on child styles. Which ones do I EXPORT as "Independent," and which ones do I not export as independent?

And to reinstall to the live site, how do I go about it? Do I install the Uniform Pro I downloaded from my account on Xenfocus, and then IMPORT the child themes? Since they already have been modified, there could be steps I don't know about. In my mind it's not computing! ;)

0dfc94441daada8398715885b1a6f1a3.png
 
Top