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:
lightdark2.png


lightdark1.png



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.

1718268900533.png


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.
mobilebar.jpg


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.
1718271210994.png



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:
    1718272393329.png


    Bolt on 2.3
    1718272414549.png



    More examples of bad link coloring for Bolt 2.2:
    1718272437368.png


    Bolt on 2.3:
    1718272450991.png




    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:
    Code: 
       .m-faBase();
   .m-faContent("\f27a");
    will no longer work, new approach:
    Code: 
     .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)
 
Style specific changes

Style specific changes​

  • Core
    • paletteAccent1 changed to a grey tone, orange is now just pulled from paletteAccent2
  • Apex
    • We've completed a color overhaul for Apex with the 2.3. It was originally setup incorrectly, defined as "light style" according to XenForo color palette, this is now adjusted. We've taken the time to adjust the colors to follow the general standard practices of our style framework.
    • Switched button colors for UX purposes (Cancel is no longer the focus versus Save as an example)
    • Top bar disabled by default
  • Bolt
    • Removed "boltNodeIconGradient" with XenForo's new way of Font Awesome icon processing, I don't see a way to keep this
    • Header/footer background images removed

Attachments

  • bolt1-before.png
    bolt1-before.png
    22 KB · Views: 19
Last edited:
Click to expand...
Upgrading from 2.2 to 2.3
Upgrading is the same procedure as before. You'll want to follow these directions: https://pixelexit.com/documentation/upgrading/
PAGE_CONTAINER was updated a lot so if that template shows as outdated, it might be best to revert it and re-apply any edits you have.

To enable the dark version, you may need to go to Appearance -> Styles -> Click your style and enable the "Enable variations" option.
1719343339126.png
 
Last edited:
Our current RC4 version of the styles work on 2.3 Stable with no outdated templates. I have a few small bugs I've fixed that I'll release next week to bring the version current. I'm off for the holiday, be back on Monday.

Happy July 4th!
 
Also this code no more working on extra.less

Code: 
/* Navigation icons */
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="imagehost"]:before { content: "\f093"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="snog_forms_nav"]:before { content: "\f0fe"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="dbtechShop"]:before { content: "\f217"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="addonFlarePubAwards"]:before { content: "\f091"; }
 
Nirjonadda said:
Also this code no more working on extra.less

Code: 
/* Navigation icons */
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="imagehost"]:before { content: "\f093"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="snog_forms_nav"]:before { content: "\f0fe"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="dbtechShop"]:before { content: "\f217"; }
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="addonFlarePubAwards"]:before { content: "\f091"; }
Click to expand...

Look under the "Some Key Notes ", with the new approach by XenForo, those codes will no longer work. You'll need to change any FA icons set like that to something like this:

Code: 
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="imagehost"]:before { .m-faContent(@fa-var-upload); }

You can use this to search the unicodes and replace the values.
fontawesome.com

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.
fontawesome.com fontawesome.com
 
Nirjonadda said:
@Russ Do we need delete Drak style after Update style? I have still 2 style after upgraded and does not removed 2nd style.

View attachment 14105
Click to expand...

It's not an automatic removal, you'll need to enable style variations on your dominant style (whichever one is live), from there you can disable the Flat Dark. Keep a note of any edits you did on the dark style (some people have a different logo for dark as an example).
 
@Russ Bug footer on Mobile browser. Footer blocks does not showing correctly on Mobile browser. That should be show in line and not taking lot of space for scrolling.

Screenshot_20240709_165559_Firefox.jpg


Xenforo showing correctly.

Screenshot_20240709_165618_Firefox.jpg
 
They'll all be built on XenBase. While there are some new features I'd love to see implemented into the framework, you can only do so much without turning it into an add-on. Styles alone have their limit. Supporting mass styles on multiple frameworks is not something I'd be interested in doing.

XenBase is in a good state at the moment. Easy to customize, easy to upgrade, most XenForo updates you don't even have to do anything. I am in discussion with an add-on developer for a "XenBase Essentials" add-on that would be an optional separate add-on to add some functionality, but that's still very early.

My focus at the moment:
  • Get through this initial 2.3 upgrade business
  • Launch the new support/help desk
  • Launch the new styles
 
Last edited:
You must log in or register to reply here.

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.

View our stylesBrowse all our XenForo styles
DocumentationEssential information for our styles
Back