Style updates 2.1.8 Style Updates

Hello everyone, we're pushing our 2.1.8 updates out today. Once you receive the email you'll be able to download it immediately with an active license via your purchase area.

This is an extremely large update that may break your style depending on the extent of your customizations. For this reason, I'm recommending a slightly different upgrade process over our usual approach. Please read below to view the upgrade instructions.

Before Upgrading
As always, backup your current styles before importing the new version. Backing up is simply exporting your current styles before upgrading. Check out our documentation on how to backup your style if you have further questions.

Installation instructions
Full details for how to install the style can be seen in our Documentation.

Upgrading your style
For this specific upgrade, the official recommendation is to do as follows:
1.) Download and extract the update package from the license area.
2.) Import the style XML as a brand new style, do not overwrite your existing parent style.
3.) Export your current child style that's live on your site, and import under the brand new version you imported in step 3.
4.) Check for any discrepancies by switching to the new style. If you see no outstanding issues you can either remove the old styles or import the new updated style from the download package and overwrite the current parent style.

Upgrade assistance (free)
Need professional upgrade assistance? For this specific update and assuming you're on one of our latest versions of our styles, we're offering a free update service for any active license. If you've already updated your XenForo software to the latest version (2.1.8 Patch 2 as of this post) simply submit a ticket with an admin login that has appearance access and we'll process the update.

Troubleshooting
If you've updated your style and your site appears to be incorrect in any way please do submit a ticket and we can help as fast as possible. Normally if something is off right after an update it's usually down to an outdated template issue.

Ran into issues? Please create a ticket and we'll respond to you as quickly as we can.

Found a bug? Let us squash it, submit a bug report.
 
New
  • New "Stick specific div" under sticky sidebar option. This allows you to easily define a class of a block such as a widget to stick just that in the sidebar.
  • New Sidebar off-canvas option. Now in mobile, you have the option to load in the sidebar content via a toggle switch
  • Notices are completely reworked with more customization options. Easily adjust all notices in Style properties -> Notices
  • Added style switch link to the off-canvas menu
  • New search location: sub-navigation, this obviously won't work if you disable the sub-navigation
  • New Welcome notice layout (Centered text/Left-aligned/Split apart)
  • New Welcome notice background images
  • New Sticky staff bar option
  • New HTML level classes: "style-light" and "style-dark" you can use to style when the color palette is set to light/dark.
  • New ability to move top breadcrumb within the main content area (cut off at sidebar)
  • New ability to move page title and call-to-action buttons within the main content area (cut off at sidebar)
  • New "customScrollJumpButtons" helper
  • New option to change the off-canvas menu (Style properties -> Miscellaneous -> Off-canvas style)
  • New option to reduce the padding in mobile, useful for styles that use larger than normal padding (Style properties -> Borders and spacing)
  • New font families added to Custom Fonts dropdown (Style properties -> Typography)
