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
Click to expand...
Some key features of the update

I talked about some of the items in a post back in February which you can find here. I'll reiterate some points and add some new items now. One big change to post that is that I've pulled the Dark Mode from this release, sadly. As testing went on I realized the feature would require a ton of support for all the various setups and it's just not ready for release at this time. I'm not one to put in a feature that will be broken for the majority of users out there.

Clean-up and add-on compatibility
I've always strived to make our styles flexible yet stick to the core fundamentals of XenForo. The more features we add, the less compatible they become with third-party plugins. While I will always be willing to help debug provide a fix for conflicts if I can, the goal in this update was to potentially help prevent those conflicts from happening in the first place. I mentioned the template PAGE_CONTAINER being cleaned up, here's another example of before/after. Red is where we've changed/modified the default XenForo code, green is simply new code being added. Ideally, the less red the better.

oldnewpost (1).png


To be clear, I've done this in every template I can without breaking our custom functionality.

Sticky components
The 2.1.8 release allows you to now stick the staff bar with you as you scroll down the screen. You can enable sticky staff bar by going to: Style properties -> Header and navigation and checking the "Sticky staff tools bar". Additionally, I've completely re-approached our sticky sidebar. Before we use using a partially built-in XenForo function to achieve it. We've switched to a CSS position: sticky approach that is widely compatible across most browsers. With this change we've added the ability for you to stick specific individual blocks, this is quite useful for sites who may want the share block or an ad to scroll with the user.

stickysidebar.png


Complete notice revamp
Notices in XenForo have always struggled in terms of making them easily compatible with each individual style. With this update, we've released a new set of properties to help customize your notices even further.
Welcome notice: First up in regards to our custom Welcome notice, we've added properties to allow you to make them even more appealing than ever. The following properties can be found under Style properties -> Notices:
  • Welcome notice layout (Centered/Left-aligned/Split Apart)
  • Welcome notice background (Pre-defined transparent patterns to attach to your welcome notice)
Screenshot_8.png

Default notices: Each notice style such as Primary, Accent, Dark, Light, and Custom now have properties that can be found in Style properties -> Notices. You can change the background and text color as the click of a color wheel now for each type of notice.

Cookie and push notice: The notice that appears at the bottom of the site used for things such as the cookies and push notifications can now be set to your desired notice type. You can use Primary, Accent, Dark, Light, and Custom which inherit from the default notices as mentioned above.

Various moveable elements
One popular request over the years has been the ability to move certain elements around, specifically in regards to the title and breadcrumb area. Now, you can easily control where your title and breadcrumb go where it's extending out above the content and the sidebar or cutting off at the sidebar. Depending on your site, this can make for a nice unique look!

The properties can be found under Style properties -> Miscellaneous
Screenshot_7.png


Screenshot_5.png



Search bar changes
With this release, we've adjusted the way the search functions when in certain positions. It now works closer to how the original XF1 search bar was in that clicking on it will activate the entire menu. Previously the UI was a little confusing to some due to the advanced search fields being available in a dropdown that had to be clicked first. This only activates while in the Header/Sub-navigation. Speaking of the sub-navigation, you can now easily place the search thereby setting it under Style properties -> Header and navigation -> Search location:

Screenshot_6.png


Some of the larger style-specific changes
  • Evolve
    • Color adjustments made around the site for increased usability
    • All color schemes now ship out as optional child styles, if you only plan on using a single color this is useful as the color palette will function across all of the style properties
  • Omni
    • Stretch nav now working properly
    • All color schemes now ship out as optional child styles, if you only plan on using a single color this is useful as the color palette will function across all of the style properties
  • Fusion Gamer
    • Primary font-family changed from Montserrat to Ubuntu, you can change this back if you'd like by going to Style properties -> Typography
    • Button colors adjusted for better visibility
  • XenBase
    • Dark style now included for free
 
dethfire said:
Is this safe for custom skins?
Click to expand...

I would follow the "Upgrading your style" instructions in the first post. If you've edited PAGE_CONTAINER at all the style will be broken if you don't update it properly and sadly PAGE_CONTAINER changed a lot in this template. It shouldn't happen again as the changes were meant to help future updates and add-on compatibility.

As mentioned too, I can help for free. Sometimes it takes me 1-2 minutes to process an update like this since I know what to look for. Just submit a ticket with an admin login for this.
 
