From 56bef8d5704bb91a827865205c77b97cfa906190 Mon Sep 17 00:00:00 2001
From: Alex Buckley <alexbuckley@catalyst.net.nz>
Date: Thu, 20 Apr 2017 08:19:34 +1200
Subject: [PATCH] Bug 18462 - Merged patches on bugs 17855 and 17942 to
 implemented the bootstrap styling onto the web installer and newly altered
 onboarding tool.

---
 .../prog/en/modules/installer/step3.tt             | 468 +++++++++++----------
 .../prog/en/modules/onboarding/onboardingstep1.tt  |  69 +--
 .../prog/en/modules/onboarding/onboardingstep2.tt  | 174 ++++----
 .../prog/en/modules/onboarding/onboardingstep3.tt  | 185 ++++----
 .../prog/en/modules/onboarding/onboardingstep4.tt  |  68 +--
 .../prog/en/modules/onboarding/onboardingstep5.tt  | 210 ++++-----
 6 files changed, 603 insertions(+), 571 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
index 84f40e2..f2f350f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/installer/step3.tt
@@ -1,284 +1,290 @@
 [% INCLUDE 'doc-head-open.inc' %]
+
 <title>Koha &rsaquo; Web installer &rsaquo;
-    [% IF ( proposeimport ) %]
-        Set up database
-    [% END %]
-    [% IF ( importdatastructure ) %]
-        [% IF ( error ) %]
-            Error creating database tables
-        [% ELSE %]
-            Database tables created
-        [% END %]
-    [% END %]
-    [% IF ( default ) %]
+     [% IF ( proposeimport ) %]
+         Set up database
+     [% END %]
+     [% IF ( importdatastructure ) %]
+         [% IF ( error ) %]
+           Error creating database tables
+         [% ELSE %]
+           Database tables created
+         [% END %]
+     [% END %]
+     [% IF ( default ) %]
         [% IF ( upgrading ) %]
             Update database
         [% ELSE %]
             Install basic configuration settings
         [% END %]
-    [% END %]
-    [% IF ( choosemarc ) %]
+     [% END %]
+     [% IF ( choosemarc ) %]
         Select your MARC flavor
-    [% END %]
-    [% IF ( selectframeworks ) %]
+     [% END %]
+     [% IF ( selectframeworks ) %]
         Selecting default settings
-    [% END %]
+     [% END %]
 </title>
-[% IF ( finish ) %]<meta http-equiv="refresh" content="5; url=/cgi-bin/koha/installer/onboarding.pl">[% END %]
+[% IF ( finish ) %]<meta http-equiv="refresh" content="10; url=/cgi-bin/koha/installer/onboarding.pl">[% END %]
 [% INCLUDE 'installer-doc-head-close.inc' %]
-
 <div class="container-fluid">
     <div class="row">
         <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
-
             <h1 id="logo"><a href="#">Koha</a></h1>
+[% IF ( selectframeworks ) %]
+    <script type="text/javascript">
+    //<![CDATA[
 
-            [% IF ( finish ) %]
-                <h2>Web installer &rsaquo; Installation complete</h2>
-                <h3>Congratulations, installation complete</h3>
-                <p>
-                    If this page does not redirect in 5 seconds, <a href="/cgi-bin/koha/installer/onboarding.pl">Start onboarding process</a>.
-                </p>
-            [% END %]
+    var surl = unescape(window.location.pathname);
 
+    function doLoad()
+{
+        // the timeout value should be the same as in the "refresh" meta-tag
+        setTimeout( "refresh()", 2*1000 );
+}
 
-            [% IF ( choosemarc ) %]
-                <h2>Choose your setup</h2>
-                <p>Basic setup selects recommended settings by default.</p>
-                <form name="frameworkselection" method="post" action="install.pl">
-                    <input type="hidden" name="step" value="3" />
-                    <input type="hidden" name="op" value="selectframeworks"/>
+function refresh(value)
+{
+        //  The argument to the location.reload function determines
+        //  if the browser should retrieve the document from the
+        //  web-server.  In our example all we need to do is cause
+        //  the JavaScript block in the document body to be
+        //  re-evaluated.  If we needed to pull the document from
+        //  the web-server again (such as where the document contents
+        //  change dynamically) we would pass the argument as 'true'.
+        //
+        surl=surl+'?step=3&op=selectframeworks&fwklanguage='+value;
 
-                    <p>
-                        <label><input type="radio" name="setup" value="Basic" checked="checked" /> Basic</label>
-                    </p>
-                    <p>
-                        <label><input type="radio" name="setup" value="Advanced"/> Advanced</label>
-                    </p>
+            window.location.replace( surl );
+}
 
