MDL-45167 install: Improve styling of installation process
authorAndrew Nicols <andrew@nicols.co.uk>
Wed, 30 Apr 2014 07:21:41 +0000 (15:21 +0800)
committerAndrew Nicols <andrew@nicols.co.uk>
Thu, 1 May 2014 02:43:21 +0000 (10:43 +0800)
install.php
install/css.php
lib/installlib.php

index 75c7ccf..6bad4ac 100644 (file)
@@ -314,7 +314,7 @@ if ($config->stage == INSTALL_SAVE) {
 
             install_print_header($config, 'config.php',
                                           get_string('configurationcompletehead', 'install'),
-                                          get_string('configurationcompletesub', 'install').get_string('configfilenotwritten', 'install'));
+                                          get_string('configurationcompletesub', 'install').get_string('configfilenotwritten', 'install'), 'alert-error');
             echo '<div class="configphp"><pre>';
             echo p($configphp);
             echo '</pre></div>';
@@ -442,39 +442,41 @@ if ($config->stage == INSTALL_DATABASE) {
     echo '<div class="userinput">';
 
     $disabled = empty($distro->dbhost) ? '' : 'disabled="disabled';
-    echo '<div class="formrow"><label for="id_dbhost" class="formlabel">'.$strdbhost.'</label>';
-    echo '<input id="id_dbhost" name="dbhost" '.$disabled.' type="text" value="'.s($config->dbhost).'" size="50" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbhost">'.$strdbhost.'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dbhost" name="dbhost" '.$disabled.' type="text" value="'.s($config->dbhost).'" size="50" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_dbname" class="formlabel">'.$strdbname.'</label>';
-    echo '<input id="id_dbname" name="dbname" type="text" value="'.s($config->dbname).'" size="50" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbname">'.$strdbname.'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dbname" name="dbname" type="text" value="'.s($config->dbname).'" size="50" /></div>';
     echo '</div>';
 
     $disabled = empty($distro->dbuser) ? '' : 'disabled="disabled';
-    echo '<div class="formrow"><label for="id_dbuser" class="formlabel">'.$strdbuser.'</label>';
-    echo '<input id="id_dbuser" name="dbuser" '.$disabled.' type="text" value="'.s($config->dbuser).'" size="50" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbuser">'.$strdbuser.'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dbuser" name="dbuser" '.$disabled.' type="text" value="'.s($config->dbuser).'" size="50" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_dbpass" class="formlabel">'.$strdbpass.'</label>';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbpass">'.$strdbpass.'</label></div>';
     // no password field here, the password may be visible in config.php if we can not write it to disk
-    echo '<input id="id_dbpass" name="dbpass" type="text" value="'.s($config->dbpass).'" size="50" class="forminput" />';
+    echo '<div class="fitemelement"><input id="id_dbpass" name="dbpass" type="text" value="'.s($config->dbpass).'" size="50" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_prefix" class="formlabel">'.$strprefix.'</label>';
-    echo '<input id="id_prefix" name="prefix" type="text" value="'.s($config->prefix).'" size="10" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_prefix">'.$strprefix.'</label></div>';
+    echo '<div class="fitemelement"><input id="id_prefix" name="prefix" type="text" value="'.s($config->prefix).'" size="10" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_prefix" class="formlabel">'.$strdbport.'</label>';
-    echo '<input id="id_dbport" name="dbport" type="text" value="'.s($config->dbport).'" size="10" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_prefix">'.$strdbport.'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dbport" name="dbport" type="text" value="'.s($config->dbport).'" size="10" /></div>';
     echo '</div>';
 
     if (!(stristr(PHP_OS, 'win') && !stristr(PHP_OS, 'darwin'))) {
-        echo '<div class="formrow"><label for="id_dbsocket" class="formlabel">'.$strdbsocket.'</label>';
-        echo '<input id="id_dbsocket" name="dbsocket" type="text" value="'.s($config->dbsocket).'" size="50" class="forminput" />';
+        echo '<div class="fitem"><div class="fitemtitle"><label for="id_dbsocket">'.$strdbsocket.'</label></div>';
+        echo '<div class="fitemelement"><input id="id_dbsocket" name="dbsocket" type="text" value="'.s($config->dbsocket).'" size="50" /></div>';
         echo '</div>';
     }
 
-    echo '<div class="hint">'.$hint_database.'</div>';
+    if ($hint_database !== '') {
+        echo '<div class="alert alert-error">'.$hint_database.'</div>';
+    }
     echo '</div>';
     install_print_footer($config);
     die;
@@ -498,8 +500,8 @@ if ($config->stage == INSTALL_DATABASETYPE) {
                       );
 
     echo '<div class="userinput">';
-    echo '<div class="formrow"><label class="formlabel" for="dbtype">'.get_string('dbtype', 'install').'</label>';
-    echo '<select id="dbtype" name="dbtype" class="forminput">';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="dbtype">'.get_string('dbtype', 'install').'</label></div>';
+    echo '<div class="fitemelement"><select id="dbtype" name="dbtype">';
     $disabled = array();
     $options = array();
     foreach ($databases as $type=>$database) {
@@ -516,7 +518,7 @@ if ($config->stage == INSTALL_DATABASETYPE) {
         }
         echo '</optgroup>';
     }
-    echo '</select></div>';
+    echo '</select></div></div>';
     echo '</div>';
 
     install_print_footer($config);
@@ -577,27 +579,27 @@ if ($config->stage == INSTALL_PATHS) {
     $stradmindirname = get_string('admindirname', 'install');
 
     echo '<div class="userinput">';
-    echo '<div class="formrow"><label for="id_wwwroot" class="formlabel">'.$paths['wwwroot'].'</label>';
-    echo '<input id="id_wwwroot" name="wwwroot" type="text" value="'.s($CFG->wwwroot).'" disabled="disabled" size="70" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_wwwroot">'.$paths['wwwroot'].'</label></div>';
+    echo '<div class="fitemelement"><input id="id_wwwroot" name="wwwroot" type="text" value="'.s($CFG->wwwroot).'" disabled="disabled" size="70" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_dirroot" class="formlabel">'.$paths['dirroot'].'</label>';
-    echo '<input id="id_dirroot" name="dirroot" type="text" value="'.s($CFG->dirroot).'" disabled="disabled" size="70"class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dirroot">'.$paths['dirroot'].'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dirroot" name="dirroot" type="text" value="'.s($CFG->dirroot).'" disabled="disabled" size="70" /></div>';
     echo '</div>';
 
-    echo '<div class="formrow"><label for="id_dataroot" class="formlabel">'.$paths['dataroot'].'</label>';
-    echo '<input id="id_dataroot" name="dataroot" type="text" value="'.s($config->dataroot).'" size="70" class="forminput" />';
+    echo '<div class="fitem"><div class="fitemtitle"><label for="id_dataroot">'.$paths['dataroot'].'</label></div>';
+    echo '<div class="fitemelement"><input id="id_dataroot" name="dataroot" type="text" value="'.s($config->dataroot).'" size="70" /></div>';
     if ($hint_dataroot !== '') {
-        echo '<div class="hint">'.$hint_dataroot.'</div>';
+        echo '<div class="alert alert-error">'.$hint_dataroot.'</div>';
     }
     echo '</div>';
 
 
     if (!file_exists("$CFG->dirroot/admin/environment.xml")) {
-        echo '<div class="formrow"><label for="id_admin" class="formlabel">'.$paths['admindir'].'</label>';
-        echo '<input id="id_admin" name="admin" type="text" value="'.s($config->admin).'" size="10" class="forminput" />';
+        echo '<div class="fitem"><div class="fitemtitle"><label for="id_admin">'.$paths['admindir'].'</label></div>';
+        echo '<div class="fitemelement"><input id="id_admin" name="admin" type="text" value="'.s($config->admin).'" size="10" /></div>';
         if ($hint_admindir !== '') {
-            echo '<div class="hint">'.$hint_admindir.'</div>';
+            echo '<div class="alert alert-error">'.$hint_admindir.'</div>';
         }
         echo '</div>';
     }
@@ -619,7 +621,7 @@ if ($distro) {
 
     install_print_header($config, get_string('language'),
                                   get_string('chooselanguagehead', 'install'),
-                                  $sub);
+                                  $sub, 'alert-success');
 
 } else {
     install_print_header($config, get_string('language'),
@@ -629,13 +631,13 @@ if ($distro) {
 
 $languages = get_string_manager()->get_list_of_translations();
 echo '<div class="userinput">';
-echo '<div class="formrow"><label class="formlabel" for="langselect">'.get_string('language').'</label>';
-echo '<select id="langselect" name="lang" class="forminput" onchange="this.form.submit()">';
+echo '<div class="fitem"><div class="fitemtitle"><label for="langselect">'.get_string('language').'</label></div>';
+echo '<div class="fitemelement"><select id="langselect" name="lang" onchange="this.form.submit()">';
 foreach ($languages as $name=>$value) {
     $selected = ($name == $CFG->lang) ? 'selected="selected"' : '';
     echo '<option value="'.s($name).'" '.$selected.'>'.$value.'</option>';
 }
-echo '</select></div>';
+echo '</select></div></div>';
 echo '</div>';
 
 install_print_footer($config);
index a314e0d..6a30ceb 100644 (file)
@@ -41,7 +41,7 @@ foreach($files as $file) {
     $content .= file_get_contents(dirname(dirname(__FILE__)).'/theme/'.$file) . "\n";
 }
 
-$content .= "
+$content .= <<<EOF
 
 body {
     padding: 4px;
@@ -55,114 +55,317 @@ h2 {
   text-align:center;
 }
 
-input, textarea, .uneditable-input {
+textarea, .uneditable-input {
     width: 50%;
 }
 
-input[type=submit] {
-    width: 30%;
-}
-
 #installdiv {
-  width: 800px;
-  margin-left:auto;
-  margin-right:auto;
+    width: 800px;
+    margin-left:auto;
+    margin-right:auto;
+    padding: 5px;
+    margin-bottom: 15px;
 }
 
 #installdiv dt {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 #installdiv dd {
-  padding-bottom: 0.5em;
+    padding-bottom: 0.5em;
 }
 
 .stage {
-  margin-top: 2em;
-  margin-bottom: 2em;
-  width: 100%;
-  padding:25px;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding: 25px;
 }
 
 #installform {
-  width: 100%;
-}
-
-#nav_buttons input {
-  margin: 5px;
+    width: 100%;
 }
 
 #envresult {
-  text-align:left;
-  width: auto;
-  margin-left:10em;
+    text-align:left;
+    width: auto;
+    margin-left:10em;
 }
 
 #envresult dd {
-  color: red;
+    color: red;
 }
 
