<section id="upgrade">
  <h2 class="page-header"><a href="#upgrade">Upgrade Guide</a></h2>
  <p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
  <h3>New Files</h3>
  <p>Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not
    function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.</p>
  <h3>Layout Changes</h3>
  <ol>
    <li>The .wrapper div must be placed immediately after the body tag rather than after the header</li>
    <li>Change the .header div to .main-header <code>&LT;div class="main-header"></code></li>
    <li>Change the .right-side class to .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
    <li>Change the .left-side class to .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
    <li>In the navbar, change .navbar-right to .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
  </ol>
  <h3>Navbar Custom Dropdown Menus</h3>
  <ol>
    <li>The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text color class such as text-aqua or text-red.</li>
  </ol>
  <h3>Login, Registration and Lockscreen Pages</h3>
  <p>There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.</p>
  <p>And you should be set to go!</p>
  <h3>Mailbox</h3>
  <p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
    you should use the provided HTML files in the pages/mailbox folder.</p>
  <p><b class="text-red">Note:</b> the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.</p>
</section>
