Layout & Themes
Customize Everything. Hyper-intuitive options to customize and change in real time every part of your website. Gives you control over the layout settings, header, footer, sidebars, pagination, single pages and lot more. Enable or Disable Hyper-V Enhanced Session in Windows 10. Otherwise, the display of your virtual machine will be configured automatically. To change DPI of a Hyper-V virtual machine, do the following. Turn off your virtual machine if it is running. Disable the Hyper-V Enhanced Session feature for this machine. Hyper is built using the latest tech and tools and provide an easy way to customize anything, including an overall color schemes, layout, etc. Built with latest Bootstrap Extensive use of SCSS variables.
In-built Demos (Skins)
![Hyper change themes Hyper change themes](https://bbts1.azureedge.net/images/p/full/2017/01/3a4b3919-7284-44e1-b541-1a8427b705a9.jpg)
Hyper Change Theme Background
Hyper comes with three demos (skins). I.e. Saas (Default), Modern and Creative. 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.
![Theme Theme](https://user-images.githubusercontent.com/7979907/39376406-e3ee0bf6-4a51-11e8-93ea-57565c61d198.png)
Hyper Terminal Themes
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.In-built Layouts
Hyper provides multiple choices when it comes to layouting. There are three different layout choices available. I.e. Vertical (main navigation on 'Left'), Horizontal (main navigation on 'Top') and Detached (main navigation on 'Left' side but part of main content area). 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
and layouts-detached.html
files available in folder src/saas/
or dist/sass/
to see how the respective layout can be activated.Customizing Left Sidebar, Layout Width and Right Sidebar
Hyper 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 type. You can customize it by specifying the layout config data attribute on
body
Sigma optimization pro. element in your html. The config object properties accept the following values:Title | Type | Options | Description |
---|---|---|---|
darkMode | Boolean | true | false | Changes overall color scheme to dark |
layoutBoxed | Boolean | true | false | Changes the width of overall layout |
leftSideBarTheme | String | 'default' | 'light' | 'dark' | the left sidebar color scheme. By default, it would be set to default (Purple) |
leftSidebarCondensed | Boolean | true | false | If set to true, the left sidebar size changes to small (condensed) |
leftSidebarScrollable | Boolean | true | false | It changes the left sidebar scrollable. By default the left sidebar's position would be fixed and it's internal content is scrollable. This would makes entire left sidebar scrollable |
showRightSidebarOnStart | 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:'dark'}'></body>
Changes the left sidebar theme to 'Light (White)'
<body:'light'}'></body>
Changes the left sidebar to scrollable
<body: true}'></body>
Changes the left sidebar size to small
<body: true}'></body>
Adding new page
We have provided a starter page (check
src/saas/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/app.min.css, css/icons.min.css
andjs/app.min.js
in your html. If you are using dark, make sure to include thecss/app-dark.min.css
. If you are using modern or creative demos, make sure to replaceapp.min.css
withapp-modern.min.css
orapp-creative.min.css
respectively. You can also specifyapp-modern-dark.min.css
orapp-creative-dark.min.css
for having dark theme enabled. - 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.