Installing "Pro" themes

Ehren

Administrator
Staff member
Customer
Messages
4,564
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:

Ehren

Administrator
Staff member
Customer
Messages
4,564
Website
www.xenfocus.com
@vicontrol :

Export the child themes from your dev site but don't tick the independent box. You only want to tick that box if you aren't using a parent/child setup, which isn't the case here.

On your live site, import fresh versions of the Uniform themes, and instead of clicking the "Add style" button to create your children styles (like you normally would on a fresh setup), import your exported dev styles and assign them to your Parent Uniform themes.

I hope that helps!
 

vicontrol

Member
Customer
Messages
137
Thanks, yes! We're live!

I had to undo the little trick I did because it moved the Quick Reply box too high and so it was in the way. So far people love it, the Dark style, and the grid view, are a HIT! :)
 

CVN

Member
Messages
34
Hello Ehren,

I had been staying with XenForo 2.9 with the the corresponding version of the illuminate Pro style for a while and I have upgraded to XenForo 2.10 just now and wanted to upgrade the illuminate Pro style too.

Then I read again you tutorial and realized that it had been changed.

What I have now is like this:
Screen Shot 2020-09-09 at 22.09.02.png

while what I should have as your tutorial is like this:
Screen Shot 2020-09-09 at 22.08.36.png

Please show me how I should do now to have the new structure!

Thanks
 

Ehren

Administrator
Staff member
Customer
Messages
4,564
Website
www.xenfocus.com
Hi @CVN

Your structure is technically fine too. Changing the structure at this point isn’t necessary.

When you need to upgrade your theme, simply overwrite the Pro theme at the very top and your two child themes should inherit the changes automatically :)
 
  • Like
Reactions: CVN

Ehren

Administrator
Staff member
Customer
Messages
4,564
Website
www.xenfocus.com
@Ehren, thanks! But when I want to apply a custumisation to both the dark and light themes, I will have to make 2 changes to the styles. Is that right?
If you apply the code change to "Bright theme", all themes below it (Dark theme) will automatically inherit the code change, ASSUMING you haven't previously modified the code in the dark theme.
 

David Svensson

New Member
Customer
Messages
20
Is there a way to check the version of the style?
I THINK I upgraded and did everything correct, but I realised I don't know how to check that I run the latest version of Dimension (Pro). ☺️
Site is: https://snackajakt.se

Also, something messed up the placement of the new thread button.
Would love for it to go back to the right side alignment ☺️
Screen Shot 2020-10-02 at 12.58.48.png
 

David Svensson

New Member
Customer
Messages
20
Can't figure it out.
Something broke when I updated the style.

Is it possible to get some help where to start looking? First this alignment to the right of the whole forum list...
The "new thread" button I also want to get back to the right again.

Also, the forum title gets linked to Google Chrome browser download for some reason... I have _not_ linked this.
Screen Shot 2020-10-02 at 14.17.24.png
 
Last edited:
Top