1. SmartAdmin
  2. Theme Settings
  3. Layout Options

Theme Settings: Layout Options Over 36 layout possibilities and over 285 combinations

Settings Panel
You can reset the changes at anytime by clicking the reset button found in the settings panel. To enable these settings through scripts, e.g. initApp.pushSettings("header-function-fixed, nav-function-fixed"), see the saving to database page.

Fixed Header

GLOBAL
header is in a fixed position at all times, effecting mobile & desktop view
JavaScript
layouts.fixedHeader('on') or ('off')
Class to body
.header-function-fixed
App Usage
data-action="toggle" data-class="header-function-fixed"

Fixed Navigation

DESKTOP TABLETS
Left panel position becomes fixed, activates custom scroll plugin
JavaScript
layouts.fixedNavigation('on') or ('off')
Class to body
.nav-function-fixed
App Usage
data-action="toggle" data-class="nav-function-fixed"

Minify Navigation

DESKTOP TABLETS
Navigation text are collapsed. Only visible portion are the icons. Hover the icons to reveal any child elements
JavaScript
layouts.minifyNavigation('on') or ('off')
Class to body
.nav-function-minify
App Usage
data-action="toggle" data-class="nav-function-minify"

Hide Navigation

DESKTOP TABLETS
Navigation is revealed upon user hovering the visible portion of the navigation
JavaScript
layouts.hideNavigation('on') or ('off')
Class to body
.nav-function-hidden
App Usage
data-action="toggle" data-class="nav-function-hidden"

Top Navigation

DESKTOP TABLETS
Main navigation shifts to the top (horizontal nav)
JavaScript
layouts.horizontalNavigation('on') or ('off')
Class to body
.nav-function-top
App Usage
data-action="toggle" data-class="nav-function-top"

Boxed Layout

DESKTOP
Contain layout to 1200px max width. Some classes are not compatible with this setting
JavaScript
layouts.boxed('on') or ('off')
Class to body
.mod-main-boxed
App Usage
data-action="toggle" data-class="mod-main-boxed"

Push Content

MOBILE
Content panel pushed on menu reveal
JavaScript
layouts.pushContent('on') or ('off')
Class to body
.nav-mobile-push
App Usage
data-action="toggle" data-class="nav-mobile-push"

No Overlay

MOBILE
Removes mesh on menu reveal
JavaScript
layouts.overlay('on') or ('off')
Class to body
.nav-mobile-no-overlay
App Usage
data-action="toggle" data-class="nav-mobile-no-overlay"

Off Canvasbeta

MOBILE
Content overlaps menu
JavaScript
layouts.offCanvas('on') or ('off')
Class to body
.nav-mobile-slide-out
App Usage
data-action="toggle" data-class="nav-mobile-slide-out"

Bigger Font

GLOBAL
Fonts are bigger for readability
JavaScript
layouts.bigFonts('on') or ('off')
Class to body
.mod-bigger-font
App Usage
data-action="toggle" data-class="mod-bigger-font"

Contrast Text (WCAG 2 AA)

GLOBAL
4.5:1 text contrast ratio to meet WCAG 2 AA standards
JavaScript
layouts.highContrast('on') or ('off')
Class to body
.mod-high-contrast
App Usage
data-action="toggle" data-class="mod-high-contrast"

Daltonism beta

Color vision deficiency (this is a progressive UI option)
JavaScript
layouts.colorblind('on') or ('off')
Class to body
.mod-color-blind
App Usage
data-action="toggle" data-class="mod-color-blind"

Preloader Inside

GLOBAL
Preloader will be inside content
JavaScript
layouts.preloadInside('on') or ('off')
Class to body
.mod-pace-custom
App Usage
data-action="toggle" data-class="mod-pace-custom"

Clean Page Background

GLOBAL
A white background for your webapp
JavaScript
layouts.cleanBackground('on') or ('off')
Class to body
.mod-clean-page-bg
App Usage
data-action="toggle" data-class="mod-clean-page-bg"

Hide Navigation Icons

GLOBAL
Hides navigation icons for a slick and clean look (some classes will be incompatible)
JavaScript
layouts.hideNavIcons('on') or ('off')
Class to body
.mod-hide-nav-icons
App Usage
data-action="toggle" data-class="mod-hide-nav-icons"

Disable CSS Animation

GLOBAL
Disables css based animations
JavaScript
layouts.noAnimation('on') or ('off')
Class to body
.mod-disable-animation
App Usage
data-action="toggle" data-class="mod-disable-animation"

Hide Info Card

GLOBAL
Hides info card from left panel
JavaScript
layouts.hideInfoCard('on') or ('off')
Class to body
.mod-hide-info-card
App Usage
data-action="toggle" data-class="mod-hide-info-card"

Lean Subheader

GLOBAL
Distinguished page header
JavaScript
layouts.leanSubheader('on') or ('off')
Class to body
.mod-lean-subheader
App Usage
data-action="toggle" data-class="mod-lean-subheader"

Hierarchical Navigation

GLOBAL
Clear breakdown of nav links (some options will be incompatble)
JavaScript
layouts.hierarchicalNav('on') or ('off')
Class to body
.mod-nav-link
App Usage
data-action="toggle" data-class="mod-nav-link"

RTL Support

GLOBAL
"Right to Left" layout support for, arabic, hibrew, etc...

To use the RTL feature, you can either enable it by attaching the *-rtl.css or recompiling the build after anabling the rtl:true