1. SmartAdmin
  2. Theme Settings
  3. Layout Options

Theme Settings: Layout OptionsOver 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 databasepage.

Fixed Header

GLOBAL
header is in a fixed position at all times, effecting mobile & desktop view
Class to body
.header-function-fixed
App Usage
data-action="toggle" data-class="header-function-fixed"

Fixed Navigation

DESKTOPTABLETS
Left panel position becomes fixed, activates custom scroll plugin
Class to body
.nav-function-fixed
App Usage
data-action="toggle" data-class="nav-function-fixed"

Minify Navigation

DESKTOPTABLETS
Navigation text are collapsed. Only visible portion are the icons. Hover the icons to reveal any child elements
Class to body
.nav-function-minify
App Usage
data-action="toggle" data-class="nav-function-minify"

Hide Navigation

DESKTOPTABLETS
Navigation is revealed upon user hovering the visible portion of the navigation
Class to body
.nav-function-hidden
App Usage
data-action="toggle" data-class="nav-function-hidden"

Top Navigation

DESKTOPTABLETS
Main navigation shifts to the top (horizontal nav)
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
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
Class to body
.nav-mobile-push
App Usage
data-action="toggle" data-class="nav-mobile-push"

No Overlay

MOBILE
Removes mesh on menu reveal
Class to body
.nav-mobile-no-overlay
App Usage
data-action="toggle" data-class="nav-mobile-no-overlay"

Off Canvasbeta

MOBILE
Content overlaps menu
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
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
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)
Class to body
.mod-color-blind
App Usage
data-action="toggle" data-class="mod-color-blind"

Preloader Inside

GLOBAL
Preloader will be inside content
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
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)
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
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
Class to body
.mod-hide-info-card
App Usage
data-action="toggle" data-class="mod-hide-info-card"

Lean Subheader

GLOBAL
Distinguished page header
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)
Class to body
.mod-nav-link
App Usage
data-action="toggle" data-class="mod-nav-link"

RTL Support (coming soon)

GLOBAL
"Right to Left" layout support for, arabic, hibrew, etc...
Class to body
.theme-rtl
App Usage
data-action="toggle" data-class="theme-rtl"