Style XenBase Framework - pixelExit.com

[Russ]

​

I figured it was time to officially talk about our XenBase Framework(only after a year of it being out or so ) and have a dedicated place on XenForo to give updates, discussion and other talk regarding it. Currently all of our premium styles by pixelexit.com are powered via the Framework.

What is XenBase


Simply put... XenBase is just that, it's a base, a foundation. We've basically taken the default XenForo style and added a bunch of useful options which allows us to build styles with lots of options fast... and allows you to customize the styles further.

One of the most powerful things XenForo offers is the easy styling system, between the style properties and templates it's just great to work with. With that said we strongly feel it is missing some important things which we feel we've nailed and then some with XenBase.

Why our XenBase Framework


By using our Framework with our premium styles it helps out in a few ways:

• Keep costs down since we're not recoding the same features over and over
• Ability to push out updates much faster(we update XenBase it trickles down to our premium styles with minimum edits to do on them)
  • Looking at our track history we've pushed out updates for our styles since we opened just about the day of a stable release or the day after, we plan to continue that
• Gives you plenty of options to change the layout of the style to make your style stand out even further
• Any options you don't utilize it simply won't load the related js/html/css
• We keep it clean... we tie into existing XenForo CSS with some of our style properties to avoid any duplicate CSS. The bulk of our CSS is in a very... very... neatly laid out template

Features


This list can vary depending on your version of the framework, but I'll do my best to keep it at the latest up-to-date version of XenBase. I'm mainly mentioning some of the larger functions in the framework, I won't bore you with a full list . Please keep in mind... just about everything on this list is optional, I can't stress that enough, by default we try to ship with most of these things off.

• General XenBase Properties
  • Font Awesome Integration
    • On a lot of our styles we utilize Font Awesome for added effects
    • Node Icons can easily be configured as Font Awesome Icons allowing for easy color and size changing(no image such as node-sprite.png)
  • Google Fonts Integration
    • Easily add in multiple fonts to use across the style(@xb_webfont_primary)
    • Currently able to add in 3 different google fonts
  • Backstretch integration(ability to stretch a background image for all resolutions and loads it after your content has loaded)
  • Built-in Go-To-Button
• Header and Navigation Properties
  • Floating Moderator Bar
  • Floating Navigation
    • Option to float nav + sub nav, or nav alone, works with floating moderator bar
  • Extend Navigation(makes it so your navigation bar extends the full page but keeps the links are your desired page width)
  • Swap Navigation and Logo
  • Add Help link back in the main navigation
  • Move user links into the moderator bar
  • Ability to add in Sign in or Register in the navigation
  • Ability to make the login an overlay rather than the drop-down
• Sidebar Properties
  • Collapsible Sidebar
    • Has cookies to save your users preference
  • StickyMoJo integration(primarily meant for short sidebars, makes it so the sidebar scrolls with you as you scroll down)
  • Social logins below the sign up now button(google/facebook/twitter/plus others using the default hook such as steam login)
• Breadcrumb options
  • Shift breadcrumb outside the mainContent(shifts the breadcrumb above the sidebar rather than to the left of it)
  • Shift call-to-action button out of breadcrumb into the title area
  • Easily add in your own links or font awesome icon in replacement of the default Quick Navigation icon
• Forum / Node List properties
  • Multiple layouts(regular, dual column, dual column minimal, and "old school")
  • Category description as tooltip
  • Collapsible categories with cookies to save your users preference
  • Category footers with go-to-top as well(can add a nice effect on some styles)
• Node properties
  • Alternating node properties
  • "NEW" indicator with style properties to customize it
  • "Global Node CSS" - allows you to style the nodes different than it automatically inheriting primaryContent
• Discussion List properties
  • Alternating discussion list items properties
  • Separate Sticky + Normal
  • Make your sticky, locked, and unread stand out with unique properties
• Message Layout
  • Avatar size adjustment, set a value of s, m(default) or l
  • Alternating message properties
  • Show Admin Post indicator
  • Show Reply to Thread button(XF has this just comments it out by default, we give you the option)
• Quick Search Style Properties
  • XenForo provides no properties by default for the Quick Search, we've simply tied into the search_bar.css and added in style properties so you can edit them like other areas
  • Search helper, can add in an image/link easily into the search bar
  • Location values: move into navigation template, default, or disable

• Footer properties

• Four different layouts for our footer
• Easy to edit custom links and descriptions

If you're interested in our styles... or a current owner of one of our styles please feel free to "Watch" this thread. I'll be posting updates and answer any questions that might arise. This post has been long overdue(just been too darn busy!).

Any comments... suggestions... ideas... complaints... bugs feel free to post them here.
You can view our demo board here
Find our official website here

 

[Russ]

Part of our next update to XenBase rolling out to all of our styles will include:

Our "magical breadcrumb adjuster"
Before we would spend a decent amount of time on each style adjusting the breadcrumb heights and arrows. We've completely simplified the process with just two style properties allowing you to make it taller or shorter, and adjust the arrow angles:



