With so many files in the theme, it can be hard to know how the site should look in the end. Here is the typical HTML structure of the rendered site using ignition. This will help later on as you use the site and may need to adjust things.
<!doctype html class="js"> <html lang="en"> <head> ... </head> <body> <div class="site-container"> <div id="panel-left"></div> <div id="panel-right"></div> <div id="page" class="site"> <div class="site-top">...</div> <div class="site-content">...</div> <footer class="site-footer">...</footer> </div><!-- /#page --> </div><!-- /.site-container --> </body> </html>
The site is split into three parts where you will place content. #panel-left, #panel-right, and #page.
Here is what this looks like once rendered:
Breaking it Down
The entire site is contained
Your main menu will be inside
.site-top by default. Below that would be the content for the entire page. Then comes the footer.
Sometimes you will have content that resides in special panels on the left and right of the main site. By default, these panels are hidden when empty. You can make use of them at any time. For
You can also place content in the right panel, like a sidebar. You can choose to have the sidebar hidden until the sidebar button is clicked, or have it open all the time.
For instance, this documentation page has content in the left panel even on
As stated, the #page id holds the main centered part of the site and is set to make sure the footer at the bottom is stuck to the bottom even on a page with little content. Inside the #page lives the main parts of the site.
Most of the main content will reside
.site-content within #page. Here your posts and pages will get output along with any other info you plan on showing. Ignition was made for W