2.2 Style updates (LESS IS MORE)

Russ

Pixel Exit Staff
Hello everyone, we're pushing our 2.2 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 a rather large update that I have nicknamed "LESS IS MORE". The concept behind these updates was to reduce some of the potential conflicts our styles have with plugins and outdated templates for future upgrades. We've removed some options and cleaned up templates as much as possible to allow for easier upgrades in the future. Over the years of developing styles, I've found that one of the biggest frustrations is outdated templates. While no matter what you do, depending on how complex your style is you may always have outdated templates but this update should help all around with that going forward. Ideally, you shouldn't really notice a difference in the overall appearance of your style. I've talked about some important points with these updates here and here.

Recommendation
Seeing as this is a large update, I'd strongly recommend upgrading your style on a test forum first. If you do not have a test forum and plan to work on your live site, I'd strongly recommend importing this as a brand new style. Your existing version of our styles should run fine on 2.2 (with a lot of outdated templates) while you test out the new version. After you've imported the new style, simply export your current style and import it under the new version.


Installing 2.2 styles
After you've backed up your styles ( See step 1 here: https://pixelexit.com/documentation/upgrading/) you can proceed with the installation. Going forward, you'll be able to download the zip from our store and import it directly into the admin panel. You'll no longer need to access FTP to process the install/upgrades. To install simply browse to Appearance -> Styles -> Click the import button and browse to the zip you've downloaded from our site.

NOTE: Our store is currently limited to how we can distribute the light/dark combos for 2.2. I'm working on upgrading our site with a new store that will allow me to distribute the alternate styles with the downloads. If you require the dark version of a style, please submit a ticket and I'll provide it for you.

