Navigation
Theme components
Form components
Apps
Other
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 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
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 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
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
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