Customization

In-built Demos (Skins)

Codefox 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.

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/ 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

Codefox 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 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 html element in your html

Title Type Options Description
data-bs-theme String "light" | "dark" Changes overall color scheme to dark
data-layout-mode String "fluid" | "boxed" | "detached" Changes the width of overall layout
data-topbar-color String "light" | "dark" | "brand" the Topbar color scheme.
data-menu-color String "light" | "dark" | "brand" the left sidebar color scheme.
data-sidenav-size String "default" | "compact" | "condensed" | "full" | "fullscreen" the left sidebar size.
data-layout-position String "fixed" | "scrollable" Layout Position

Following are few examples:

  • Changes the left sidebar theme to "dark"
    <html data-menu-color="dark"></html>
  • Changes the left sidebar theme to "light"
    <html data-menu-color="light"></html>
  • Changes the left sidebar to scrollable
    <html data-layout-position="scrollable"></html>
  • Changes the left sidebar size to small
    <html data-sidenav-size="condensed"></html>

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 and js/app.min.js in your html.
  • Most of defabasic 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.