
Navigation
Theme components
Form components
Apps
Documentation
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 2 layout options:
default-sidebar-1
default-sidebar-2
Also the index.html
and the views inside the pages
folder use the following layouts:
empty-view-1
empty-view-2
homepage
The style for the layouts is defined in the styles/layouts
folder
How can I add a new layout to the template?
gulp
and are running the gulp serve
task.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.css
file reference to the .html
files where you are going to use itdata-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.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
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
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
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
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