Layout & Skins

Xenon Theme layout can be combined in many variants with sidebar and horizontal menu and offers a set of toggles (links) to manipulate with the theme layout. These features are made available via Angular Directives in directives.js

Layout Options are saved in Cookies in Angular Version and to activate them you need to put just one line in Main Controller: $layout.loadOptionsFromCookies();


Go to Layout Variants Go to Theme Skins

Layout Toggles
Links that will automatically collapse or expand side panels, chat or user settings pane.


Link
Code
Toggle Sidebar
<a href="" ng-click="sidebarToggle()">Toggle Sidebar</a>
Toggle Chat
<a href="" ng-click="chatToggle()">Toggle Chat</a>
Toggle Settings Pane
<a href="" ng-click="settingsPaneToggle()">Toggle Settings Pane</a>
Settings Pane /w Animation
<a href="" ng-click="settingsPaneToggle(true)">Toggle Settings Pane</a>
Go to Top
<a href="" rel="go-top">Go to Top</a>


Layout Generator
Build your preferred layout with the options below:

Sidebar

* Requires refresh

Horizontal Menu

* Requires refresh

Other Settings



Theme Skins
Select your preferred skin and components to apply it:

Sidebar Skin
Horizontal Menu Skin
User Info Navbar Skin

* Not applied when horizontal menu is visible