Customization
In-built Demos (Skins)
Highdmin comes with multiple demos. I.e. 'vertical', 'horizontal'. 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
and app-dark.min
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/default
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.
In-built Layouts
Highdmin provides multiple choices when it comes to layouting. There
are multiple layout choices available. I.e. Vertical
(main navigation on "Left") and Horizontal (main navigation on
"Top"). You can easily use any of them by simply
changing the few partials and using data attributes on
body
element.
Check out the pages
layouts-horizontal.html
files available in folder
src/html/
or dist/
to see how the
respective layout can be activated.
Customizing Color Mode, Left Sidebar, Topbar, Layout Width and Right Sidebar
Highdmin 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. 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 |
---|---|---|---|
mode |
String | 'light' | 'dark' | Changes overall color scheme to light or dark |
width
|
String | 'fluid' | 'boxed' | Changes the width of overall layout to fluid or boxed |
menuPosition
|
String | "fixed" | "scrollable" | Sets the menu position. Scrollable would makes both the menus scrollable with body element. |
sidebar
|
Object |
{
"color": "light" | "dark" | "brand" | "gradient", "size": "default" | "condensed" | "compact", "showuser": true | false } |
The left sidebar related configuration. It's nested object. The color can be set to "light", "dark", "brand" or "gradient". The size would allow to change the size of sidebar to condensed (coompact) or even more small by setting "compact".The showuser , if set to true , would display a user in left sidebar |
showRightSidebarOnPageLoad
|
Boolean | true | false | Indicates whether to show right sidebar on opening up the page |
Following are few examples:
-
Changes the left sidebar theme to "Dark"
<body class="loading" data-layout='{"sidebar": { "color": "dark"}}'></body>
-
Changes the left sidebar theme to "Light (White)"
<body class="loading" data-layout='{"sidebar": {"color": "light"}}'></body>
-
Sets the menus (left sidebar and topbar) scrollable with body
<body class="loading" data-layout='{"menuPosition": true}'></body>
-
Changes the left sidebar size to small
<body class="loading" data-layout='{"sidebar": {"size": "compact"}}'></body>
-
Changes the topbar color to light (white)
<body class="loading" data-layout='{"topbar": {"color": "light"}}'></body>
-
Changes the overall color mode to dark
<body class="loading" data-layout='{"mode": "dark"}'></body>
Adding new page
We have provided a starter page (check
src/html/pages-starter.html
). It allows you to get
started easily and helps you to add new page. Please note
following important points:
- Make sure you have included
css/bootstrap.min.css
,css/app.min.css, css/icons.min.css
,js/vendor.min.js
andjs/app.min.js
in your html.
If you would like to have dark mode, make sure to include thecss/app-dark.min.css
.
- Most of default/basic form elements along with few advanced elements are available and bundled in above css and js and so you don't need to include any css or js separately.
- Few elements e.g. charts, data tables, calendar, maps etc requires you to include corresponding css and js files in your html. Please check corresponding documentation page for the same.