Layout Settings

Clean UI HTML Admin Template layout configuration overview

The template has some classes which are activated by adding certain classes to the body tag. Replace {} with the theme prefix.

Class

Applies to

Used for

{}__sidebar--toggled

body

Toggles Sidebar

{}__menuLeft--toggled

body

Toggels Left Menu

{}__menuLeft--mobileToggled

body

Toggels Left Menu (Mobile Viewport)

{}__menuLeft--unfixed

body

Makes Left Menu unfixed

{}__menuLeft--shadow

body

Adds shadow to Left Menu

{}__menuLeft--gray

body

Left Menu in gray colors

{}__menuLeft--dark

body

Left Menu in dark colors

{}__menuTop--gray

body

Top Menu in gray colors

{}__menuTop--dark

body

Top Menu in dark colors

{}__menuTop--mobileToggled

body

Toggels Top Menu (Mobile Viewport)

{}__auth--gray

body

Auth pages gray background

{}__auth--img

body

Auth pages with bg image

{}__topbar--fixed

body

Fixed Topbar

{}__topbar--gray

body

Gray Topbar

{}__layout--contentMaxWidth

body

Adds max-width to content area

{}__layout--appMaxWidth

body

Add max-width to app

{}__layout--grayBackground

body

App gray background

{}__layout--squaredBorders

body

Squared card borders

{}__layout--borderless

body

Borderless cards

etc...

‚Äč

This list changes from theme to theme

Example

This will configure the compact horizontal menu on top with the fixed width of content-area

<body class="{}__layout--cardsShadow {}__layout--grayBackground {}__menuLeft--toggled">