-.formrow {
-  clear:both;
-  text-align:left;
-  padding: 8px;
+fieldset {
+    text-align:center;
+    border:none;
 }
 
-.formrow label.formlabel {
-  display:block;
-  float:left;
-  width: 160px;
-  margin-right:5px;
-  text-align:right;
+fieldset .configphp,
+fieldset .alert {
+    text-align: left;
 }
 
-.formrow .forminput {
-  display:block;
-  float:left;
+.sitelink {
+    text-align: center;
 }
 
-fieldset {
-  text-align:center;
-  border:none;
+/*
+MDL-43839 IE9 cannot handle all of our CSS.
+Once IE9 is no longer supported we can include 'bootstrapbase/style/moodle.css' above
+and remove the following.
+*/
+
+#page-footer {
+    padding: 1em 0;
+    margin-top: 1em;
+    border-top: 2px solid #ddd;
 }
 
-.hint {
-  display:block;
-  clear:both;
-  padding-left: 265px;
-  color: red;
+.fitem {
+    clear:both;
+    text-align:left;
+    padding: 8px;
 }
 
-.configphp {
-  text-align:left;
-  background-color:white;
-  padding:1em;
-  width:95%;
+.fitemtitle {
+    float: left;
+    width: 245px;
+    text-align: right;
 }
 
-.stage6 .stage {
-  font-weight: bold;
-  color: red;
+label {
+    font-weight: bold;
+    display: inline-block;
+    margin: 5px;
+}
+
+.fitemelement {
+    margin-left: 265px;
+}
+
+.alert, .alert h4 {
+    color: #c09853;
+}
+.alert {
+    padding: 8px 35px 8px 14px;
+    margin-bottom: 20px;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+    background-color: #fcf8e3;
+    border: 1px solid #fbeed5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.alert-info {
+    color: #3a87ad;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.alert-success {
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.alert-error {
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 20px;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,0.15);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.notifytiny {
+    font-size: 10.5px;
+}
+
+input[type="button"], input[type="submit"] {
+    margin: 0 0 10px 5px;
+    display: inline-block;
+    padding: 4px 12px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #f5f5f5;
+    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
+    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
+    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
+    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
+    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
+    background-repeat: repeat-x;
+    border: 1px solid #ccc;
+    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+    border-bottom-color: #b3b3b3;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+}
+
+input[type="button"]:hover, input[type="submit"]:hover, input[type="button"]:focus, input[type="submit"]:focus {
+    color: #333;
+    text-decoration: none;
+    background-position: 0 -15px;
+    -webkit-transition: background-position .1s linear;
+    -moz-transition: background-position .1s linear;
+    -o-transition: background-position .1s linear;
+    transition: background-position .1s linear;
+}
+
+input[type="button"]:hover, input[type="submit"]:hover, input[type="button"]:focus, input[type="submit"]:focus, input[type="button"]:active, input[type="submit"]:active, input[type="button"].active, input[type="submit"].active, input[type="button"].disabled, input[type="submit"].disabled, input[type="reset"].disabled, input[type="submit"][disabled], input[type="reset"][disabled] {
+    color: #333;
+    background-color: #e6e6e6;
+}
+
+button, input, select, textarea {
+    margin: 0;
+}
+
+select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
+    display: inline-block;
+    height: 20px;
+    padding: 4px 6px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #555;
+    vertical-align: middle;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+select {
+    background-color: #fff;
+    border: 1px solid #ccc;
+}
+
+label, select, button, input[type="button"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
+    cursor: pointer;
+}
+
+
+select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
+    display: inline-block;
+    height: 20px;
+    padding: 4px 6px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #555;
+    vertical-align: middle;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+select, input[type="file"] {
+    height: 30px;
+    line-height: 30px;
+}
+
+textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    -webkit-transition: border linear .2s,box-shadow linear .2s;
+    -moz-transition: border linear .2s,box-shadow linear .2s;
+    -o-transition: border linear .2s,box-shadow linear .2s;
+    transition: border linear .2s,box-shadow linear .2s;
+}
+
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
+    cursor: not-allowed;
+    background-color: #eee;
+}
+
+input.btn-primary {
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+    background-color: #005aa8;
+    background-image: -moz-linear-gradient(top,#0070a8,#0038a8);
+    background-image: -webkit-gradient(linear,0 0,0 100%,from(#0070a8),to(#0038a8));
+    background-image: -webkit-linear-gradient(top,#0070a8,#0038a8);
+    background-image: -o-linear-gradient(top,#0070a8,#0038a8);
+    background-image: linear-gradient(to bottom,#0070a8,#0038a8);
+    background-repeat: repeat-x;
+    border-color: #0038a8 #0038a8 #001e5c;
+    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0070a8',endColorstr='#ff0038a8',GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+input.btn-primary:hover,
+input.btn-primary:active,
+input.btn-primary:focus {
+    color: #fff;
+    background-color: #0038a8;
+}
+
+
+.breadcrumb {
+    background-color: #f5f5f5;
+}
+.breadcrumb {
+    padding: 8px 15px;
+    margin: 0 0 20px;
+    list-style: none;
+    background-color: #f5f5f5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.breadcrumb > li {
+    display: inline-block;
+    text-shadow: 0 1px 0 #fff;
+    line-height: 20px;
 }
 
-/*
-MDL-43839 IE9 cannot handle all of our CSS.
-Once IE9 is no longer supported we can include 'bootstrapbase/style/moodle.css' above
-and remove the following.
-*/
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333;
 }
 .breadcrumb {
-  background-color: rgb(245, 245, 245);
-  padding: 8px 15px;
+    background-color: rgb(245, 245, 245);
+    padding: 8px 15px;
 }
 /*
 End of MDL-43839 IE9 specific CSS.
 */
 
-";
+EOF;
 
 // fix used urls
 $content = str_replace('[[pix:theme|hgradient]]', '../theme/standard/pix/hgradient.jpg', $content);
index e6f468f..c1ae4d5 100644 (file)
@@ -197,12 +197,22 @@ function install_db_validate($database, $dbhost, $dbuser, $dbpass, $dbname, $pre
         $legacystring = $ex->errorcode;
         if ($stringmanager->string_exists($errorstring, $ex->module)) {
             // By using a different string id from the error code we are separating exception handling and output.
-            return $stringmanager->get_string($errorstring, $ex->module, $ex->a).'<br />'.$ex->debuginfo;
+            $returnstring = $stringmanager->get_string($errorstring, $ex->module, $ex->a);
+            if ($ex->debuginfo) {
+                $returnstring .= '<br />'.$ex->debuginfo;
+            }
+
+            return $returnstring;
         } else if ($stringmanager->string_exists($legacystring, $ex->module)) {
             // There are some DML exceptions that may be thrown here as well as during normal operation.
             // If we have a translated message already we still want to serve it here.
             // However it is not the preferred way.
-            return $stringmanager->get_string($legacystring, $ex->module, $ex->a).'<br />'.$ex->debuginfo;
+            $returnstring = $stringmanager->get_string($legacystring, $ex->module, $ex->a);
+            if ($ex->debuginfo) {
+                $returnstring .= '<br />'.$ex->debuginfo;
+            }
+
+            return $returnstring;
         }
         // No specific translation. Deliver a generic error message.
         return $stringmanager->get_string('dmlexceptiononinstall', 'error', $ex);
@@ -302,9 +312,10 @@ function install_print_help_page($help) {
  * @param string $stagename
  * @param string $heading
  * @param string $stagetext
+ * @param string $stageclass
  * @return void
  */
-function install_print_header($config, $stagename, $heading, $stagetext) {
+function install_print_header($config, $stagename, $heading, $stagetext, $stageclass = "alert-info") {
     global $CFG;
 
     @header('Content-Type: text/html; charset=UTF-8');
@@ -334,9 +345,9 @@ function install_print_header($config, $stagename, $heading, $stagetext) {
                         <div class="headermenu">&nbsp;</div>
                     </div>
                     <div class="navbar clearfix">
-                        <div class="breadcrumb">
-                            <ul><li class="first">'.$stagename.'</li></ul>
-                        </div>
+                        <nav class="breadcrumb-nav">
+                            <ul class="breadcrumb"><li class="first">'.$stagename.'</li></ul>
+                        </nav>
                         <div class="navbutton">&nbsp;</div>
                     </div>
                 </div>
@@ -346,7 +357,7 @@ function install_print_header($config, $stagename, $heading, $stagetext) {
     echo '<h2>'.$heading.'</h2>';
 
     if ($stagetext !== '') {
-        echo '<div class="stage generalbox box">';
+        echo '<div class="alert ' . $stageclass . '">';
         echo $stagetext;
         echo '</div>';
     }
@@ -382,9 +393,9 @@ function install_print_footer($config, $reload=false) {
     }
 
     if ($reload) {
-        $next = '<input type="submit" id="nextbutton" name="next" value="'.s(get_string('reload')).'" />';
+        $next = '<input type="submit" id="nextbutton" class="btn btn-primary" name="next" value="'.s(get_string('reload')).'" />';
     } else {
-        $next = '<input type="submit" id="nextbutton" name="next" value="'.s(get_string('next')).' &raquo;" />';
+        $next = '<input type="submit" id="nextbutton" class="btn btn-primary" name="next" value="'.s(get_string('next')).' &raquo;" />';
     }
 
     echo '</fieldset><fieldset id="nav_buttons">'.$first.$next.'</fieldset>';
@@ -394,7 +405,7 @@ function install_print_footer($config, $reload=false) {
        '<img src="pix/moodlelogo.png" alt="moodlelogo" /></a></div>';
 
     echo '</form></div>';
-    echo '<div id="footer"><hr />'.$homelink.'</div>';
+    echo '<div id="page-footer">'.$homelink.'</div>';
     echo '</div></body></html>';
 }