HTML Layout
Frontpage ยป HTML Layout

The keystone of the Standard Template is the Standard HTML Layout. In 2013, Wikidot introduced custom layouts, allowing users to define their own layouts and better customize their sites. The aim of the Standard Layout is to achieve both Bootstrap and CSS Theme compatibility. Hence, using this layout will allow you access to any CSS Themes built with the layout in mind.

Note that changing this page will not change your site's layout. You may only edit the site's HTML from the Site Manager, and you must have a Pro Wikidot account as well.

<!---------------------------------------------------------
  Standard Template Layout
  Developed by the Wikidot Community
  Version: 1.02.150114
---------------------------------------------------------->
<a name="page-top"></a>
[[module NaviBar]]
<div class="container-wrap-wrap">
<div class="container-wrap">
 
<header class="header-wrap" role="banner">
  <div class="container header">
    <div class="site-title">
      <h1><a href="/"><span>[[site_name]]</span></a></h1>
      [[if site_subtitle]]<h2><span>[[site_subtitle]]</span></h2>[[/if]]
    </div>
    <div class="login-status">
      [[module LoginStatus]]
    </div>
    [[search_box]]
  </div>
 
  [[if topbar]]
  <nav class="top-bar-wrap navbar navbar-default" role="navigation">
    <div class="container top-bar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-target">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Home</a>
      </div>
      <div class="collapse navbar-collapse navbar-top-target">
        [[topbar]]
      </div>
    </div>
  </nav>
  [[/if]]
 
  <div class="header-extra-div-1"><span></span></div>
  <div class="header-extra-div-2"><span></span></div>
  <div class="header-extra-div-3"><span></span></div>
</header>
 
<main class="content-wrap" role="main">
  <div class="container content">
    <div class="row">
    [[if sidebar]]
      <nav class="side-bar-wrap col-md-3">
        <div class="side-bar">
          <div class="side-bar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-side-target">
              <span>Menu</span>
            </button>
          </div>
          <div class="collapse navbar-collapse navbar-side-target">
            [[sidebar]]
          </div>
        </div>
      </nav>
      [[/if]]
      [[if sidebar]]<div class="main-content-wrap col-md-9">
      [[else]]<div class="main-content-wrap col-md-12">[[/if]]
        <div class="main-content">
          <div class="page-title page-header"><span>[[page_title]]</span></div>
          [[if breadcrumbs]]<div class="breadcrumbs">[[breadcrumbs]]</div>[[/if]]
          [[content]]
          [[if tags]]<div class="page-tags">[[tags]]</div>[[/if]]
          <div class="page-info-break"></div>
          <div class="page-options-container">[[module PageOptionsBottom]]</div>
          [[action_area]]
        </div>
      </div>
    </div>
  </div>
</main>
 
<footer class="footer-wrap" role="contentinfo">
  <div class="container footer">
    [[footer]]
    <div class="license-area">[[license_text]]</div>
  </div>
  <div class="extrac-div-1"><span></span></div>
  <div class="extrac-div-2"><span></span></div>
  <div class="extrac-div-3"><span></span></div>
</footer>
 
[[module FooterBar]]
</div> <!-- container-wrap -->
 
<div class="extra-div-1"><span></span></div>
<div class="extra-div-2"><span></span></div>
<div class="extra-div-3"><span></span></div>
<div class="extra-div-4"><span></span></div>
<div class="extra-div-5"><span></span></div>
<div class="extra-div-6"><span></span></div>
</div> <!-- container-wrap-wrap -->