In-built Demos (Skins) and Layouts
In your desired layout blade file, simply pass the demo name
while including head-css. E.g. in resources/views/layouts/vertical.blade.php, search for line @include('layouts.shared/head-css').
You can simply change it to @include('layouts.shared/head-css', ["demo" => "creative"]) to have creative demo (skin).
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
resources/scss/config/<DEMO_NAME> and
change any variable in it. Your changes would get reflected
automatically in any bootstrap based components or elements.
Make sure that yarn dev is runnning, which compiles on file change and reloads.
In-built Layouts
Konrix provides multiple choices when it comes to layouting. There
are multiple layout choices available. I.e. Vertical
(main navigation on "Left"), Horizontal (main navigation on
"Top"), Detached (main navigation on "Left" side but part of
main content area) and Two-Column (main navigation on left but in two columns). You can easily use any of them by simply
changing the few partials and using data attributes on
html tag.
Check out the pages
rosources/views/layouts-eg/compact.blade.php,
rosources/views/layouts-eg/hidden-view.blade.php,
rosources/views/layouts-eg/hover-view.blade.php,
rosources/views/layouts-eg/icon-view.blade.php, and
rosources/views/layouts-eg/mobile-view.blade.php, and
rosources/views/layouts/vertical.blade.php, files available in
folder to see how the respective layout can be activated.
Customizing Color Mode, Left Sidebar, Topbar, Layout Width and Right Sidebar
Konrix 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-*={}) on html
element in your blade.php. The config object properties accept the
following values:
| Title | Type | Options | Description |
|---|---|---|---|
data-mode |
String | "light" | "dark" | Changes overall color scheme to dark |
dir |
String | "ltr" | "rtl" | Changes Layout direction |
data-layout-width |
String | "fluid" | "boxed" | Changes the width of overall layout |
data-topbar-color |
String | "light" | "dark" | "brand" | "gradient" | Changes the Topbar color scheme. |
data-menu-color |
String | "light" | "dark" | "brand" | "gradient" | Changes the left sidebar color scheme. |
data-sidenav-view |
String | "default" | "md" | "sm" | "hover" | "hover-active" | "mobile" | "hidden" | Changes the left sidebar size changes to small (condensed) |
data-layout-position |
String | "fixed" | "scrollable" | Layout Position |
Adding new page/route
We have provided a starter page (check
resources/views/pages/starter.blade.php). It allows you to get
started easily and helps you to add new page. Simply copy this page and rename it to new one.