-                    <h2>Select your MARC flavor</h2>
-                    <p>MARC stands for Machine Readable Cataloging, containing information about a bibliographic record. MARC21 is used globally, whereas UNIMARC tends to be used in Europe. </p>
+function selectAllFrameworks()
+{
+        //  A handy short link that selects all available checkboxes
+        //  on the page.
+        //
+        var checkboxes = document.getElementsByTagName("input");
+        for (var i = 0; i < checkboxes.length; i++)
+        {
+           if (checkboxes[i].type == 'checkbox')
+           {
+               checkboxes[i].checked = true;
+           }
+        }
 
-                    [% FOREACH flavourloo IN flavourloop %]
-                        [% IF ( flavourloo.label == "Unimarc") %]
-                             <p>
-                                 <label><input type="radio" name="marcflavour" value="[% flavourloo.code %]" /> [% flavourloo.label %]</label>
-                             </p>
-                        [% ELSE %]
-                             <p>
-                                 <label><input type="radio" name="marcflavour" value="[% flavourloo.code %]" checked="checked" /> [% flavourloo.label %]</label>
-                             </p>
-                        [% END %]
-                    [% END %]
-                    <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /> </p>
-                </form>
-            [% END # / IF choosemarc %]
+         //  Prevent event propergation.
+        return false;
+}
 
-            [% IF ( selectframeworks ) %]
-                <h2>Web installer &rsaquo; [% setup %] setup &rsaquo; Selecting default settings</h2>
+function Hide(link)
+{
+        //  Toggle the display of a given element on the page.
+        //
+        subfield = document.getElementById('bloc'+link);
+        var initstyle = subfield.style.display;
+        if (initstyle == 'block') subfield.style.display = 'none' ;
+        if (initstyle == 'none') subfield.style.display = 'block' ;
+}
 
-                [% IF setup == "Advanced" %]
-                    <p id="selectall"><a href="#">Select all sample data</a></p>
-                [% END %]
+//]]>
+</script>
+[% END %]
 
-[% IF ( choosemarc ) %]
-   <h2 align="center">Select your MARC flavor</h2>
-       <form name="frameworkselection" method="post" action="install.pl">
-           <input type="hidden" name="step" value="3" />
-           <input type="hidden" name="op" value="selectframeworks" />
-           <p>
-           [% FOREACH flavourloo IN flavourloop %]
-           <div>
-              [% IF ( flavourloo.checked ) %]
-                  <input type="radio" name="marcflavour" value="[% flavourloo.code %]" checked /> [% flavourloo.label %] <br/>
-              [% ELSE %]
-                  <input type="radio" name="marcflavour" value="[% flavourloo.code %]" /> [% flavourloo.label %] <br/>
-              [% END %]
-           </div>
-           [% END %]
-           </p>
-           <p> Click 'Next' to continue <input value="Next &gt;&gt;" type="submit" /></p>
-           </form>
+
+[% IF ( finish ) %]
+    <h2>Web installer &rsaquo; Installation complete</h2>
+    <p>If this page does not redirect in 10 seconds, click <a href="/cgi-bin/koha/installer/onboarding.pl">Start onboarding process</a>.</p>
 [% END %]
 
+
+[% IF ( choosemarc ) %]
+  <h2 align="center">Select your MARC flavor</h2>
+  <form name="frameworkselection" method="post" action="install.pl">
+     <input type="hidden" name="step" value="3" />
+     <input type="hidden" name="op" value="selectframeworks" />
+     <p>
+     [% FOREACH flavourloo IN flavourloop %]
+     <div>
+          [% IF ( flavourloo.checked ) %]
+             <input type="radio" name="marcflavour" value="[% flavourloo.code %]" checked /> [% flavourloo.label %] <br/>
+          [% ELSE %]
+             <input type="radio" name="marcflavour" value="[% flavourloo.code %]" /> [% flavourloo.label %] <br/>
+          [% END %]
+     </div>
+     [% END %]
+     </p>
+     <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /></p>
+</form>
+[% END %]
 [% IF ( selectframeworks ) %]
-<h2 align="center">Selecting Default Settings</h2>
+    <h2>Web installer &rsaquo; [% setup %] setup &rsaquo; Selecting default settings</h2>
     <script type="text/javascript">
        var linklabel = _("Select all sample data");
        document.write('<p><a href="#" onclick="return selectAllFrameworks();">'+linklabel+'</a></p>');
     </script>
     <form name="frameworkselection" method="post" action="install.pl">
-    <input type="hidden" name="step" value="3" />
-    <input type="hidden" name="op" value="addframeworks" />
-
-    [% IF ( frameworksloop ) %]
-    <h2>MARC frameworks: [% marcflavour %]</h2>
-    [% IF ( en_marc_frameworks ) %]
-         <h4><span class="error">No MARC frameworks are available for your language.
-                Defaulting to the frameworks supplied for English (en)<span></h4>
-    [% END %]
-    [% FOREACH frameworksloo IN frameworksloop %]
-    <div>
-    <h3>[% frameworksloo.label %]</h3>
-    [% FOREACH framework IN frameworksloo.frameworks %]
-       <table style="border:1px;vertical-align:top;">
-       <tr>
-       <td style="vertical-align:top;">
-          [% IF ( framework.checked ) %]
-               <input type="checkbox" name="framework" value="[% framework.fwkfile %]" checked="checked" id="[% framework.fwkname %]" />
-          [% ELSE %]
-               <input type="checkbox" name="framework" value="[% framework.fwkfile %]" id="[% framework.fwkname %]" />
+        <input type="hidden" name="step" value="3" />
+        <input type="hidden" name="op" value="addframeworks" />
+        [% IF ( frameworksloop ) %]
+           <h2>MARC frameworks: [% marcflavour %]</h2>
+           [% IF ( en_marc_frameworks ) %]
+               <h4><span class="error">No MARC frameworks are available for your language.
+               Defaulting to the frameworks supplied for English (en)<span></h4>
+           [% END %]
+           [% FOREACH frameworksloo IN frameworksloop %]
+           <div>
+               <h3>[% frameworksloo.label %]</h3>
+               [% FOREACH framework IN frameworksloo.frameworks %]
+                  <table style="border:1px;vertical-align:top;">
+                  <tr>
+                  <td style="vertical-align:top;">
+                      [% IF ( framework.checked ) %]
+                          <input type="checkbox" name="framework" value="[% framework.fwkfile %]" checked="checked" id="[% framework.fwkname %]" />
+                      [% ELSE %]
+                          <input type="checkbox" name="framework" value="[% framework.fwkfile %]" id="[% framework.fwkname %]" />
+                      [% END %]
+                   </td>
+                   <td>
+                      <label for="[% framework.fwkname %]">
+                      [% framework.fwkdescription %]
+                      <em>([% framework.fwkname %])</em>
+                      </label>
+                   </td>
+                   </table>
+               [% END %]
+          </div>
           [% END %]
-       </td>
-       <td>
-          <label for="[% framework.fwkname %]">
-               [% framework.fwkdescription %]
-               <em>([% framework.fwkname %])</em>
-           </label>
-       </td>
-       </table>
-     [% END %]
-     </div>
-     [% END %]
-     <h2>Other data</h2>
-     [% END %]
-     [% IF ( en_sample_data ) %]
-         <h4><span class="error">No sample data and settings are available for your language.
-                 Defaulting to the samples supplied for English (en)<span></h4>
-     [% END %]
-     [% FOREACH levelloo IN levelloop %]
-     <div>
-     <h3>[% levelloo.label %]</h3>
-     [% FOREACH framework IN levelloo.frameworks %]
-        <table style="border:1px;vertical-align:top;">
-        <tr>
-        <td style="vertical-align:top;">
-            [% IF ( framework.checked ) %]
-                <input type="checkbox" name="framework" value="[% framework.fwkfile %]" checked="checked" id="[% framework.fwkname %]" />
-            [% ELSE %]
-                <input type="checkbox" name="framework" value="[% framework.fwkfile %]" id="[% framework.fwkname %]" />
-            [% END %]
-        </td>
-        <td>
-                <label for="[% framework.fwkname %]">
-                    [% framework.fwkdescription %]
-                    <em>([% framework.fwkname %])</em>
-                </label>
-        </td>
-        </table>
-     [% END %]
-     </div>
-     [% END %]
-     <p>When you've made your selections, please click 'Import' below to begin the process. It may take a while to complete,
-     please be patient.</p>
-     <p><input type="submit" value="Import &gt;&gt;" />
-     </p>
+          <h2>Other data</h2>
+      [% END %]
+      [% IF ( en_sample_data ) %]
+           <h4><span class="error">No sample data and settings are available for your language.
+           Defaulting to the samples supplied for English (en)<span></h4>
+      [% END %]
+      [% FOREACH levelloo IN levelloop %]
+            <div>
+                 <h3>[% levelloo.label %]</h3>
+                      [% FOREACH framework IN levelloo.frameworks %]
+                         <table style="border:1px;vertical-align:top;">
+                         <tr>
+                         <td style="vertical-align:top;">
+                           [% IF ( framework.checked ) %]
+                             <input type="checkbox" name="framework" value="[% framework.fwkfile %]" checked="checked" id="[% framework.fwkname %]" />
+                           [% ELSE %]
+                             <input type="checkbox" name="framework" value="[% framework.fwkfile %]" id="[% framework.fwkname %]" />
+                           [% END %]
+                         </td>
+                         <td>
+                            <label for="[% framework.fwkname %]">
+                            [% framework.fwkdescription %]
+                            <em>([% framework.fwkname %])</em>
+                            </label>
+                         </td>
+                         </table>
+                      [% END %]
+           </div>
+      [% END %]
+      <p>When you've made your selections, please click 'Import' below to begin the process. It may take a while to complete,
+      please be patient.</p>
+      <p><input type="submit" value="Import" class="btn btn-primary" /></p>
+      </p>
      </form>
 [% END %]
 
-
 [% IF ( addframeworks ) %]
+    <h2>Web installer &rsaquo; Default data loaded</h2>
     [% FOREACH lis IN list %]
-    <h3>[% lis.level %] data added</h3>
-    <ul>
-    [% FOREACH fwklis IN lis.fwklist %]
-        <li>[% fwklis.fwkname %][% IF ( fwklis.error ) %]<br /><span class="error">[% fwklis.error %]</span>[% END %] </li>
-    [% END %]
-    </ul>
-    [% END %]
-    <h3>All done!</h3>
-    <p>Installation complete.<br />
-        <p>
-            You can help the Koha community by sharing your statistics with us.
-            <br>If you wish to share some of your data, please enable the functionality in the "Share your usage statistics" section of the admin module.
-        </p>
-        <p>Click on 'Set up Koha with the onboarding tool' to complete and load the Koha onboarding tool.
-        <form name="finish">
-        <input type="hidden" name="step" value="3" />
-        <input type="hidden" name="op" value="finish" />
-        <input type="submit" value="Set up Koha with the onboarding tool"/>
-        </form>
-        </p>
-    </p>
+        <h3>[% lis.level %] data added</h3>
+            <ul>
+                [% FOREACH fwklis IN lis.fwklist %]
+                  <li>[% fwklis.fwkname %][% IF ( fwklis.error ) %]<br /><span class="error">[% fwklis.error %]</span>[% END %] </li>
+                [% END %]
+            </ul>
+     [% END %]
+     <h3>All done!</h3>
+     <p>Installation complete.<br />
+     <p>
+        You can help the Koha community by sharing your statistics with us.
+        <br>If you wish to share some of your data, please enable the functionality in the "Share your usage statistics" section of the admin module.
+     </p>
+     <p>Click on 'Set up Koha with the onboarding tool' to complete and load the Koha onboarding tool.
+     <form name="finish">
+          <input type="hidden" name="step" value="3" />
+          <input type="hidden" name="op" value="finish" />
+          <p> <input value="Set up Koha with the onboarding tool" class="btn btn-primary" type="submit" /> </p>
+     </form>
+     </p>
+  </p>
 [% END %]
 
-            [% IF ( proposeimport ) %]
-                <h2>Web installer &rsaquo; Set up database</h2>
-                <p>Now we're ready to create the database tables and fill them with some default data.</p>
-                <form action="install.pl" method="post">
-                    <input type="hidden" name="step" value="3" />
-                    <input type="hidden" name="op" value="importdatastructure" />
-                    <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /></p>
-                </form>
-            [% END %]
-
-            [% IF ( default ) %]
-                [% IF ( upgrading ) %]
-                    <h2>Web installer &rsaquo; Update database</h2>
-                    <p>We are upgrading from Koha [% dbversion %] to [% kohaversion %]</p>
-                    <p><a href="install.pl?step=3&amp;op=updatestructure" class="btn btn-primary">Update your database</a></p>
-                [% ELSE %]
-                    <h2>Web installer &rsaquo; Install basic configuration settings</h2>
-                    <p>We are ready to do some basic configuration.</p>
-                    <p> <a href="install.pl?step=3&amp;op=choosemarc" class="btn btn-primary">Continue to the next step</a> </p>
-                [% END %]
-            [% END %]
+[% IF ( importdatastructure ) %]
+    [% IF ( error ) %]
+        <p>The following error occurred while importing the database structure:</p>
+        <p class="error">[% error %] </p>
+        <p>Please contact your system administrator</p>
+    [% ELSE %]
+        <h2>Web installer &rsaquo; Success</h2>
+        <ul>
+           <li>Database tables created</li>
+        </ul>
+        <form action="install.pl">
+              <input type="hidden" name="step" value="3" />
+              <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /></p>
+        </form>
+    [% END %]
+[% END %]
 
-            [% IF ( updatestructure ) %]
-                <h2>Updating database structure</h2>
-                [% IF ( has_update_succeeds ) %]
-                    <p>Update report :</p>
-                    <ul>
-                        [% FOREACH update_repor IN update_report %]
-                            <li>[% update_repor.line |html %]</li>
-                        [% END %]
-                    </ul>
-                [% END %]
+[% IF ( proposeimport ) %]
+    <h2>Web installer &rsaquo; Set up database</h2>
+    <p>Now we're ready to create the database tables and fill them with some default data.</p>
+        <form action="install.pl">
+            <input type="hidden" name="step" value="3" />
+            <input type="hidden" name="op" value="importdatastructure" />
+            <p><input value="Continue to the next step" class="btn btn-primary" type="submit" /></p>
+        </form>
+[% END %]
 
 [% IF ( default ) %]
-    [% IF ( upgrading ) %]
-        <p>
-            We are upgrading from Koha [% dbversion %] to [% kohaversion %], you must update your database.
+     [% IF ( upgrading ) %]
+        <h2>Web installer &rsaquo; Update database</h2>
+        <p> We are upgrading from Koha [% dbversion %] to [% kohaversion %], you must update your database.
         <br>
         <a href="install.pl?step=3&amp;op=updatestructure" class="button">Update your database</a>
         </p>
-    [% ELSE %]
+     [% ELSE %]
+        <h2>Web installer &rsaquo; Install basic configuration settings</h2>
         <p>We are ready to do some basic configuration. Please install some basic configuration settings to continue the installation:
         <br>
         <br>
-            <a href="install.pl?step=3&amp;op=choosemarc" class="button">Install basic configuration settings</a>
-
-                [% UNLESS ( has_update_errors ) %]
-                    <p>Everything went okay. Update done.</p>
-                [% END %]
-                <p><a href="install.pl?step=3&amp;op=finished" class="btn btn-primary">Continue to log in to Koha</a></p>
-           [% END # / IF updatestructure %]
-    </div>
-</div>
+        <p> <a href="install.pl?step=3&amp;op=choosemarc" class="btn btn-primary">Install basic configuration settings</a> </p>
+     [% END %]
+[% END %]
 
 [% IF ( updatestructure ) %]
   <div><h2 align="center">Updating database structure</h2>
-  [% IF ( has_update_succeeds ) %]
-  <p>Update report :</p>
-    <ul>
-      [% FOREACH update_repor IN update_report %]
-          <li>[% update_repor.line |html %]</li>
-      [% END %]
-    </ul>
-  [% END %]
-  [% IF ( has_update_errors ) %]
-  <p>Update errors :</p>
-    <ul>
-      [% FOREACH update_error IN update_errors %]
-          <li class="update_error">[% update_error.line |html %]</li>
-      [% END %]
-    </ul>
-  [% END %]
- [% UNLESS ( has_update_errors ) %]
-    <p>Everything went OK, update done.</p>
-  [% END %]
-<a href="install.pl?step=3&amp;op=finished" class="button">Continue to log in to Koha</a>
-  </div>
+    [% IF ( has_update_succeeds ) %]
+      <p>Update report :</p>
+      <ul>
+        [% FOREACH update_repor IN update_report %]
+             <li>[% update_repor.line |html %]</li>
+        [% END %]
+      </ul>
+    [% END %]
+    [% IF ( has_update_errors ) %]
+        <p>Update errors :</p>
+        <ul>
+            [% FOREACH update_error IN update_errors %]
+                <li class="update_error">[% update_error.line |html %]</li>
+            [% END %]
+        </ul>
+    [% END %]
+    [% UNLESS ( has_update_errors ) %]
+        <p>Everything went OK, update done.</p>
+    [% END %]
+    <a href="install.pl?step=3&amp;op=finished" class="button">Continue to log in to Koha</a>
+   </div>
 [% END %]
-
-[% INCLUDE 'intranet-bottom.inc' %]
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
index 9754f74..0715153 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep1.tt
@@ -2,37 +2,38 @@
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
 [% INCLUDE 'installer-doc-head-close.inc' %]
 [% INCLUDE 'datatables.inc' %]
-
-<head><title>Welcome &rsaquo; to  &rsaquo; Koha</title></head>
-
-<div>
-    <h1 id="logo"><img alt="Koha" src="[% interface %]/[% theme %]/img/koha.org-logo.gif"/> Welcome to Koha</h1>
-</div>
-
-[% INCLUDE 'onboarding_messages.inc' %]
-
-<form name="LibraryCreation" method="post" action="onboarding.pl">
-    <fieldset class="rows" >
-         <h2>Create a library</h2>
-         <input type="hidden" name="step" value="1"/>
-         <input type="hidden" name="op" value="add_validate_library"/>
-         <ol>
-             <li>
-                <label for="branchcode" class="required">Library code: </label>
-                <input type="text"  pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" name="branchcode" id="branchcode" size="10" maxlength="10" value="" class="required" required="required" />
-                <span class="required">Required</span>
-            </li>
-            <li>
-                <label for="branchname" class="required">Name: </label>
-                <input type="text" name="branchname" id="branchname" title="Please enter the name of your institution" size="42" value="" class="required" required="required" style="width:200px;">
-                <span class="required">Required</span>
-            </li>
-         </ol>
-         <p>
-            To add another library and for more settings, <br>
-            go to:<br>
-            More -> Administration -> Libraries and groups<br>
-         </p>
-         <input type="submit" class="action" value="Submit"/>
-    </fieldset>
-</form>
+<body id="installer" class="installer">
+     <div class="container-fluid">
+            <div class="row">
+                <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
+                    <h1 id="logo"><a href="#">Koha</a></h1>
+                    [% INCLUDE 'onboarding_messages.inc' %]
+                    <form name="LibraryCreation" method="post" action="onboarding.pl">
+                        <fieldset class="rows" >
+                             <h2>Web installer &rsaquo; Create a library</h2>
+                             <input type="hidden" name="step" value="1"/>
+                             <input type="hidden" name="op" value="add_validate_library"/>
+                            <ol>
+                                <li>
+                                    <label for="branchcode" class="required">Library code: </label>
+                                    <input type="text"  pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" name="branchcode" id="branchcode" size="10" maxlength="10" value="" class="required" required="required" />
+                                    <span class="required">Required</span>
+                                </li>
+                                <li>
+                                    <label for="branchname" class="required">Name: </label>
+                                    <input type="text" name="branchname" id="branchname" title="Please enter the name of your institution" size="42" value="" class="required" required="required" style="width:200px;">
+                                    <span class="required">Required</span>
+                                </li>
+                            </ol>
+                            <p>
+                            To add another library and for more settings, <br>
+                            go to:<br>
+                            More -> Administration -> Libraries and groups<br>
+                            </p>
+                            <input type="submit" class="btn btn-primary" value="Submit" />
+                            </fieldset>
+                    </form>
+                </div>
+            </div>
+        </div>
+</body>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
index 673cbb9..6aa1d02 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
@@ -18,97 +18,101 @@
 <script type="text/javascript" src="[% interface %]/[% theme %]/js/onboarding.js"></script>
 </head>
 
-<div>
-    <h1 id="logo"><img alt="Koha" src="[% interface %]/[% theme %]/img/koha.org-logo.gif"/> Welcome to Koha</h1>
-</div>
-
-[% INCLUDE 'onboarding_messages.inc' %]
-<h1 align="left"> Create a new patron category</h1>
-<p> The patron category you create in this form is going to be the one which the new administrator patron account will have.</p>
-   <form id="category_form" method="post" action="onboarding.pl">
-   <fieldset class="rows">
-        <input type="hidden" name="step" value="2"/>
-        <input type="hidden" name="op" value="add_validate_category" />
-            <ol>
-                <li>
-                    <label for="categorycode" class="required">Category code: </label>
-                    <input type="text" pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" id="categorycode" name="categorycode" value="[% category.categorycode |html %]" size="10" maxlength="10" class="required" required="required" />
-                    <span class="required">Required</span>
-                </li>
-
-                <li>
-                    <label for="description" class="required">Description: </label>
-                    <input type="text" name="description" title="Please enter a description of the category" size="40" maxlength="80" class="required" required="required" value="[% category.description |html%]" />
-                    <span class="required">Required</span>
-                </li>
-
-                <li>
-                    <label for="overduenoticerequired">Overdue notice required: </label>
-                    <select name="overduenoticerequired" value="overduenoticerequired">
-                        [% IF category.overduenoticerequired %]
-                            <option value="0">No</option>
-                            <option value="1" selected="selected">Yes</option>
-                        [% ELSE %]
-                            <option value="0" selected="selected">No</option>
-                            <option value="1">Yes</option>
-                        [% END %]
-                    </select>
-                </li>
-
-                <li>
-                    <label for="category_type" class="required">Category type: </label>
-                    Staff
-                </li>
-
-                <li>
-                    <label for="default_privacy">Default privacy: </label>
-                    <select value="default_privacy" name="default_privacy" required="required">
-                        [% SET default_privacy = 'default' %]
+<body id="installer" class="installer">
+    <div class="container-fluid">
+         <div class="row">
+             <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
+                <h1 id="logo"><a href="#">Koha</a></h1>
+                [% INCLUDE 'onboarding_messages.inc' %]
+                <h2>Web installer &rsaquo; Create a patron category</h2>
+                <p> The patron category you create in this form is going to be the one which the new administrator patron account will have.</p>
+                <form id="category_form" method="post" action="onboarding.pl">
+                    <fieldset class="rows">
+                        <input type="hidden" name="step" value="2"/>
+                        <input type="hidden" name="op" value="add_validate_category" />
+                        <ol>
+                            <li>
+                                <label for="categorycode" class="required">Category code: </label>
+                                <input type="text" pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" id="categorycode" name="categorycode" value="[% category.categorycode |html %]" size="10" maxlength="10" class="required" required="required" />
+                                <span class="required">Required</span>
+                            </li>
 
-                        [% IF category %]
-                           [% SET default_privacy = category.default_privacy %]
-                        [% END %]
+                            <li>
+                                <label for="description" class="required">Description: </label>
+                                <input type="text" name="description" title="Please enter a description of the category" size="40" maxlength="80" class="required" required="required" value="[% category.description |html%]" />
+                                <span class="required">Required</span>
+                            </li>
 
-                        [% SWITCH default_privacy %]
-                        [% CASE 'forever' %]
-                            <option value="default">Default</option>
-                            <option value="never">Never</option>
-                            <option value="forever" selected="selected">Forever</option>
-                        [% CASE 'never' %]
-                            <option value="default">Default</option>
-                            <option value="never" selected="selected">Never</option>
-                            <option value="forever">Forever</option>
-                        [% CASE %]
-                            <option value="default" selected="selected">Default</option>
-                            <option value="never">Never</option>
-                            <option value="forever">Forever</option>
-                        [% END %]
-                    </select>
-                    <p>Controls how long a patrons checkout history is kept for new patrons of this category. "Never"     anonymizes checkouts on return, and "Forever" keeps a patron's checkout history indefinitely. When set to "Default", the amount of history kept is controlled by the cronjob <i>batch_anonymise.pl</i> which should be set up by your system administrator.</p>
-                </li>
-        </ol>
-        <span class="label">Enrolment period: </span>
-        </br>
-                <fieldset>
-                <legend>Choose one</legend>
-                        <ol>
                             <li>
-                                <label for="enrolmentperiod" style="width:6em;">In months: </label>
-                                <input type="number" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" min="0" size="3" maxlength="3" value="[% IF category.enrolmentperiod %][% category.enrolmentperiod %][% END %]" /> months
+                                <label for="overduenoticerequired">Overdue notice required: </label>
+                                <select name="overduenoticerequired" value="overduenoticerequired">
+                                    [% IF category.overduenoticerequired %]
+                                        <option value="0">No</option>
+                                        <option value="1" selected="selected">Yes</option>
+                                    [% ELSE %]
+                                        <option value="0" selected="selected">No</option>
+                                        <option value="1">Yes</option>
+                                    [% END %]
+                                </select>
                             </li>
+
                             <li>
-                                <label for="enrolmentperioddate" style="width:6em;">Until date: </label>
-                                <input type="text" class="enrolmentperioddate datepicker" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" />
+                                <label for="category_type" class="required">Category type: </label>
+                                Staff
                             </li>
-                        </ol>
-                 </fieldset>
-             <p> Success: patron category created! </p>
-             <p> To add another patron category and for more settings<br>
-             go to:<br>
-             More -> Administration -> Patron categories<br>
 
-                <input type="submit" class="action" value="Submit" />
-</fieldset>
-</form>
+                            <li>
+                                <label for="default_privacy">Default privacy: </label>
+                                <select value="default_privacy" name="default_privacy" required="required">
+                                    [% SET default_privacy = 'default' %]
+
+                                    [% IF category %]
+                                        [% SET default_privacy = category.default_privacy %]
+                                    [% END %]
 
+                                    [% SWITCH default_privacy %]
+                                        [% CASE 'forever' %]
+                                            <option value="default">Default</option>
+                                            <option value="never">Never</option>
+                                            <option value="forever" selected="selected">Forever</option>
+                                        [% CASE 'never' %]
+                                            <option value="default">Default</option>
+                                            <option value="never" selected="selected">Never</option>
+                                            <option value="forever">Forever</option>
+                                        [% CASE %]
+                                            <option value="default" selected="selected">Default</option>
+                                            <option value="never">Never</option>
+                                            <option value="forever">Forever</option>
+                                    [% END %]
+                                </select>
+                                <p>Controls how long a patrons checkout history is kept for new patrons of this category. "Never"     anonymizes checkouts on return, and "Forever" keeps a patron's checkout history indefinitely. When set to "Default", the amount of history kept is controlled by the cronjob <i>batch_anonymise.pl</i> which should be set up by your system administrator.</p>
+                            </li>
+                        </ol>
+                        <span class="label">Enrolment period: </span>
+                        </br>
+                        <fieldset>
+                            <legend>Choose one</legend>
+                            <ol>
+                                <li>
+                                    <label for="enrolmentperiod">In months: </label>
+                                    <input type="number" class="enrolmentperiod" name="enrolmentperiod" id="enrolmentperiod" min="0" size="3" maxlength="3" value="[% IF category.enrolmentperiod %][% category.enrolmentperiod %][% END %]" /> months
+                                </li>
+                                <li>
+                                     <label for="enrolmentperioddate">Until date: </label>
+                                      <input type="text" class="enrolmentperioddate datepicker" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" />
+                                     <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
+                                </li>
+                            </ol>
+                        </fieldset>
+                        <p> Success: patron category created! </p>
+                        <p> To add another patron category and for more settings<br>
+                        go to:<br>
+                        More -> Administration -> Patron categories<br>
+                        <input type="submit" class="btn btn-primary" value="Submit" />
+                    </fieldset>
+                </form>
+            </div>
+        </div>
+    </div>
+</body>
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
index 1f04a98..99d0d7d 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep3.tt
@@ -4,99 +4,102 @@
 [% INCLUDE 'js_includes.inc' %]
 [% INCLUDE 'validator-strings.inc' %]
 [% INCLUDE 'installer-strings.inc' %]
-
-</head>
-
-<body id="installer" class="installer">
 [% INCLUDE 'onboarding_messages.inc' %]
+<title>Koha &rsaquo; Web installer &rsaquo; Create Koha administrator patron</title>
 
-<h1 align="left"> Create koha administrator patron</h1>
-<p>
-Now we will create a patron with superlibrarian permissions. Login with this to access Koha as a staff member will all permissions.
-</p>
-<form name="createpatron" id="createpatron" method="post" action="onboarding.pl">
-    <fieldset class="rows">
-         <input type="hidden" name="step" value="3"/>
-         <input type="hidden" name="op" value="add_validate_patron" />
-            <legend id="library_management_lgd">Library management</legend>
-            <ol>
-            <h3>Patron identity</h3>
-                <li>
-                    <label for="surname" class="required">Surname: </label>
-                    <input type="text" id="surname" name="surname" title="Please only enter letters in the surname field" value="[% surname |html %]" class="required" required="required" />
-                    <span class="required">Required</span>
-                </li>
-                <li>
-                    <label for="firstname" class="required">First name: </label>
-                    <input  type="text" name="firstname" title="Please only enter letters in the first name field" id="firstname" size="20" value="[% firstname |html %]" class="required" required="required">
-                    <span class="required">Required</span>
-                </li>
-            </ol>
-
-            <ol>
-                <li>
-                    <label for="cardnumber" class="required">Card number: </label>
-                    [% IF patrons && patrons > 1 %]
-                        <input type="text" id="cardnumber" title="Please enter a cardnumber" class="noEnterSubmit valid" name="cardnumber" value="[% newcardnumber | html %]" class="required" required="required">
-                    [% ELSE %]
-                        <input type="text" id="cardnumber" title="Please enter a cardnumber" name="cardnumber" value="[% cardnumber | html %]" class="required" required="required">
-                    [% END %]
-                    <span class="required">Required</span>
-                </li>
-                <li>
-
-                <!--require a foreach loop to get all the values for the library that the user has either imported (in web installer) or created in the first step of this onboarding tool-->
-                    <label for="libraries" class="required"> Library: </label>
-                    <select name="libraries" size="1" id="libraries">
+<body id="installer" class="installer">
+    <div class="container-fluid">
+        <div class="row">
+            <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
+                <h1 id="logo"><a href="#">Koha</a></h1>
+                <h2>Web installer &rsaquo; Create Koha administrator patron</h2>
+                <p>Now we will create a patron with superlibrarian permissions. Login with this to access Koha as a staff member will all permissions.
+                </p>
+                <form name="createpatron" id="createpatron" method="post" action="onboarding.pl">
+                    <fieldset class="rows">
+                        <input type="hidden" name="step" value="3"/>
+                        <input type="hidden" name="op" value="add_validate_patron" />
+                        <legend id="library_management_lgd">Library management</legend>
+                        <ol>
+                            <h3>Patron identity</h3>
+                            <li>
+                                <label for="surname" class="required">Surname: </label>
+                                <input type="text" id="surname" name="surname" title="Please only enter letters in the surname field" value="[% surname |html %]" class="required" required="required" />
+                                <span class="required">Required</span>
+                            </li>
+                            <li>
+                                <label for="firstname" class="required">First name: </label>
+                                <input  type="text" name="firstname" title="Please only enter letters in the first name field" id="firstname" size="20" value="[% firstname |html %]" class="required" required="required">
+                                <span class="required">Required</span>
+                            </li>
+                        </ol>
 
-                     [% FOREACH library IN libraries %]
-                          <option name="libraries" value="[% library.branchcode %]"> [% library.branchname %]
-                     [% END %]
+                        <ol>
+                            <li>
+                                <label for="cardnumber" class="required">Card number: </label>
+                                [% IF patrons && patrons > 1 %]
+                                    <input type="text" id="cardnumber" title="Please enter a cardnumber" class="noEnterSubmit valid" name="cardnumber" value="[% newcardnumber | html %]" class="required" required="required">
+                                [% ELSE %]
+                                    <input type="text" id="cardnumber" title="Please enter a cardnumber" name="cardnumber" value="[% cardnumber | html %]" class="required" required="required">
+                                [% END %]
+                                <span class="required">Required</span>
+                            </li>
+                            <li>
 
-                        </select>
-                    <span class="required"> Required</span>
-                </li>
-                <li>
-                    <label for="categorycode_entry" class="required"> Patron category</label>
-                    <select id="categorycode_entry" name="categorycode_entry" onchange="update_category_code(this);">
-                    [% FOREACH category IN categories %]
-                        <option name="categorycode_entry" value = "[% category.categorycode %]">[%category.description %]</option>
-                    [% END %]
-                    </select>
-                    <span class="required">Required</span><br><br>
-                    <b>Note:</b> If you installed sample patron categories please select the "Staff" option in the patron categories dropdown box.
-                </li>
-            </ol>
+                                <!--require a foreach loop to get all the values for the library that the user has either imported (in web installer) or created in the first step of this onboarding tool-->
+                                <label for="libraries" class="required"> Library: </label>
+                                <select name="libraries" size="1" id="libraries">
+                                    [% FOREACH library IN libraries %]
+                                        <option name="libraries" value="[% library.branchcode %]"> [% library.branchname %]
+                                    [% END %]
+                                </select>
+                                <span class="required"> Required</span>
+                            </li>
+                            <li>
+                                <label for="categorycode_entry" class="required"> Patron category</label>
+                                <select id="categorycode_entry" name="categorycode_entry" onchange="update_category_code(this);">
+                                    [% FOREACH category IN categories %]
+                                        <option name="categorycode_entry" value = "[% category.categorycode %]">[%category.description %]</option>
+                                    [% END %]
+                                </select>
+                                <span class="required">Required</span><br><br>
+                                <b>Note:</b> If you installed sample patron categories please select the "Staff" option in the patron categories dropdown box.
+                            </li>
+                        </ol>
 
-            <ol>
-                    <h3> Koha administrator patron permissions</h3>
-                    <li>
-                        <label> superlibrarian</label>
-                    </li>
-            </ol>
-            <ol>
-            <h3>OPAC/Staff Login</h3>
-                <li>
-                    <label for="userid" class="required">Username: </label>
-                    <input type="text" name="userid" id ="userid" size="20" title="Please only enter a username of letters and numbers" value="[% userid |html %]" class="required" required="required" />
-                    <span class="required">Required</span>
-                </li>
-                <li>
-                    <label for="passwordlabel" class="required">Password: </label>
-                    <input type="password" name="password" id="password" size="20" value="[% member.password |html %]" class="required" required="required">
-                    <span class="required">Required</span>
-                </li>
-                <li>
-                    <label for="password2" class="required">Confirm password: </label>
-                    <input type="password" id="password2" name="password2" size="20" value="" class="required" required="required">
-                    <span class="required">Required</span>
-                </li>
-            </ol>
-        <p>
-            To create another patron, go to Patrons -> New Patron. <br>
-            More -> Set Permissions in a user page to gain superlibrarian permissions.
-        </p>
-    </fieldset>
-    <br>
-    <input type="submit" id="Submit" class="action" value="Submit"/>
-</form>
+                        <ol>
+                            <h3> Koha administrator patron permissions</h3>
+                            <li>
+                                <label> superlibrarian</label>
+                            </li>
+                        </ol>
+                        <ol>
+                            <h3>OPAC/Staff Login</h3>
+                            <li>
+                                <label for="userid" class="required">Username: </label>
+                                <input type="text" name="userid" id ="userid" size="20" title="Please only enter a username of letters and numbers" value="[% userid |html %]" class="required" required="required" />
+                                <span class="required">Required</span>
+                            </li>
+                            <li>
+                                <label for="passwordlabel" class="required">Password: </label>
+                                <input type="password" name="password" id="password" size="20" value="[% member.password |html %]" class="required" required="required">
+                                <span class="required">Required</span>
+                            </li>
+                            <li>
+                                <label for="password2" class="required">Confirm password: </label>
+                                <input type="password" id="password2" name="password2" size="20" value="" class="required" required="required">
+                                <span class="required">Required</span>
+                            </li>
+                        </ol>
+                        <p>
+                            To create another patron, go to Patrons -> New Patron. <br>
+                            More -> Set Permissions in a user page to gain superlibrarian permissions.
+                        </p>
+                    </fieldset>
+                    <br>
+                    <input type="submit" class="btn btn-primary" value="Submit" />
+                </form>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
index 4a32f9d..f70cfec 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep4.tt
@@ -6,34 +6,42 @@
 <script type="text/javascript" src="[% interface %]/[% theme %]/js/onboarding.js"></script>
 </head>
 
-[% INCLUDE 'onboarding_messages.inc' %]
+<body id="installer" class="installer">
+    [% INCLUDE 'onboarding_messages.inc' %]
+    <div class="container-fluid">
+        <div class="row">
+            <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
+                <h1 id="logo"><a href="#">Koha</a></h1>
+                <h2>Web installer &rsaquo; Create a new item type </h2>
+                <!--Create a item type screen 1-->
+                <h1 align="center"> Create a new Item type </h1>
+                <p> Item types are used to group related items. Examples of item types are books, cds, and DVDs. <br><br> When adding to your institutions catalogue you will create an item of a particular item type. <br><br> Importantly item types are what you apply     circulation rules to. Circulation rules govern how your institution will lend its items, for example a circulation rule applied to the DVD item type may enforce a payment of $1.00 for borrowing any DVD.</p>
+                <form name="createitemform" method="post" action="onboarding.pl">
+                    <fieldset class="rows">
+                        <input type="hidden" name="step" value="4"/>
+                        <input type="hidden" name="op" value="add_validate_itemtype" />
+                        <ol>
+                            <li>
+                                <label for="itemtype" class="required">Item type code: </label>
+                                <input type="text" name="itemtype" pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" id="itemtype" size="10" maxlength="10"  class="required" required="required" value="[% itemtype.itemtype |html %]" />
+                                <span class="required">Required</span>
+                            </li>
 
-<!--Create a item type screen 1-->
-<h1 align="center"> Create a new Item type </h1>
-<p> Item types are used to group related items. Examples of item types are books, cds, and DVDs. <br><br> When adding to your institutions catalogue you will create an item of a particular item type. <br><br> Importantly item types are what you apply     circulation rules to. Circulation rules govern how your institution will lend its items, for example a circulation rule applied to the DVD item type may enforce a payment of $1.00 for borrowing any DVD.</p>
-<form name="createitemform" method="post" action="onboarding.pl">
-    <fieldset class="rows">
-        <input type="hidden" name="step" value="4"/>
-        <input type="hidden" name="op" value="add_validate_itemtype" />
-        <ol>
-            <li>
-                <label for="itemtype" class="required">Item type code: </label>
-                <input type="text" name="itemtype" pattern="[0-9A-Za-z]{1,10}" title="Please enter up to 10 letters and/or numbers" id="itemtype" size="10" maxlength="10"  class="required" required="required" value="[% itemtype.itemtype |html %]" />
-                <span class="required">Required</span>
-            </li>
-
-            <li>
-                <label for="description" class="required">Description: </label>
-                <input type="text" name="description" id="description" title="Please only enter letters and/or numbers into this item type description" size="42" value="[% itemtype.description |html %]" class="required" required="required">
-                <span class="required">Required</span>
-            </li>
-        </ol>
-    <br>
-    <p> To create another item type later and for more settings <br>
-            go to: <br>
-            More -> Administration -> Item types <br>
-    </p>
-
-    <input type="submit" class="action" value="Submit"/>
-</fieldset>
-</form>
+                            <li>
+                                <label for="description" class="required">Description: </label>
+                                <input type="text" name="description" id="description" title="Please only enter letters and/or numbers into this item type description" size="42" value="[% itemtype.description |html %]" class="required" required="required">
+                                <span class="required">Required</span>
+                            </li>
+                        </ol>
+                        <br>
+                        <p> To create another item type later and for more settings <br>
+                        go to: <br>
+                        More -> Administration -> Item types <br>
+                        </p>
+                        <input type="submit" class="btn btn-primary" value="Submit"/>
+                    </fieldset>
+                </form>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
index 8e3519b..d876b7b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep5.tt
@@ -7,110 +7,120 @@
 </head>
 
 <body id="installer" class="installer">
+    <div class="container-fluid">
+        <div class="row">
+            <div id="installer-step3" class="installer-main col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
+                <h1 id="logo"><a href="#">Koha</a></h1>
+                <h2>Web installer &rsaquo; Complete</h2>
+                [% INCLUDE 'onboarding_messages.inc' %]
 
-[% INCLUDE 'onboarding_messages.inc' %]
+                [% IF all_done %]
+                    <h2>Web installer &rsaquo; Complete</h2>
+                    <h3>Congratulations you have finished and ready to use Koha</h3>
+                    <a class="btn btn-success" href="/cgi-bin/koha/mainpage.pl">Start using Koha</a>
+                [% ELSE %]
+                    <h2>Web installer &rsaquo; Create a new circulation rule </h2>
+                    <form name="createcirculationrule" method="post" action="onboarding.pl">
+                        <fieldset class="rows">
+                            <input type="hidden" name="step" value="5"/>
+                            <input type="hidden" name="op" value="add_validate_circ_rule" />
+                            <ol>
+                                <li>
+                                    <label for="branch" class="required"> Library branch</label>
+                                    <select name="branch" id="branchname" required="required">
+                                        <option value""> Choose</option>
+                                        <option value="*" selected="selected">All</option>
+                                        [% FOREACH library IN libraries %]
+                                            <option id="branch" value="[% library.branchcode %]"> [% library.branchname %]</option>
+                                        [% END %]
+                                    </select>
+                                    <span class="required">Required</span>
+                                </li>
+                                <li>
+                                    <label for="categorycode" class="required">Patron category: </label>
+                                    <select name="categorycode" id="categorycodeselection" required="required" onchange = "update_categorycode(this);">
+                                        <option value=""> Choose</option>
+                                        <option value="*" selected="selected">All</option>
+                                        [% FOREACH category IN categories %]
+                                            <option id="categorycode" value = "[% category.categorycode %]"> [%category.description %]</option>
+                                        [%END%]
+                                    </select>
+                                    <span class="required">Required</span>
+                                </li>
 
-[% IF all_done %]
-<h1>Congratulations you have finished and ready to use Koha</h1>
-<a href="/cgi-bin/koha/mainpage.pl">Start using Koha</a>
-[% ELSE %]
-    <h1 align="left"> Create a new circulation rule </h1>
-    <form name="createcirculationrule" method="post" action="onboarding.pl">
-        <fieldset class="rows">
-           <input type="hidden" name="step" value="5"/>
-           <input type="hidden" name="op" value="add_validate_circ_rule" />
-              <ol>
-              <li>
-                  <label for="branch" class="required"> Library branch</label>
-                  <select name="branch" id="branchname" required="required">
-                  <option value""> Choose</option>
-                  <option value="*" selected="selected">All</option>
-                  [% FOREACH library IN libraries %]
-                      <option id="branch" value="[% library.branchcode %]"> [% library.branchname %]</option>
-                  [% END %]
-                  </select>
-                  <span class="required">Required</span>
-              </li>
-              <li>
-                  <label for="categorycode" class="required">Patron category: </label>
-                  <select name="categorycode" id="categorycodeselection" required="required" onchange = "update_categorycode(this);">
-                      <option value=""> Choose</option>
-                      <option value="*" selected="selected">All</option>
-                      [% FOREACH category IN categories %]
-                          <option id="categorycode" value = "[% category.categorycode %]"> [%category.description %]</option>
-                      [%END%]
-                  </select>
-                  <span class="required">Required</span>
-              </li>
+                                <li>
+                                    <label for="itemtype"> Item type: </label>
+                                    <select id="itemtype" name="itemtype" required="required">
+                                        <option value""> Choose </option>
+                                        <option value="*" selected="selected">All</option>
+                                        [% FOREACH item IN itemtypes %]
+                                            <option name="itemtype" value = "[% item.itemtype %]"> [% item.itemtype %]
+                                        [%END%]
+                                    </select>
+                                    <span class="required"> Required</span>
+                                </li>
+                                <li>
+                                    <label for="maxissueqty" class="required">Current checkouts allowed: </label>
+                                    <input type="number" min="0" name="maxissueqty" title="Please only enter numbers" id="maxissueqty" size="10" value="50" class="required" required="required" />
+                                    <span class="required">Required</span>
+                                </li>
 
-              <li>
-                  <label for="itemtype"> Item type: </label>
-                  <select id="itemtype" name="itemtype" required="required">
-                  <option value""> Choose </option>
-                  <option value="*" selected="selected">All</option>
-                      [% FOREACH item IN itemtypes %]
-                          <option name="itemtype" value = "[% item.itemtype %]"> [% item.itemtype %]
-                      [%END%]
-                  </select>
-                  <span class="required"> Required</span>
-              </li>
-              <li>
-                  <label for="maxissueqty" class="required">Current checkouts allowed: </label>
-                  <input type="number" min="0" name="maxissueqty" title="Please only enter numbers" id="maxissueqty" size="10" value="50" class="required" required="required" />
-                  <span class="required">Required</span>
-              </li>
+                                <li>
+                                    <label for="issuelength" class="required">Loan period: </label>
+                                    <input type="number" min="0" name="issuelength" title="Please only enter numbers" id="issuelength" size="10" value="14" class="required" required="required" />
+                                    <span class="required">Required</span>
+                                </li>
+                                <li>
+                                    <label for="lengthunit">Units: </label>
+                                    <select name="lengthunit" id="lengthunit" required="required">
+                                    <option value=""> Choose </option>
+                                    [% SET units = 'days' %]
+                                        [% IF category %]
+                                            [% SET default_privacy = category.default_privacy %]
+                                        [% END %]
 
-              <li>
-                  <label for="issuelength" class="required">Loan period: </label>
-                  <input type="number" min="0" name="issuelength" title="Please only enter numbers" id="issuelength" size="10" value="14" class="required" required="required" />
-                  <span class="required">Required</span>
-             </li>
-             <li>
-                  <label for="lengthunit">Units: </label>
-                  <select name="lengthunit" id="lengthunit" required="required">
-                  <option value=""> Choose </option>
-                  [% SET units = 'days' %]
-                  [% IF category %]
-                      [% SET default_privacy = category.default_privacy %]
-                  [% END %]
+                                        [% SWITCH units %]
+                                        [% CASE 'days' %]
+                                            <option value="days" selected="selected">Days</option>
+                                            <option value="hours">Hours</option>
+                                        [% CASE 'hours' %]
+                                            <option value="days">Days</option>
+                                            <option value="hours" selected="selected">Hours</option>
+                                        [% END %]
+                                    </select>
+                                </li>
+                                <li>
+                                    <label for="renewalsallowed" class="required">Renewals allowed: </label>
+                                    <input type="number" min="0" name="renewalsallowed" title="Please only enter numbers" id="renewalsallowed" size="10" max="10" value="10" class="required" required="required" />
+                                    <span class="required">Required</span>
+                                </li>
 
-                  [% SWITCH units %]
-                       [% CASE 'days' %]
-                             <option value="days" selected="selected">Days</option>
-                             <option value="hours">Hours</option>
-                       [% CASE 'hours' %]
-                             <option value="days">Days</option>
-                             <option value="hours" selected="selected">Hours</option>
-                  [% END %]
-                  </select>
-               </li>
-               <li>
-                  <label for="renewalsallowed" class="required">Renewals allowed: </label>
-                  <input type="number" min="0" name="renewalsallowed" title="Please only enter numbers" id="renewalsallowed" size="10" max="10" value="10" class="required" required="required" />
-                  <span class="required">Required</span>
-               </li>
+                                <li>
+                                    <label for="renewalperiod" class="required">Renewals period: </label>
+                                    <input type="number" min="0" name="renewalperiod" title="Please only enter numbers" id="renewalperiod" size="10" value="14" class="required" required="required" />
+                                    <span class="required">Required</span>
+                                </li>
 
-               <li>
-                  <label for="renewalperiod" class="required">Renewals period: </label>
-                  <input type="number" min="0" name="renewalperiod" title="Please only enter numbers" id="renewalperiod" size="10" value="14" class="required" required="required" />
-                  <span class="required">Required</span>
-               </li>
+                                <li>
+                                    <label for="onshelfholds">On shelf holds allowed: </label>
+                                    <select name="onshelfholds" id="onshelfholds" required="required">
+                                        <option value="">Choose</option>
+                                        <option value="1" selected="selected">Yes</option>
+                                        <option value="0">If any unavailable</option>
+                                        <option value="2">If all unavailable</option>
+                                    </select>
+                                </li>
+                            </ol>
+                            <p> To create circulation rule, go to <br>
+                            More -> Administration -> Circulation and Fine Rules
+                            </p>
 
-               <li>
-                  <label for="onshelfholds">On shelf holds allowed: </label>
-                  <select name="onshelfholds" id="onshelfholds" required="required">
-                        <option value="">Choose</option>
-                        <option value="1" selected="selected">Yes</option>
-                        <option value="0">If any unavailable</option>
-                        <option value="2">If all unavailable</option>
-                  </select>
-               </li>
-            </ol>
-            <p> To create circulation rule, go to <br>
-            More -> Administration -> Circulation and Fine Rules
-            </p>
-
-        </fieldset><br>
-        <input type="submit" class="action" value="Submit"/>
-    </form>
-[% END %]
+                        </fieldset>
+                        <br>
+                        <input type="submit" class="btn btn-primary" value="Submit" />
+                    </form>
+                [% END %]
+            </div>
+        </div>
+    </div>
+</body>
-- 
2.1.4