How to correctly import dark theme with XenBase? Should I import it under XenBase or I need to create another parent theme for the dark version?
 
chojo said:
How to correctly import dark theme with XenBase? Should I import it under XenBase or I need to create another parent theme for the dark version?
Click to expand...

It would help if I actually included those new instructions :rolleyes: .

If you plan on running the dark style by itself and not the light style just import the Dark XML from the /xml/ folder. Then create a child from that and edit the child.

If you want to run both and you already have XB installed, just import the Dark XML from "customchilds" as a CHILD of your light child style.

I hope that makes sense. I'll work on clearer instructions for our docs here shortly.
 
I'm completely confused. The only template for me to change is the PAGE_CONTAINER but I have to merge it by hand. I've got a ton of red and green and can't wrap my head around what they mean, even though you've explained that red means "altered" and green means "added."

I reverted that template on my child theme that I imported under the new parent so that I could add my customizations back. But I'm also looking at a comparison from before I reverted, and the reverted version appears to not contain the lines I'd expect.

For instance, I have this line:
<div class="p-header-logo p-header-logo--image">

And directly below it is this line:
<div class="p-header-logo p-header-logo--{{ property('xbLogoType') == 'text' ? 'textlogo' : 'image' }}">

I would think the green line is what I want to see in the "reverted version" because it has your xenbase stuff in it. But I'm actually seeing the red line instead. It's the opposite of what I'd expect.

Have I screwed myself up here or am I misunderstanding? I just need to add a few lines of HTML and add some icons back in.
 
@goobernacular I wouldn't recommend merging by hand for the PAGE_CONTAINER template with this update. Did you import the new version as a brand new version to test it out first?

Viewing custom changes when you have already upgraded your parent style for this version is rather difficult in the PAGE_CONTAINER template. I'd recommend installing the old version of your style, view custom changes as if you're viewing before the update. Seeing it pre-update can help see what changes you've made.

Again, I'll help for free on this update if you need it, just submit a ticket.

Regarding your specific example, that's another thing we actually removed. It served just as an extra class. We reverted to the default XF line so it wouldn't cause any issues.
 
Russ said:
Seeing it pre-update can help see what changes you've made.
Click to expand...

Yeah, this is what I'm doing. I had opened the comparison window and kept it open in another tab.

I'll keep working through this. I'm starting to understand it. I just have to find where the macro name="default-footer" went, etc.

How much of this new stuff is optional? Like the icons in the sidebar widgets, I'd like to remove those. And the "new" icon that appears on the homepage forum list, that's redundant since the icons themselves light up when there's a new post. I really want to keep things as similar to the previous version as possible. The minimal design was very appealing.
 
All optional.

Style properties -> Sidebar -> Sidebar FA icons

Style properties -> Node/forum list -> New node title indicator

Look for:
Code: 
<xf:macro name="default-footer" global="true">
 
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?
 
The Sticky Sidebar is still beating me... If you create an ad position within Appearance>Widgets, it doesn't get called inside a div tag and no data-widget-key is present. Add it in within the Setup>Advertising section and the same issue is present. Manually add a data-widget-key within the ad div, it doesn't stick.
 
woody said:
The Sticky Sidebar is still beating me... If you create an ad position within Appearance>Widgets, it doesn't get called inside a div tag and no data-widget-key is present. Add it in within the Setup>Advertising section and the same issue is present. Manually add a data-widget-key within the ad div, it doesn't stick.
Click to expand...

It's a recommendation I've made to add a class on HTML widgets:

xenforo.com

Implemented - HTML Widget -> widget_data($widget)

Template: widget_html It seems like the HTML widget is the only widget without: {{ widget_data($widget) }} on the level, not sure if it's intentional but it would be nice to have the additional data-attributes to target specific html widgets.
xenforo.com xenforo.com

You could check the "advanced mode" and use this as your HTML:

Code: 
<div class="block custom-widget">
    <div class="block-container">
        <h3 class="block-minorHeader">Optional title</h3>
        <div class="block-body block-row">
        Content here
        </div>
    </div>
</div>

Then for the sticky sidebar widget, use the class .custom-widget, and make sure you check the Stick specific div (define below) option.
 
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
 
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.
 
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