Run 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
  • Added the xb_footer_links template to allow for easy insertion of custom links in the default footer (left of the contact link)
  • Added xb_notices.less to hold all custom notice CSS
  • New footer logo option to easily upload a logo in the footer (Style properties -> Footer -> Footer logo
  • New footer logo block option to place your uploaded logo in a specific block
  • New footer block 5 ability, easily configure a 5 block column setup
  • New node stats & last post width adjustments (Style properties -> Node/forum list -> Node stats width / Node last post width)
  • New custom asset style properties, you can utilize these to easily upload images to use in your style (Style properties -> Custom settings)
  • New upload support for all image fields (backstretch, mobile logo, images for styles, and many more areas)
Changes
  • Removed "Style folder" option under Style properties -> Basic options. With XF 2.2, they've introduced "style assets" which is similar.
  • Removed icon for style switcher in footer
  • Removed "Node helpers" option, while this was nice, it was causing four different templates to be edited solely for this purpose. Here are some alternatives
  • Reverted templates (removed our edits to avoid them being outdated in the future)
    • node_list_page
    • node_list_link_forum
    • node_list_forum
    • thread_list_macros
    • app.less
    • notices.less
  • Removed "node-extra--inner" from node_list_forum, this was the only other edit in this template that I did not feel worthy of having a customized template for. Currently, only one style was utilizing it (Core). If you want to add it back it, see our post below for "Things you might miss"
  • Removed "Avatar column" option from Style properties -> Discussion list. With the new node types, the various icons
  • Removed "Node stats icons option xbNodeStatsIcons
  • Removed xbThreadListLocked
  • Removed collapsing message elements in conversations: conversation_message_macros template it's a simple edit if you want to achieve that still.
  • Removed separator on the selected tab when the nav is sticky
  • Removed "Martel Sans" font, no italics are inside the font family which caused issues
  • Added CSS to set max-width on page width items to 100% when viewing on mobile. Previously if you had 90% as the page width, that would carry all the way down to a mobile device leaving an undesired gap on the sides.
  • Reverted to using default XF collapse icons on the nodes
  • Had to create a new property for the style switcher icon to avoid layout breaks with the new approach
  • Removed "Hide page title on forum list" - This was an option in our XF1 layout which worked well, but with XF2 it adds call-to-action buttons there leaving a large gap. It just doesn't really make sense. If you still want to hide the title even with the gap:
    Code:
    body[data-template="forum_list"]
    {
    .p-title-value
    {
    display: none;
    }
    .p-title-pageAction
    {
    margin-left: auto;
    }
    }
    Place inside extra.less
  • Removed "Responsive padding" - Styles have gone a rather extensive revamp when it comes to padding. Larger padding is now shown primarily on desktop displays with it reverting to the default XenForo paddings for smaller displays
  • Removed "Sub-navigation row inner" property as it served no purpose
  • Removed "Navigation row inner" property as it served no purpose
Fixes
  • Removed an underline effect happening on ratings in overlays
  • Removed our CSS that was removing the spacing in the navigation when the nav was set not to stretch
  • Footer stretch had extra padding some of the divs
  • Threadstarter is now properly hidden on the first post of the thread
Last edited:

Russ

Pixel Exit Staff
Potential problems on the 2.2 upgrade

Help! My logo is missing
With XenForo 2.2, they've added support to upload images directly in the admin panel. You can upload your logo here: Style properties -> Basic options. The reason behind it potentially missing is that we've removed our old "style folder" property which we used to set style folders. XF 2.2 includes assets which replaced this.

Help! My style looks like this:
Screenshot_6.png
This is an indication of an outdated PAGE_CONTAINER template. PAGE_CONTAINER changed significantly, I'd suggest reverting the template and re-applying any edits you may have had.

Help! My sidebar isn't showing
This is usually an indication of an outdated PAGE_CONTAINER or xb_sidebar.less template. Please revert those templates on your style to check if it's corrected the issue.

Help! I've lost all my custom changes
Our updates shouldn't really touch your edits assuming you're placing your edits inside a child style. Make sure all your edits are placed inside of a child style to preserve them on future upgrades. Please submit a ticket for further assistance.

Help! I have a ton of outdated templates
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.

Help! My custom navigation icons aren't showing
In the past, setting custom nav icons was a bit of a pain! I've changed the styles around to make it really easy to set a custom icon that will carry across the main nav, mobile nav, and the off-canvas nav. Here's a guide on setting the icons: https://pixelexit.com/pages/navigation-icons/
 
Last edited:

Russ

Pixel Exit Staff
Things you might miss (replacement for stuff removed)

Last post background-color

You'll need to edit: node_list_forum and place this div code in the areas shown in the screenshot.
Code:
<div class="node-extra--inner"></div>
Screenshot_8.png

from there you can add something like this to your extra.less:
Code:
.node-extra--inner { background: red; padding: 2px 5px; }


Remove page title on forum list
This was a property in XF1 but with XF2 it never really made sense as it leaves a gap since there are buttons there still. If you want to hide it still on the forum list, place this inside your extra.less

Code:
body[data-template="forum_list"]
{
.p-title-value
{
display: none;
}
.p-title-pageAction
{
margin-left: auto;
}
}

Node stat icons
To add in icons on your node stats, place this inside your extra.less:
Code:
.node-statsMeta, .node-stats
{
    dl:nth-of-type(1), dl:nth-of-type(2)
    {
        dt:before
        {
            .m-faBase();
            content: "\f086";
            vertical-align: middle;
            color: @xf-textColorMuted;
            display: inline-block;
            margin-right: 2px;
        }
    }
    dl:nth-of-type(2)
    {
        dt:before
        {
            content: "\f040";
        }
    }
}
 
Last edited:

Deepblue

Customer
Hello,

I am getting this error after upgrade, any idea?

Code:
ErrorException: Template error: Template public:editor_smilies is unknown src/XF/Template/Templater.php:663

#0 [internal function]: XF\Template\Templater->handleTemplateError(512, 'Template public...', '/home/vsroforum...', 663, Array)
#1 src/XF/Template/Templater.php(663): trigger_error('Template public...', 512)
#2 src/XF/Template/Templater.php(1575): XF\Template\Templater->getTemplateData('public', 'editor_smilies')
#3 src/XF/Template/Templater.php(1637): XF\Template\Templater->renderTemplate('editor_smilies', Array)
#4 internal_data/code_cache/templates/l2/s8/public/real_time_chat_macros.php(218): XF\Template\Templater->includeTemplate('public:editor_s...', Array)
#5 src/XF/Template/Templater.php(798): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#6 internal_data/code_cache/templates/l2/s8/public/real_time_chat.php(68): XF\Template\Templater->callMacro('real_time_chat_...', 'chat', Array, Array)
#7 src/XF/Template/Templater.php(1608): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#8 src/XF/Widget/WidgetRenderer.php(62): XF\Template\Templater->renderTemplate('real_time_chat', Array)
#9 src/XF/Widget/WidgetRenderer.php(67): XF\Widget\WidgetRenderer->render()
#10 src/XF/Template/Templater.php(1883): XF\Widget\WidgetRenderer->__toString()
#11 internal_data/code_cache/templates/l2/s8/public/forum_list.php(219): XF\Template\Templater->widgetPosition('forum_list_abov...', Array)
#12 src/XF/Template/Templater.php(1608): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#13 src/XF/Template/Template.php(24): XF\Template\Templater->renderTemplate('forum_list', Array)
#14 src/XF/Mvc/Renderer/Html.php(48): XF\Template\Template->render()
#15 src/XF/Mvc/Dispatcher.php(458): XF\Mvc\Renderer\Html->renderView('XF:Forum\\Listin...', 'public:forum_li...', Array)
#16 src/XF/Mvc/Dispatcher.php(440): XF\Mvc\Dispatcher->renderView(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#17 src/XF/Mvc/Dispatcher.php(400): XF\Mvc\Dispatcher->renderReply(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#18 src/XF/Mvc/Dispatcher.php(58): XF\Mvc\Dispatcher->render(Object(XF\Mvc\Reply\View), 'html')
#19 src/XF/App.php(2300): XF\Mvc\Dispatcher->run()
#20 src/XF.php(464): XF\App->run()
#21 index.php(20): XF::runApp('XF\\Pub\\App')
#22 {main}
 

Russ

Pixel Exit Staff
Hello,

I am getting this error after upgrade, any idea?

Code:
ErrorException: Template error: Template public:editor_smilies is unknown src/XF/Template/Templater.php:663

#0 [internal function]: XF\Template\Templater->handleTemplateError(512, 'Template public...', '/home/vsroforum...', 663, Array)
#1 src/XF/Template/Templater.php(663): trigger_error('Template public...', 512)
#2 src/XF/Template/Templater.php(1575): XF\Template\Templater->getTemplateData('public', 'editor_smilies')
#3 src/XF/Template/Templater.php(1637): XF\Template\Templater->renderTemplate('editor_smilies', Array)
#4 internal_data/code_cache/templates/l2/s8/public/real_time_chat_macros.php(218): XF\Template\Templater->includeTemplate('public:editor_s...', Array)
#5 src/XF/Template/Templater.php(798): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#6 internal_data/code_cache/templates/l2/s8/public/real_time_chat.php(68): XF\Template\Templater->callMacro('real_time_chat_...', 'chat', Array, Array)
#7 src/XF/Template/Templater.php(1608): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#8 src/XF/Widget/WidgetRenderer.php(62): XF\Template\Templater->renderTemplate('real_time_chat', Array)
#9 src/XF/Widget/WidgetRenderer.php(67): XF\Widget\WidgetRenderer->render()
#10 src/XF/Template/Templater.php(1883): XF\Widget\WidgetRenderer->__toString()
#11 internal_data/code_cache/templates/l2/s8/public/forum_list.php(219): XF\Template\Templater->widgetPosition('forum_list_abov...', Array)
#12 src/XF/Template/Templater.php(1608): XF\Template\Templater->{closure}(Object(XF\Template\Templater), Array, NULL)
#13 src/XF/Template/Template.php(24): XF\Template\Templater->renderTemplate('forum_list', Array)
#14 src/XF/Mvc/Renderer/Html.php(48): XF\Template\Template->render()
#15 src/XF/Mvc/Dispatcher.php(458): XF\Mvc\Renderer\Html->renderView('XF:Forum\\Listin...', 'public:forum_li...', Array)
#16 src/XF/Mvc/Dispatcher.php(440): XF\Mvc\Dispatcher->renderView(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#17 src/XF/Mvc/Dispatcher.php(400): XF\Mvc\Dispatcher->renderReply(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#18 src/XF/Mvc/Dispatcher.php(58): XF\Mvc\Dispatcher->render(Object(XF\Mvc\Reply\View), 'html')
#19 src/XF/App.php(2300): XF\Mvc\Dispatcher->run()
#20 src/XF.php(464): XF\App->run()
#21 index.php(20): XF::runApp('XF\\Pub\\App')
#22 {main}



Haven't seen that personally. If you want to submit a ticket with an admin login I can take a closer look. Everything it's mentioning so far has nothing to do with the style itself.

Do you have a chat plugin? It may require an update.
 

l3ta

Customer
Hi Russ,

When I try to upload the Omni zip file to Install/upgrade from archive, I get this :

Oops! We ran into some problems.
Could not process style-Omni-(Parent-DO-NOT-EDIT).zip: File does not appear to be a valid add-on archive as expected.

 

Russ

Pixel Exit Staff
Hi Russ,

When I try to upload the Omni zip file to Install/upgrade from archive, I get this :

Oops! We ran into some problems.
Could not process style-Omni-(Parent-DO-NOT-EDIT).zip: File does not appear to be a valid add-on archive as expected.


Can you re-download the Omni zip package from: https://pixelexit.com/products/purchases and try again.

If that doesn't work, please submit a ticket with a login and I'll take a look.
 

Russ

Pixel Exit Staff
@Deepblue probably an outdated template somewhere. If you submit a ticket with a login I can take a closer look. Sort of hard to guess from the screenshot though.
 

Jaidyn

Customer
I've been getting this every time I try to update Omni to 2.2 (My forum and official add-ons are 2.2):

Oops! We ran into some problems.
Line 787: Syntax error - Template modifications: public: PAGE_CONTAINER


At that point, it just won't proceed with the rest of the install. I tried the importer and the old method - both give me the same error/outcome.
 

Russ

Pixel Exit Staff
Omni seems to be having troubles!

Can you submit a ticket with an admin login and I'll take a look?
 

mrderanged

Customer
When backing up before upgrading, what's the difference between "Export as XML" and "Export as Archive" and which one should we use?
 

Russ

Pixel Exit Staff
When backing up before upgrading, what's the difference between "Export as XML" and "Export as Archive" and which one should we use?

Export as XML will only export the XML itself.

Export as Archive will bundle up the style XML and any image assets defined. With a fresh upgrade from 2.1 to a 2.2 style you won't have many assets define. All images were previously defined using our custom style path so it wouldn't necessarily be included.

Whatever you do, never check the "Export as independent style" button :).
 

dmx07

Customer
Hey Russ,

I am also getting

Line 801: Syntax error - Template modifications: public PAGE_CONTAINER
 

Jaidyn

Customer
Hey Russ,

I am also getting

Line 801: Syntax error - Template modifications: public PAGE_CONTAINER
For me, it was one of the mods that interfered with skin update. Specifically, it was Ozz's Social Groups, but it may be different for you.

P.S.
Russ is a miracle-worker.
 

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.