Layouts & Theme
Classes related to layouts
This section covers the documentation about the classes which builds the layout or could be used to customize the layout as per your need.
The following classes could be applied to <body> tag to achieve the desired layout for your project:
1
/* Layout Related Classes
2
-------------------------------- */
3
/* Below is a unique class for default layout. For other layouts,
4
you can replace default (after --) with the name of those layouts.
5
for example .dt-layout--crm */
6
.dt-layout--default
7
8
9
10
/* Sidebar Related Classes (Only for layouts with sidebar)
11
-------------------------------- */
12
/* To fix the sidebar */
13
.dt-sidebar--fixed
14
15
/* To make the sidebar folded */
16
.dt-sidebar--folded
17
18
/* To expend the sidebar
19
(Drift uses this on on-hover event when the sidebar is in folded mode) */
20
.dt-sidebar--expended
21
22
23
24
/* Header Related Classes (Only for default layouts)
25
-------------------------------- */
26
/* To fix the header */
27
.dt-header--fixed
28
29
30
31
/* Framing Related Classes
32
--------------------------------- */
33
/* To make the framing fluid */
34
.dt-layout--full-width
35
36
/* To make the framing covered from all four sides */
37
.dt-layout--framed
38
39
/* To make the framing in boxed style (or fixed width) */
40
.dt-layout--boxed
41
42
43
44
/* Theme Related Classes (only for default layout)
45
---------------------------------- */
46
/* To apply the semi-dark theme */
47
.theme-semidark
48
49
/* To apply the light theme */
50
.theme-light
51
52
/* To apply the dark theme */
53
.theme-dark
Copied!
The following classes are related to the layouts with drawer and will be applied to sidebar:
1
/* to convert the sidebar into drawer */
2
.dt-drawer
3
4
/* To switch the drawer position either right or left */
5
.position-right
6
.position-left
Copied!
Last modified 1yr ago
Copy link