In-built Demos (Skins)
Ubold comes with multiple demos (skins). I.e. 'creative', 'default', 'material', 'modern', 'purple', 'saas'. Each of these skins are having respective dark mode available as well. You can easily use any of them by simply changing the css file reference in your html file.
In your html file, simply change the reference of
app.min.css with
respective demo (skin) css file and you would have it activated.
Customizing Color Palette
You can change the color palatte of any demo very easily by simply changing the few scss variables value.
In order to modify the colors in existing
themes, open the _variables.scss file from
src/assets/scss/config/<DEMO_NAME> and
change any variable in it. Your changes would get reflected
automatically in any bootstrap based components or elements.
Note that, this requires you to setup and run gulp flow
provided in installation steps earlier.
Customizing Color Mode, Left Sidebar, Topbar, Layout Width and Right Sidebar
Ubold allows you to have customized left sidebar, overall layout width or right sidebar. You could turn the left sidebar to different size, theme (look) and size.
Please do the below change in the html element at dist/{demo}/Views/Shared/_Layout.cshtml file. You can customize it by
specifying the layout data attribute (data-layout={}) on body
element in your html. The config object properties accept the
following values:
| Title | Type | Options | Description |
|---|---|---|---|
data-layout-mode |
String | "default" | "horizontal" | "detached" | "two-column" | Changes overall layout mode |
data-theme |
String | "dark" | "light" | Changes overall color scheme to dark |
data-layout-width |
String | "fluid" | "boxed" | Changes the width of overall layout |
data-leftbar-color |
String | "light" | "dark" | "brand" | "gradient" | the left sidebar color scheme. By default, it would be set to default (light) |
data-leftbar-size |
String | "fixed" | "condensed" | "scrollable" | If set to true, the left sidebar size changes to small (condensed) |
data-leftbar-user |
Boolean | true | false | Indicates whether to show right sidebar on opening up the page |
data-topbar-color |
String | "dark" | "light" | Changes topbar color scheme to dark or light |
Following are few examples:
Changes the left sidebar theme to "dark"
<body data-leftbar-color="dark"></body>Changes the left sidebar theme to "light"
<body data-leftbar-color="light"></body>Changes the left sidebar to scrollable
<body data-leftbar-compact-mode="scrollable"></body>Changes the left sidebar size to small
<body data-leftbar-compact-mode="condensed"></body>
RTL Version
In order to have RTL enabled with light version,
Update the below css file links in the dist/{demo}/Views/Shared/_Layout.cshtml file. replace the reference of
bootstrap.min.css and app.min.css to bootstrap-rtl.min.css and app-rtl.min.css