Documentation

  1. Documentation
  2. Layout
email Inbox New grade Messages 5 settings Profile alarm Lock screen power_settings_new Logout
search
sidebar-image
Eric Simpson
email Inbox New grade Messages 5 settings Profile alarm Lock screen power_settings_new Logout
Innovation Pioneer
Navigation
Theme components
Form components
Apps
Other
Documentation

  1. How do I change the page layout?

    Every page has a data-layout attribute in the <body> tag. If you want to change the layout you need to change this attribute. There are 5 layout options:

    • default-sidebar-1
    • default-sidebar-2
    • top-navigation-1
    • top-navigation-2
    • off-canvas

    Also the index.html and the views inside the pages folder use the following layouts:

    • empty-view-1
    • empty-view-2
    • empty-view-3
    • empty-view-4
    • homepage

    The style for the layouts is defined in the styles/layouts folder

  2. How can I add a new layout to the template?

    1. First make sure you are using gulp and are running the gulp serve task
    2. Then use any of the .scss files provided in the styles/layouts as a starting point. After you name your layout and save the file, the compiled .css will get added to the css/layouts folder automatically
    3. Then add this .css file reference to the .html files where you are going to use it
    4. Every page has a data-layout attribute in the <body> tag. If you want to use your new layout then you need to change this attribute to match the name of you new layout.

  3. How do I change the navbar?

    The navbar content is defined inside the <nav> element with the .navbar-1 class. The layout of the navbar is defined inside the styles/layouts/default-sidebar-1.scss and styles/layouts/default-sidebar-2.scss files

  4. How do I change the top navigation in the top-navigation-1 layout?

    The top navigation for the top-navigation-1 layout is defined inside the <nav> element with the .navbar-2 class. The layout of the top navigation is defined inside the styles/layouts/top-navigation-1.scss file

  5. How do I change the top navigation in the top-navigation-2 layout?

    The top navigation for the top-navigation-2 layout is defined inside the <div> element with the .top-navigation-1 class. The layout of the top navigation is defined inside the styles/layouts/top-navigation-2.scss file

  6. How do I change the left sidebar?

    The left sidebar content is defined inside the <div> element with the .left-sidebar-1 class. The layout of the left sidebar is defined inside the styles/layouts/default-sidebar-1.scss and styles/layouts/default-sidebar-2.scss files

  7. How do I change the right sidebar?

    The right sidebar content is defined inside the <div> element with the .right-sidebar class. The layout of the right sidebar is defined inside the styles/layouts/default-sidebar-1.scss and styles/layouts/default-sidebar-2.scss files

  8. How do I change the top page jumbotron?

    The top page jumbotron content is defined inside the <div> element with the .jumbotron-1 class. The layout of the top page jumbotron is defined inside the styles/layouts/default-sidebar-1.scss and styles/layouts/default-sidebar-2.scss files

  9. How do I change the page content?

    The page content is defined inside the <div> element with the .col-xs-12 main class. The layout of the page content is defined inside the styles/layouts/default-sidebar-1.scss and styles/layouts/default-sidebar-2.scss files