2.1.8 Style Updates

[l3ta]

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.

 

[Russ]

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 : 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:

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!

 

[Russ]

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?

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 )

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.

Ya, I liked the slightly larger width of the page, glad you're back to normal now!

 

[MjF]

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.

 

[Russ]

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

Fixed - Page nav missing from mobile

In an effort to make some improvements on the page navigation (1, 2, 3 NEXT), I created a "bug". XF hides the top page nav by default in mobile, our styles normally show them, add this CSS to your extra.less to show them again. @media (max-width: @xf-responsiveNarrow) {...

pixelexit.com

 

[MjF]

Whoops...

Ahhh, I didn't imagine it then, that's good!

 

[Mendalla]

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.

 

[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:

a.offCanvasMenu-link:before

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

#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/

 

[Russ]

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):

.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); }

 

[Davey]

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.

 

[Russ]

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.

 

[DeXTeR]

Everything runs very smooth with the new update, just a hitch with the Notice system

 

[thomas1]

Hi @Russ,

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

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

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

 

[Russ]

Hi @Russ,

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

.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):

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

Replace with:

<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:

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

 

[thomas1]

Thank you, Russ!

 

[djbaxter]

Support ticket submitted referencing the above posts.

 

[Oakley Forum]

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?

 

[Russ]

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:

Fixed - Page nav missing from mobile

In an effort to make some improvements on the page navigation (1, 2, 3 NEXT), I created a "bug". XF hides the top page nav by default in mobile, our styles normally show them, add this CSS to your extra.less to show them again. @media (max-width: @xf-responsiveNarrow) {...

pixelexit.com

Sorry

 

[dinhphucv]

@Russ I'm using FA+, what are differences between the child and the regular xml?

 

[Dave]

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