2.3 Style Releases (beta)

We're excited to announce that our styles are now ready for XenForo 2.3! Sometime tomorrow, you'll receive an email when the update is ready or download. Our goal is to ensure that your upgrade process is as smooth as possible. While most of you will find these updates painless, please take extra caution when upgrading to 2.3. We highly recommend installing the upgrade on a test site before applying it to your production site (2.3 is still in RC as of this post and isn't ready for production).

Let's dive into the key changes and new features:

Style variations (light/dark mode)​

XenForo 2.3 introduces "style variations," allowing for a built-in dark mode that adapts to the user's system preference (light/dark). This changes our approach to the style structure for light and dark modes.

Old approach:
For 2.2, if you were running a light/dark style, it might look like one of the following setups:

New approach:

• We will no longer ship separate styles for light and dark modes.
• You will now run a single style that can switch between light and dark variations based on the user's preference.

With 2.3 you'll only run a single style as the dark mode is built-in.

Not all styles will have an alternate variation. For these styles, the user will not see the style variation dropdown. The following styles will not have a "light" mode:

• Omni
• Fusion Gamer
• Evolve
• Blackened Pro
• Apex

All other styles will have variations. All new styles should have style variations in the future.

We've added a new property "xbStyleVariationHeaderLink" Style variation dropdown in header which adds the style preference in the header next to the alert/search icons.

New mobile bar​

All styles will now have access to our new mobile bar feature.

Each button at the bottom is completely configurable. The bar is intended for logged-in users, so at the moment it does not show to guests. You can arrange the buttons however you'd like. We have an option to disable the primary navigation element if you enable it on the mobile bar (so the Account icon wouldn't display twice.

You can use our Custom Button 1/2/3 to setup custom links. An example link has been provided in those templates.

Notable changes​

• Primary Link Color Property: To improve visibility, we’ve added a primary link color property. For example, Bolt’s links are now more distinguishable from regular text.
  
  Bolt on 2.2:
  
  
  
  
  Bolt on 2.3
  
  
  
  
  
  More examples of bad link coloring for Bolt 2.2:
  
  
  
  
  Bolt on 2.3:
  
  
  
  
  
  
  As of right now, the link colors are as follows for most styles:
  • Forum Node titles + Thread List titles = Primary link color
    • There's a new property called Primary link classes (xbPrimaryLinkClasses) under Style properties -> Page setup. You can add additional classes here so they inherit the primary link color + the primary link color hover.
  • Message links = User-generated content link color
  • All other links = Link color
• REM Support- Going forward, our new styles will all use REM font sizing. With this update, we chose not to update existing styles to REM from px font sizing because it could simply change too much for some communities without a lot of tweaks from you. Further documentation will be created to update your existing styles although it's an easy task to do so now. REM font sizing makes it easier to achieve various things such as
  • Global font changes are various screen widths
  • Easily enable a custom user field to have your users make the font sizes smaller/larger globally

Some Key Notes​

• Old FA codes such as:

     .m-faBase();
     .m-faContent("\f27a");

  will no longer work, new approach:

   .m-faContent(@fa-var-arrow-right);

• The old .style-dark class will no longer work. Instead, the CSS should be: [data-color-scheme="dark"] &
• Deleted "sources" asset location - In the end you really only need stylefolder as it can link to anywhere in the style folder
• Cancel buttons no longer use a primary button color but instead the "button link" which much more subtle.
• Deleted Backstretch (outdated library)

 

[woody]

FYI, I'm seeing both the Logo URL and the Mobile Logo when viewing on a mobile device. (CORE style)

 

[Russ]

Hi there, i am wondering about how to move Username and user title above avatar? Is there any easy way to do it?
Thanks.

FYI, I'm seeing both the Logo URL and the Mobile Logo when viewing on a mobile device. (CORE style)

I'll be back Monday to respond. Just wanted to touch base (on a short vacation)!

 

[Russ]

FYI, I'm seeing both the Logo URL and the Mobile Logo when viewing on a mobile device. (CORE style)

I'm back...

I can't seem to replicate this. Do you mind submitting a ticket so I can take a closer look?

 

[dmx07]

Good job man keep it up.

 

[WoodiE]

REM Support- Going forward, our new styles will all use REM font sizing.

Just checking in, have any new styles been released? Or has this been scrapped?

 

[Russ]

Just checking in, have any new styles been released? Or has this been scrapped?

New styles are definitely on my mind, but most of my time right now is dedicated to custom projects since that’s the most sustainable side of the business. I realize that’s not the answer you were hoping for, but that’s where things stand at the moment.