Would result as:



Then if you adjust the Arrow Variable to say 7 the result would be this:


(lowing the value lowers the angle, increasing makes a larger angle)


Sticky Sidebar
Should be used in conjunction with shorter sidebars, and probably no floating navigation, but this can add a really neat effect to your style. This is added via the script StickyMojo

 

[Russ]

Part #2 of our XenBase Update rolling out shortly:

To compliment our "magical breadcrumb" we've made it easier to adjust the PageNav. By default XenForo adds a width adjustor, we've simply included a height adjustor now for easy styling.



Would result in this:





Also this is currently inside of XenBase except it rolled out with a few bugs. We think we've nailed all of the bugs down, and here are some of the layouts that ship out with all of our styles.

Dual Column Minimum

Dual Column Extended



"Old School Layout"

 

[Dakis]

Looking great Russ!

 

[drastic]

i like the dual column extended!

 

[Russ]

Rolling out 1.3.1 XenBase today to all our styles(using this post for reference on all of our style releases.

• Sticky Sidebar
• Easy Breadcrumb adjustor
• Page Nav height adjustor
• Forum Node layouts fixed!!!
• Updated backstretch
• Removed a few outdated style properties(missed on the 1.3 update)
• Removed some excessive quick-search properties
  
• Re-organized header and navigation XenBase properties
• Added option to make entire link a drop down(remove the arrow)
• Added option to remove the sub-nav making all drop-downs
• Fixed Go-To-Top mobile view

 

[Russ]

Been awhile since I've posted here , our next version of XenBase 1.3.3.0 so far:

Fixed

• Login Overlay styling when enabled

Added

• New Go to Top & Bottom Buttons now available
• Go to Top and Go to Bottom mobile properties for styling in responsive view
• New color palette (xbPrimaryContent)
• Moderator Bar Font Awesome Replacement Optional
• Redactor Editor Images Replaced by Font Awesome Optional

Removed

• xbSocialSlider Template
• xb_member_card.css Template - No longer used since 1.3.0
• Go to Top button properties and CSS

Updated

• Font Awesome - 4.1.0

Regarding the editor it's a single box to toggle on now, and all your icons will be replaced using Font Awesome. http://xenforo.com/community/resources/replace-editor-icons-with-font-awesome.3260/

It's done the proper way in the framework too so it removes the background-images/positions from even loading in the CSS if it's enabled.

Also here's a snapshot of the optional font awesome icons in the mod bar:



We'll have a few other updates soon


Should note as part of our revamp on pixelexit.com we've launched our Resource Manager over there to give you guys some tutorials specific to XenBase, some pretty nifty ones on there already and we're open to suggestions .

 

[Adam Howard]

@Russ XenBase would make a cool add-on. I know it comes with your styles, but I'd like to know if XenBase can with with other style (particularly those which are only the stock with color changes).

I'm assuming from the screenshot the answer is, yes. But figured I'd ask. And do you you have plans to release this on its own?

 

[Russ]

@Russ XenBase would make a cool add-on. I know it comes with your styles, but I'd like to know if XenBase can with with other style (particularly those which are only the stock with color changes).

I'm assuming from the screenshot the answer is, yes. But figured I'd ask. And do you you have plans to release this on its own?

Technically you can import your style as a child of XenBase and you should get access to most of the features. Depending on how complex your style is it could cause/break certain things, which you'd just have to go in and revert/re-apply.

Currently the only template that is "complicated" is the navigation template, only because we have a ton of options specific to it.

Rest of the templates are laid out pretty neat .

We've thought about releasing it on it's own, but it's a sticky situation, specifically pricing of it by itself compared to our other styles.

 

[Adam Howard]

@Russ so how would it fair in the XenForo default style? Because essentially, most of my styles are just the default with color changes.

Although I do use 2 of your styles (XENDISCONNECT and Casual).

 

[Russ]

@Russ so how would it fair in the XenForo default style? Because essentially, most of my styles are just the default with color changes.

Although I do use 2 of your styles (XENDISCONNECT and Casual).

If there's no template edits and no major CSS changes it should function pretty well. I say this loosely of course as I can't guarantee it working out of the box but in theory it should work just fine

 

[Russ]

Little update coming in addition to the things reported here

We've added an additional login form, completely optional:





And this next will make it easy for everyone to customize the styles further.




We're working on adjusting the font sizing across the style so you can increase the font size in several ways:

• Adjust the body font size(default 11px) increasing it by 1 px would increase all the font sizes accordingly
• Adjust the properties we give you, can increase/decrease the % or even change them to set font sizes

Also all of the styles will get updated with the border radius option(it's in xenbase currently but hasn't been officially rolled out to all of the styles.

Lastly since this has been so popular, we've implemented this into the framework with a simple check of a box:




Anyways more to come

 

[Russ]

1.3.4 Update

Fixed

• Login Overlay styling fixed!
  
• Dual Column Nodes adjusted(minimal and expanded) force sub-forums in a drop down and description in tool tip fixed!
  
• Sticky separator and alt discussion list fixed!
  
• Disable sub-menu with user bar enabled fixed!
• Help tab works with all options fixed!

Added

• New Go to Top & Bottom Buttons now available
• New color palette (xbPrimaryContent)
• New login form(optional)
• New global font sizing
• xb_tooltip template
• Widen Style(gives it a fluid look with a fixed content area)
• Font Awesome MessageUserInfo Icons(optional)
• Replace editor icons with Font Awesome
• Ability to switch sidebar to left side
• QuickSearch as a navigation tab
• Stretch only Advanced Footer

Removed

• xbSocialSlider Template
• xb_member_card.css Template - No longer used since 1.3.0
• Go to Top button properties and CSS(old version)

Updated

• Font Awesome - 4.1.0
• [XB] General changed name to : [XB] General Setup
• Updated Backstretch to 2.0.4
• navigation/editor_ui.css/public.css (outdated templates)

 

[Barbossa]

Pretty awesome.

 

[nodle]

Little update coming in addition to the things reported here

We've added an additional login form, completely optional:

View attachment 77324



And this next will make it easy for everyone to customize the styles further.

View attachment 77325


We're working on adjusting the font sizing across the style so you can increase the font size in several ways:

• Adjust the body font size(default 11px) increasing it by 1 px would increase all the font sizes accordingly
• Adjust the properties we give you, can increase/decrease the % or even change them to set font sizes

Also all of the styles will get updated with the border radius option(it's in xenbase currently but hasn't been officially rolled out to all of the styles.

Lastly since this has been so popular, we've implemented this into the framework with a simple check of a box:

View attachment 77326


Anyways more to come

Are these features included in the latest versions of the skins? Just checking.

 

[Russ]

Are these features included in the latest versions of the skins? Just checking.

Yep except the font sizes need a good run through which will be in the next update.

 

[Russ]

Been too long since I've updated this .

With the 1.4 stable version approaching soon we'll be launching our updated XenBase with some cool things .

This is just a preview of a few new things and not the entire list yet.


Improved "Alternate Login", we had this in our existing XenBase version however we came across an annoying bug on with it so we ended up recoding the entire thing. In that we styled it a little differently as well(has properties for you to change the background/link/buttons ).



Ability to add a little text to the sign-up-now button(it's a small change but I really like it). You can put whatever text you want here:



AddThis integration, easily add your AddThis code to our property and enjoy the benefits .


Node Colors, we've included a really easy way for you to distinguish nodes with various colors. Currently we have the ability to setup 5 different categories. You can do this on a per-category basis or if you want your "News" node to have a completely different color you could do that as well.






Finally(for this preview) we've included by default a fantastic way of de-cluttering mobile view in the post controls. We've released this as a free resource but this is inside XenBase as of the next update, it's so simple but awesome .


A complete change-log will be provided once we launch the update .

 

[Russ]

This is a somewhat(very past due ) complete change-log for the 1.4 update to our XenForo styles.

https://pixelexit.com/threads/1-4-1-xenbase-update.1251/

 

[Russ]

A new change log for 1.4.3 updates we're pushing out the course of today and tomorrow:

https://pixelexit.com/threads/1-4-3-change-log.1572/

Biggest new feature is we've brought back the social icons except made them a little more "global" you could say. Previously we used them only in the footer, now you can really position them anywhere you want.

 

[Russ]

It's been awhile since an update so...

In 1.4.4 one of the bigger changes is a complete redo of our footer system. Previously we had set footer layouts where you could go in and do basic editing. We've gotten rid of the layouts completely and now you have total control over them using the new setup. Tutorials will come shortly following the release but now you can set each blocks width/disable certain columns and re-arrange things easily.

Here are some examples I whipped up really quick(super easy!)




The footer area supports a maximum of 4 columns, and you can go down to even a single row with no columns if you wanted too. One of my favorite parts is you can easily add widgets using the Widget Framework


On top of that we also have some new post layouts that are shipping out with all of the styles.
Optional horizontal postbit(can disable/enable the message elements like normal)


"Modernized" layout, it's the one we use on our official site, quite popular so we stuck it in for all the styles .




Another note... we've made improvements so the Font Awesome Message User Info. Previously you could only use 3 with this setting(Messages/Likes/Trophies). We've since re-worked it a tiny bit, there's still no easy way of getting every message element to show up condensed like the others but this is our little fix for it:

Normal with just the default 3 enabled:


Now if you enable anymore it will take the default form but use font awesome(optional).

Of course you can disable the boxes and have just:


Or the regular phrases:



Past these features we've made a lot of nice smaller additions, improvements and various fixes.

Email notifications will be going out when the styles are fully updated and ready to be downloaded.