Style updates A look at our 2.2 updates

With RC2 being released today, 2.2 stable should be just around the corner. The goal is to release our 2.2 RC2 versions of the styles this week and I wanted to touch base with you all about them.

Style archives
We'll be officially supporting XenForo 2's brand new style archive setup. This means you'll be able to download the zip from our site and import the entire zip using the new style importer. You'll no longer need to ever really access FTP to install/update a style.

Image assets
With XF2.2, they've introduced the ability to upload images in the style properties. This is extremely handy to change your logo and other images around the site:
Screenshot_27.png


We've gone ahead and made sure that we support this option in our existing properties along with some new stuff! For example, in the past when using our backstretch script you'd need to upload the images to your server first, and then define the path. Now you'll be able to switch them on the fly using the new upload feature.

Screenshot_28.png


You can also now easily insert a logo into a footer block of your choice:

Screenshot_29.png


(yes we've added support for a 5th footer block in this update!)

We've also added 5 new "custom image assets" you can utilize around the style. Sometimes folks may want to use an image on a custom div that has no property and before you'd need to upload it via FTP, now you can utilize our custom image asset properties.

Screenshot_30.png


Now in your extra.less, you could do something like this:

Code:
.node .block-header { background: url(@xf-xbImageAsset1) no-repeat right center #000; }

Again, the point of these is to avoid FTP interaction and utilize anywhere in the templates. These properties can be found under Style properties -> Custom settings

Template clean-up
I mentioned this last month, but a big focus of 2.2 releases was to clean up the styles as much as I can. To put it simply, our styles had too many templates edited for features that I'd say the majority weren't using. In our 2.1 versions, we had around 15 core templates edited which caused some headaches when it came to updates. With our 2.2 versions, we're narrowed that down to 5 templates which should help a lot with upgrades! I'll be posting a "things you might miss" with instructions on replacing a few of the things that were taken out.

Update assistance
I'm a sucker for good customer service. Seeing as this may turn out to be a somewhat complicated update due to the new archive style support and image upload ability, if you run into trouble just submit a ticket and I gladly assist as much as I can. Assuming you're on a recent version of our styles and haven't modified the templates heavily, it should be a fairly straightforward and free service to assist in upgrading the style.

Some final tidbits
PAGE_CONTAINER
: To remove an edit from a default XF template, we've moved our xb.less call from app.less to PAGE_CONTAINER. This means if PAGE_CONTAINER is not updated when you upgrade, the style will more than likely not look correct. If you don't have PAGE_CONTAINER edited, then you won't need to worry. If you do, make sure you update the template!

Style switch icon: I switched the naming values on this property to adhere to a normal standard. Sadly, if the property was customized in the past it would have caused the entire style to break because XenForo does not update the values if a property is customized. I felt the best approach was to simply create a brand new property. I've also added a few more icons to use on the switch in this process!

Thank you all, be on the lookout for style updates later this week!
 
I really dig the addition of uploading custom assets. I’ll make a lot of use of that.

Should xb.less be at the top or bottom of PAGE_CONTAINER? What is the actual difference of adding it to one of those templates vs the other (aside from you guys dropping an extra template edit)?
 
The way we include it, XF combines it into a single output with all the other CSS.
I really dig the addition of uploading custom assets. I’ll make a lot of use of that.

Should xb.less be at the top or bottom of PAGE_CONTAINER? What is the actual difference of adding it to one of those templates vs the other (aside from you guys dropping an extra template edit)?

Doesn't really matter, we have our include at the top near some of our other template includes though. The way LESS templates are included using the default XF include bundles it all together.
 
The way we include it, XF combines it into a single output with all the other CSS.


Doesn't really matter, we have our include at the top near some of our other template includes though. The way LESS templates are included using the default XF include bundles it all together.
Gotcha. I thought included CSS listens to whatever comes first. Just me being a noob and reading a lot of online guides lately.
 
Gotcha. I thought included CSS listens to whatever comes first. Just me being a noob and reading a lot of online guides lately.

Normally yes, if you used a call like this which is referencing an external style sheet, it would be inserted wherever you use this line:

Code:
<link rel="stylesheet" href="styles.css">


But with XF, you call "css templates":
Code:
<xf:css src="templatename.less" />

Which get bundled into a single stylesheet.
 
Normally yes, if you used a call like this which is referencing an external style sheet, it would be inserted wherever you use this line:

Code:
<link rel="stylesheet" href="styles.css">


But with XF, you call "css templates":
Code:
<xf:css src="templatename.less" />

Which get bundled into a single stylesheet.
In my own style that I've been practicing on, I have {{ include('sixlxvi_main.less') }} in extra.less because I figured it does the same as if it were in PAGE_CONTAINER (it does). But is {{ include('sixlxvi_main.less') }} any different than <xf:css src="sixlxvi_main.less" />?
 
It's essentially the same. We can't edit extra.less on a framework level as that's ideally reserved for client edits.
 
I mentioned this last month, but a big focus of 2.2 releases was to clean up the styles as much as I can. To put it simply, our styles had too many templates edited for features that I'd say the majority weren't using. In our 2.1 versions, we had around 15 core templates edited which caused some headaches when it came to updates. With our 2.2 versions, we're narrowed that down to 5 templates which should help a lot with upgrades! I'll be posting a "things you might miss" with instructions on replacing a few of the things that were taken out.

I can't tell you how happy I am to hear this. Your adherence to the KISS principle is what sets you apart from the other style developers who seem to want to include every imaginable feature.
 
Will the 2.2 styles include the functionality for automatically changing from dark<->light mode based on user's device setting?
(Apologies if this is already a feature, can't see it listed within Products descriptions)
 
Upgraded smoothly to the latest version of evolve, been loving it (y)
If someone had their forum fully mix up, revert page_container or xb_sidebar.less and everything SHOULD be fine.
Remember to backup your custom changes to them if you have done any.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back