Changes
  • Removed style property "xbSidebarSpacer" as it wasn't being used
  • Re-approached the entire sticky sidebar setup, uses pure CSS not instead of loading additional JS
  • Overlays now inherit content background instead of the page background
  • Footer list CSS will now only target lists with the "footerList" class
  • Changed the background of 'badgeHighlighted' to inherit @xf-paletteAccent3 which is primarily used for alert colors
  • The text-based logo will now inherit the header background-color
  • Removed bottom border on the arrow when sticky and FA icons above are enabled
  • Added .p-sidebar .block-header's into the custom typography classes
  • All styles now inherit the input field background color from the Basic colors property
  • Cookie notices will no longer have text coloring issues
  • Node helper text (Option to show custom CSS for custom icons) should be easier to view now
  • Sidebar position - Disabled is now removed. I had good intentions behind this but you should really control the content of the sidebar using the widgets (removing the locations they're displayed).
  • Removed Welcome Notice sidebar position, this should really be handled by the widget system by calling our xb_welcome template in an HTML widget.
  • Re-designed sidebar login form to look cleaner and colors will now look better on every style
  • Removed "Stretch sub-navigation only" option - This just doesn't look good in almost any scenario
  • Removed Block body "xbBlockBody" - This class is in too many places to really do anything with
  • Re-approached the search function when it's displayed a full input field. Now expands upon clicking it rather than having to use the icon. Additionally, it's far easier to style now
  • NEW indicator re-approached to use pure CSS instead of inserting HTML. Same style property
  • Login + Register page links now use underlines to make them more prominent
  • Button hover actually works now, will target most of the primary buttons
  • Made some adjustments to the debug styling
  • Increased page default page width from 1200px to 1300px
  • Welcome notice CSS will now only load when it's in use
  • Dual column nodes inherit default XF padding now instead of hardcoded values.
  • Moved toggle sidebar down to the footer links where the other toggle setting (page width) is.
  • Framework's custom sidebar CSS will now only load on pages with sidebars
  • Sidebar login CSS will now only load when the block is loaded
  • Class name: ForumStyleClassic changed to layout-classic
  • Class name: ForumStyleBoxed changed to layout-boxed
  • Class name: ForumStyleDefault changed to layout-default
  • Class name: html.logged-in no longer used, XF has it by default:
    Code:
    html[data-logged-in="true"]
  • Class name: html.logged-out no longer used, XF has it by default:
    Code:
    html[data-logged-in="false"]
  • Highlight block inherits the normal "featured border size"
  • Removed: Body inner CSS property
  • Reverted "node_list.less" template edits and moved into respective templates
  • Moved xb_search into page_container as a macro for better compatibility
  • Re-styled breadcrumbs to match closer to XF's default look. This provided the content to be pushed up further even if by a little. You can achieve the old look by going to Style properties -> Page setup -> Breadcrumb removing the top and bottom line of the EXTRA box to get rid of the CSS comment.
Fixes
  • Footer position: copyright will now show even without any branding
  • Canvas setup no longer has extra spacing in mobile on top
  • Large message avatar had a few issues, now loading appropriate in all scenarios.
  • Default text-based avatars will now have the proper vertical alignment
  • When in the copyright location, footer links will now inherit the "Copyright block"
  • Topbar visitor links will no longer inherit navigation padding
  • The left sidebar will no longer above the content in mobile, will push to the bottom of content now
  • Message arrows will now inherit the background color if one is set from Style properties -> Messages -> Message block
  • Full-width box-shadow removed when the nav isn't stretched and is stickied
  • Navigation icons will now transfer over to the off-canvas menu
  • Discord "block" setting was not showing a background-color
  • When visitor tabs are in the top bar, the additional search parameters now correctly show
  • Added a workaround for an Edge bug while using the canvas page layout in RTL mode
  • Breadcrumb arrows will now inherit the color of the breadcrumb property
  • Page assets mobile view corrected in certain areas
  • Now when there is no "Custom Font Targets" set, the style will not break
  • NEW indicator now works on all nodes, would not work previously on specific node-setups
  • Removed extra border when using the "Node spacers" option
  • Removed specific links in Off-canvas to avoid duplicate links e.g. "Your Content / Your Media" would link to the same area
  • Top bar CSS will now only load if it's enabled
  • * Symbol was always showing when the discussion list icons were enabled (meant you had posts in that thread)
  • Message user icons now extend to custom user fields
Upgrade went smoothly. Those of you using TH Nodes might want to reset the default page width back to 1200px. otherwise, you'll end up with 3 rows of nodes. (y)
 
I'm confused about the Xenbase update. I thought Xenbase was incoprorated into individual PixelExit styles quite some time ago.

I'll be updating Font Awesome +.

Do I also need to update Xenbase? That doesn't currently even exist in current Font Awesome installations.

Short answer:
To directly answer your question, for Flat Awesome + or other styles you don't need to update any sort of XenBase at all, it's all included.

Longer answer:
In XF1 we named the framework XenBase and shipped it out with all styles as its own XML. With XF2 I wanted to approach things differently to make install/upgrades much easier.

So in XF2, we've built a framework that's included in all of our styles. That framework is technically called "XenBase Framework". The screenshots I've shown above are from a style called "XenBase". All of our styles ship with the features I've mentioned with no need to install any additional framework.

For even more boring details :D: I get asked every so often about the option "Export as independent style" and I always tell users to never check that box. When we build styles on our development board we actually use that option to ship the styles out. It looks sort of like this:


Screenshot_12.png


All big changes that go inside every style are technically built under "XenBase 2 - Master". When we go to export say Omni (Parent DO NOT EDIT), we use the "Export as independent style" which basically keeps all of Omni's custom changes and includes all functionality from the XenBase 2 - Master framework.

I hope that clears some things up!
 
This update is awesome. I can’t wait to start testing it tomorrow morning. Knowing me, what are the chances I find some bugs for you? :devil:

Side note: I didn’t realize this was my username here (don’t recall making it this). Could I please have it switched to sixlxvi?

Thank you, I put in a lot of hard work on this update! You probably will find some bugs, my brain tends to shut down at times. Over the past 8 years of doing this my two biggest mistakes were:

  • Accidentally removed the login bar in an XF1 release (was patched within 20 minutes) WHOOPS!
  • One funny one, I shipped out Omni with pink header text which I apparently used to debug something (was patched quickly too :D )
Changed your name!




Turns out I just needed a few minutes... ;)

Always good to hear :), I hate the idea of updates being a pain for my clients.


Upgrade went smoothly. Those of you using TH Nodes might want to reset the default page width back to 1200px. otherwise, you'll end up with 3 rows of nodes. (y)

Ya, I liked the slightly larger width of the page, glad you're back to normal now!
 
Always good to hear :), I hate the idea of updates being a pain for my clients.

They've always been flawless for me, thanks :)

Just working out how to get the upper pagination to show in mobile view at the top of threads :), sure it used to.
 
They've always been flawless for me, thanks :)

Just working out how to get the upper pagination to show in mobile view at the top of threads :), sure it used to.
Whoops...

 
Got Flat Awesome+ 2.1.8 up in my dev board. No issues and I'm actually working on implementing the Welcome Notice, something we should have had a long time ago really. Probably do my live site in a day or two after I've fiddled a bit more. Good work, as always, @Russ.
 
Fantastic work Russ! :)

I've just updated and all went smoothly. I just have a question regarding the navigation icons.

I have the navigation icons disabled. However since updating they are now displaying in the mobile menu, is there somewhere to turn these off there as well?

I may actually make use of them in the future but noticed that the custom navigation links that I've created don't have any icons assigned, is it possible to assign them FA icons as well somewhere?

Thanks again!
Tim

Whoops... need to look into this. I may add a different option for it as I do like the icons in the off-canvas menu.

If you add this to your extra.less it'll hide the icons for now:

Code:
a.offCanvasMenu-link:before

You need to inspect the navigation item and find the nav id:

Code:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="forums"]:before {
    content: "\f086";
}

This is the code for forums. You can find the icons here: https://fontawesome.com/cheatsheet/
 
Just for reference, I removed the icons in the footer links (style chooser/change width/language) to reduce on specific edits. You can easily add them back in using this CSS (place inside extra.less):
Code:
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }
 
No bugs found upto now. Made a few edits and simplified the look of the Nova style a little. Seems to load quickly and like the new options.
One thing i would like to see is the top bar to have options to show for limited usergroups so it could be used for advertising upgrades etc. Can a conditional be wrapped around the container somehow?
See what you think of the changes HERE
Still a little bit of tweaking to do, but plenty of time at home at the minute.
Thanks for the updates.
 
No bugs found upto now. Made a few edits and simplified the look of the Nova style a little. Seems to load quickly and like the new options.
One thing i would like to see is the top bar to have options to show for limited usergroups so it could be used for advertising upgrades etc. Can a conditional be wrapped around the container somehow?
See what you think of the changes HERE
Still a little bit of tweaking to do, but plenty of time at home at the minute.
Thanks for the updates.
With this update you have the ability to use a template for the top bar. You can place conditionals there. To enable the template, style properties -> header and navigation then select the use top bar template. It'll use the template mentioned in the description which you can edit with custom conditionals.
 
Hi @Russ,

I used this in extra.less to display FA icons for subnodes:

CSS:
.subNodeLink.node--id3:before { content: "\f001" !important;}

This does not seem to be working anymore. Has this been affected by the update?
 
Hi @Russ,

I used this in extra.less to display FA icons for subnodes:

CSS:
.subNodeLink.node--id3:before { content: "\f001" !important;}

This does not seem to be working anymore. Has this been affected by the update?

So that would indicate the id is exposed on the sub-navigation link itself which it's not. I looked at our old version and that class name wasn't there either. Maybe you added the class manually?

To add it: template: node_list_forum

Find (line 27 as of this post):
Code:
<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>

Replace with:

Code:
<a href="{{ link('forums', $node) }}" class="subNodeLink node--id{$node.node_id} subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>

Then your CSS would work.

Alternately, if you're wanting to change ALL sub-forum icons in a specific node, it'd be:

Code:
.node--id3 .subNodeLink:before { content: "\f001" !important;}
 
Any way to add the page navigations for a thread back to the top of the screen for mobile? Noticed they're now gone after some members made a comment. Know there's the "Jump to unread" now but any option /way to add the page navigation to the top too?
 
Any way to add the page navigations for a thread back to the top of the screen for mobile? Noticed they're now gone after some members made a comment. Know there's the "Jump to unread" now but any option /way to add the page navigation to the top too?

Here you go:


Sorry :(
 
Hi @Russ ,

Carried out the update, but theres one part i'm struggling with. My side bar has now vanished. I've tried looking through the settings, but can't see anything that stands out to re-enable it.

Any help appreciated.

Thanks

Dave
 

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