Typography styling (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: Ie02bb3bb178921bc16a6deae3016915f8ca3b51d

htdocs/artefact/file/profileicons.php

@@ -106,7 +106,7 @@ var table = new TableRenderer(
             if (rowdata['isdefault'] == 't' || rowdata['isdefault'] == 1) {
                 options.checked = 'checked';
             }
-            var label = LABEL({'class': 'accessible-hidden', 'for': 'setdefault_' + rowdata.id}, {$setdefault});
+            var label = LABEL({'class': 'accessible-hidden sr-only', 'for': 'setdefault_' + rowdata.id}, {$setdefault});
             return TD({'class': 'defaultcell'}, INPUT(options), label);
         },
         function(rowdata) {
@@ -120,7 +120,7 @@ var table = new TableRenderer(
             if (!rowdata.id) {
                 options.disabled = 'disabled';
             }
-            var label = LABEL({'class': 'accessible-hidden', 'for': 'markdelete_' + rowdata.id}, {$markfordeletion});
+            var label = LABEL({'class': 'accessible-hidden sr-only', 'for': 'markdelete_' + rowdata.id}, {$markfordeletion});
             return TD({'class': 'deletecell'}, INPUT(options), label);
         }
     ]

htdocs/auth/lib.php

@@ -1270,6 +1270,7 @@ function auth_get_login_form_elements() {
         ),
         'submit' => array(
             'type'  => 'submit',
+            'class' => 'btn btn-success',
             'value' => get_string('login')
         ),
         'register' => array(

htdocs/group/find.php

@@ -66,12 +66,14 @@ if (get_config('allowgroupcategories')
 }
 $elements['search'] = array(
             'type' => 'submit',
+            'class' => 'btn btn-success',
             'value' => get_string('search'));
 $searchform = pieform(array(
     'name'   => 'search',
     'checkdirtychange' => false,
     'method' => 'post',
     'renderer' => 'oneline',
+    'class' => 'form-inline',
     'elements' => $elements
     )
 );

htdocs/group/mygroups.php

@@ -54,13 +54,14 @@ if (get_config('allowgroupcategories')
 }
 $elements['submit'] = array(
             'type' => 'submit',
+            'class' => 'btn btn-success',
             'value' => get_string('filter'));
 $form = pieform(array(
     'name'   => 'filter',
     'checkdirtychange' => false,
     'method' => 'post',
     'renderer' => 'oneline',
-    'class' => 'filter-form form-inline',
+    'class' => 'form-inline',
     'elements' => $elements
 ));
 

htdocs/js/mahara.js

@@ -129,7 +129,7 @@ function globalErrorHandler(data) {
 function show_login_form(submit) {
     if($('ajax-login-form') == null) {
         var loginForm = DIV({id: 'ajax-login-form'});
-        loginForm.innerHTML = '<h2>' + get_string('login') + '</h2><a href="/">&laquo; ' + get_string('home') + '<\/a><div id="loginmessage">' + get_string('sessiontimedout') + '</div><form class="pieform" name="login" method="post" action="" id="login" onsubmit="' + submit + '(this, 42); return false;"><table cellspacing="0" border="0" class="maharatable"><tbody><tr id="login_login_username_header" class="required text"><th><label for="login_login_username">' + get_string('username') + ':<\/label><\/th><\/tr><tr id="login_login_username_container"><td><input type="text" class="required text autofocus" id="login_login_username" name="login_username" value=""><\/td><\/tr><tr><td class="description"> <\/td><\/tr><tr id="login_login_password_header" class="required password"><th><label for="login_login_password">' + get_string('password') + ':<\/label><\/th><\/tr><tr id="login_login_password_container"><td><input type="password" class="required password" id="login_login_password" name="login_password" value=""><\/td><\/tr><tr><td class="description"> <\/td><\/tr><tr id="login_submit_container"><td><input type="submit" class="submit" id="login_submit" name="submit" value="' + get_string('login') + '"><\/td><\/tr><\/tbody><\/table><div id="homepage"><\/div><input type="hidden" name="sesskey" value=""><input type="hidden" name="pieform_login" value=""><\/form><script type="application\/javascript">var login_btn = null;addLoadEvent(function() {    connect($(\'login_submit\'), \'onclick\', function() { login_btn = \'login_submit\'; });});connect(\'login\', \'onsubmit\', function() { formStartProcessing(\'login\', login_btn); });<\/script>';
+        loginForm.innerHTML = '<h2>' + get_string('login') + '</h2><a href="/">&laquo; ' + get_string('home') + '<\/a><div id="loginmessage">' + get_string('sessiontimedout') + '</div><form class="pieform" name="login" method="post" action="" id="login" onsubmit="' + submit + '(this, 42); return false;"><table cellspacing="0" border="0" class="maharatable"><tbody><tr id="login_login_username_header" class="required text"><th><label for="login_login_username">' + get_string('username') + ':<\/label><\/th><\/tr><tr id="login_login_username_container"><td><input type="text" class="required text autofocus" id="login_login_username" name="login_username" value=""><\/td><\/tr><tr><td class="description"> <\/td><\/tr><tr id="login_login_password_header" class="required password"><th><label for="login_login_password">' + get_string('password') + ':<\/label><\/th><\/tr><tr id="login_login_password_container"><td><input type="password" class="required password" id="login_login_password" name="login_password" value=""><\/td><\/tr><tr><td class="description"> <\/td><\/tr><tr id="login_submit_container"><td><input type="submit" class="submit btn btn-success" id="login_submit" name="submit" value="' + get_string('login') + '"><\/td><\/tr><\/tbody><\/table><div id="homepage"><\/div><input type="hidden" name="sesskey" value=""><input type="hidden" name="pieform_login" value=""><\/form><script type="text\/javascript">var login_btn = null;addLoadEvent(function() {    connect($(\'login_submit\'), \'onclick\', function() { login_btn = \'login_submit\'; });});connect(\'login\', \'onsubmit\', function() { formStartProcessing(\'login\', login_btn); });<\/script>';
         appendChildNodes(document.body, DIV({id: 'overlay'}));
         appendChildNodes(document.body, loginForm);
         $('login_login_username').focus();

htdocs/lib/pieforms/pieform/renderers/div.php

@@ -42,10 +42,15 @@ function pieform_renderer_div(Pieform $form, $element) {/*{{{*/
     if (!empty($element['class'])) {
 
         // add form-group classes to all real form fields
-        if ($element['class'] !== 'html') {
+        if (strpos($element['class'],'html') === false) {
             $element['class'] = $element['class'] . ' form-group';
         }
 
+        // add bootstrap has-error class to any error fields
+        if (strpos($element['class'],'error') !== false) {
+             $element['class'] = $element['class'] . ' has-error';
+        }
+
         $result .= ' class="' . Pieform::hsc($element['class']) . '"';
 
     }

htdocs/lib/pieforms/pieform/renderers/oneline.php

@@ -47,6 +47,16 @@ function pieform_renderer_oneline(Pieform $form, $element) {/*{{{*/
         $result .= ' id="' . $formname . '_' . Pieform::hsc($element['name']) . '_container"';
     }
     if (!empty($element['class'])) {
+                // add form-group classes to all real form fields
+        if (strpos($element['class'],'html') === false) {
+            $element['class'] = $element['class'] . ' form-group-inline';
+        }
+
+        // add bootstrap has-error class to any error fields
+        if (strpos($element['class'],'error') !== false) {
+             $element['class'] = $element['class'] . ' has-error';
+        }
+
         $result .= ' class="' . Pieform::hsc($element['class']) . '"';
     }
     $result .= '>';

htdocs/lib/user.php

@@ -2105,6 +2105,7 @@ function acceptfriend_form($friendid) {
         'elements' => array(
             'acceptfriend_submit' => array(
                 'type' => 'submit',
+                'class' => 'btn btn-success',
                 'value' => get_string('approverequest', 'group'),
             ),
             'id' => array(

htdocs/lib/web.php

@@ -2079,11 +2079,7 @@ function get_help_icon($plugintype, $pluginname, $form, $element, $page='', $sec
             json_encode($pluginname) . ',' . json_encode($page) . ',' .
             json_encode($section)
             . ',this); return false;'
-<<<<<<< HEAD
-        ) . '"><img src="' . $THEME->get_image_url('help') . '" alt="' . get_string('Help') . '" title="' . get_string('Help') . '"></a></span>';
-=======
         ) . '"><span class="glyphicon glyphicon-info-sign"></span><span class="sr-only">Help</span></a></span>';
->>>>>>> Form styling (bootstrap)
 }
 
 function pieform_get_help(Pieform $form, $element) {

htdocs/theme/bootstrap/artefact/blog/templates/posts.tpl

 {foreach from=$posts item=post}
-    <div id="posttitle_{$post->id}" class="{if $post->published}published{else}draft{/if}">
-        <div class="fr">
+    <div id="posttitle_{$post->id}" class="{if $post->published}published{else}draft{/if} listrow">
+        <div class="pull-right">
             <span id="poststatus{$post->id}" class="poststatus">
                 {if $post->published}
                     {str tag=published section=artefact.blog}
@@ -35,13 +35,14 @@
         {if $post->tags}<div id="posttags_{$post->id}" class="tags">{str tag=tags}: {list_tags owner=$post->author tags=$post->tags}</div>{/if}
         {if $post->files}
             <div id="postfiles_{$post->id}">
-                <table class="cb attachments fullwidth">
+                <table class="cb attachments fullwidth table table-striped">
                     <thead class="expandable-head">
                         <tr>
                             <td colspan="2">
                                 <a class="toggle" href="#">{str tag=attachedfiles section=artefact.blog}</a>
-                                <span class="fr">
-                                    <img class="fl" src="{theme_url filename='images/attachment.png'}" alt="{str tag=Attachments section=artefact.resume}">
+                                <span class="pull-right">
+                                    <span class="glyphicon glyphicon-paperclip"></span>
+                                    <span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
                                     {$post->files|count}
                                 </span>
                             </td>

htdocs/theme/bootstrap/artefact/blog/templates/view.tpl

 {include file="header.tpl"}
             <div id="myblogs" class="rel">
 
-                <div class="rbuttons">
-                    <a class="btn addpost" href="{$WWWROOT}artefact/blog/post.php?blog={$blog->get('id')}">{str section="artefact.blog" tag="addpost"}</a>
+                <div class="pull-right">
+                    <a class="btn btn-success addpost" href="{$WWWROOT}artefact/blog/post.php?blog={$blog->get('id')}">{str section="artefact.blog" tag="addpost"}</a>
                 {if !$blog->get('locked')}
-                    <a class="btn settings" href="{$WWWROOT}artefact/blog/settings/index.php?id={$blog->get('id')}">{str section="artefact.blog" tag="settings"}</a>
+                    <a class="btn btn-success settings" href="{$WWWROOT}artefact/blog/settings/index.php?id={$blog->get('id')}">{str section="artefact.blog" tag="settings"}</a>
                 {/if}
                 </div>
 
@@ -12,7 +12,7 @@
                 {if $blog->get('tags')}<div class="tags">{str tag=tags}: {list_tags owner=$blog->get('owner') tags=$blog->get('tags')}</div>{/if}
 
                 {if $posts}
-                <div id="postlist" class="fullwidth">
+                <div id="postlist" class="fullwidth listing">
                     {$posts.tablerows|safe}
                 </div>
                 <div id="blogpost_page_container" class="hidden">{$posts.pagination|safe}</div>

htdocs/theme/bootstrap/artefact/file/templates/form/filelist.tpl

 {if !$filelist}
 <p>{str tag=nofilesfound section=artefact.file}</p>
 {else}
-<table id="{$prefix}_filelist" class="tablerenderer filelist fullwidth table">
+<table id="{$prefix}_filelist" class="tablerenderer filelist fullwidth table table-striped">
  <thead>
   <tr>
    <th></th>

htdocs/theme/bootstrap/artefact/internal/templates/notes.tpl

 {include file="header.tpl"}
 <p>{str tag=notesdescription1 section=artefact.internal}</p>
-<table id="notes" class="fullwidth listing">
+<table id="notes" class="table table-striped">
   <thead>
     <tr>
       <th>{str tag=Note section=artefact.internal}</th>
       <th>{str tag=currenttitle section=artefact.internal}</th>
       <th>{str tag=containedin section=artefact.internal}</th>
-      <th class="center"><img src="{theme_url filename="images/attachment.png"}" title="{str tag=Attachments section=artefact.resume}" alt="{str tag=Attachments section=artefact.resume}" /></th>
+      <th class="text-center">
+        <span class="glyphicon glyphicon-paperclip"></span>
+        <span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
+      </th>
       <th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
     </tr>
   </thead>
@@ -15,9 +18,9 @@
     <tr class="{cycle values='r1,r0'}">
       <td class="note-name">
       {if $n->locked}
-        <h3 class="title"><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
+        <h3><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {else}
-        <h3 class="title"><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
+        <h3><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {/if}
        <div id="n{$n->id}_desc" class="hidden detail">{$n->description|clean_html|safe}
             {if $n->files}
@@ -27,7 +30,7 @@
                         <tr>
                             <td colspan="2">
                                 <a class="toggle" href="#">{str tag=attachedfiles section=artefact.blog}</a>
-                                <span class="fr">
+                                <span class="pull-right">
                                     <img class="fl" src="{theme_url filename='images/attachment.png'}" alt="{str tag=attachments section=artefact.blog}">
                                     {$n->files|count}
                                 </span>
@@ -78,7 +81,10 @@
       {if $n->locked}
         <span class="s dull">{str tag=Submitted section=view}</span>
       {else}
-        <a href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" title="{str tag=edit}"><img src="{theme_url filename='images/btn_edit.png'}" alt="{str(tag=editspecific arg1=$n->title)|escape:html|safe}"></a>
+        <a href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" title="{str tag=edit}">
+          <span class="glyphicon glyphicon-pencil"></span>
+          <span class="sr-only">{str(tag=editspecific arg1=$n->title)|escape:html|safe}</span>
+        </a>
         {if $n->deleteform}{$n->deleteform|safe}{/if}
       {/if}
       </td>

htdocs/theme/bootstrap/artefact/internal/templates/socialprofiles.tpl

@@ -19,9 +19,15 @@
             <td><span>{$row->description}</span></td>
             <td>{if $row->link}<a href="{$row->link}" title="{$row->link}" target="_blank" class="socialprofile">{/if}{$row->title}{if $row->link}</a>{/if}</td>
             {if $controls}<td class="right buttonscell btns2">
-                <a href="{$WWWROOT}artefact/internal/socialprofile.php?id={$row->id}" title="{str tag='edit'}"><img src="{theme_url filename='images/btn_edit.png'}" alt="{str tag='edit'}"></a>
+                <a href="{$WWWROOT}artefact/internal/socialprofile.php?id={$row->id}" title="{str tag='edit'}" class="btn btn-default btn-xs">
+                    <span class="glyphicon glyphicon-pencil"></span>
+                    <span class="sr-only">{str tag='edit'}</span>
+                </a>
                 {if $candelete}
-                <a href="{$WWWROOT}artefact/internal/socialprofile.php?id={$row->id}&delete=1" title="{str tag='delete'}"><img src="{theme_url filename='images/btn_deleteremove.png'}" alt="{str tag='delete'}"></a>
+                <a href="{$WWWROOT}artefact/internal/socialprofile.php?id={$row->id}&delete=1" title="{str tag='delete'}" class="btn btn-danger btn-xs">
+                    <span class="glyphicon glyphicon-trash"></span>
+                    <span class="sr-only">{str tag='delete'}</span>
+                </a>
                 {/if}
             </td>{/if}
         </tr>

htdocs/theme/bootstrap/artefact/plans/templates/index.tpl

 {include file="header.tpl"}
 <div id="planswrap">
-    <div class="rbuttons">
-        <a class="btn" href="{$WWWROOT}artefact/plans/new.php">{str section="artefact.plans" tag="newplan"}</a>
+    <div class="align-right">
+        <a class="btn btn-success" href="{$WWWROOT}artefact/plans/new.php">{str section="artefact.plans" tag="newplan"}</a>
     </div>
 {if !$plans.data}
     <div class="message">{$strnoplansaddone|safe}</div>

htdocs/theme/bootstrap/artefact/plans/templates/plan.tpl

@@ -8,7 +8,7 @@
     <div>{$planstasksdescription}</div>
     <div class="message">{$strnotasksaddone|safe}</div>
 {else}
-<table id="taskslist" class="fullwidth listing">
+<table id="taskslist" class="fullwidth listing table table-striped">
     <thead>
         <tr>
             <th>{str tag='completiondate' section='artefact.plans'}</th>

htdocs/theme/bootstrap/artefact/plans/templates/planslist.tpl

 {foreach from=$plans.data item=plan}
     <div class="{cycle values='r0,r1'} listrow">
-            <h3 class="title"><a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}">{$plan->title}</a></h3>
+            <h3 class="title pull-left"><a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}">{$plan->title}</a></h3>
 
-            <div class="fr planstatus">
-                <a href="{$WWWROOT}artefact/plans/edit/index.php?id={$plan->id}" title="{str tag=edit}" >
-                    <img src="{theme_url filename='images/btn_edit.png'}" alt="{str(tag=editspecific arg1=$plan->title)|escape:html|safe}"></a>
-                <a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}" title="{str tag=managetasks section=artefact.plans}">
-                    <img src="{theme_url filename='images/btn_configure.png'}" alt="{str(tag=managetasksspecific section=artefact.plans arg1=$plan->title)|escape:html|safe}"></a>
-                <a href="{$WWWROOT}artefact/plans/delete/index.php?id={$plan->id}" title="{str tag=delete}">
-                    <img src="{theme_url filename='images/btn_deleteremove.png'}" alt="{str(tag=deletespecific arg1=$plan->title)|escape:html|safe}"></a>
+            <div class="pull-right planstatus">
+                <a href="{$WWWROOT}artefact/plans/edit/index.php?id={$plan->id}" title="{str tag=edit}" class="btn btn-default btn-xs">
+                    <span class="glyphicon glyphicon-pencil"></span>
+                    <span class="sr-only">{str(tag=editspecific arg1=$plan->title)|escape:html|safe}</span>
+                </a>
+                <a href="{$WWWROOT}artefact/plans/plan.php?id={$plan->id}" title="{str tag=managetasks section=artefact.plans}" class="btn btn-default btn-xs">
+                    <span class="glyphicon glyphicon-cog"></span>
+                    <span class="sr-only">{str(tag=managetasksspecific section=artefact.plans arg1=$plan->title)|escape:html|safe}</span>
+                </a>
+                <a href="{$WWWROOT}artefact/plans/delete/index.php?id={$plan->id}" title="{str tag=delete}" class="btn btn-danger btn-xs">
+                    <span class="glyphicon glyphicon-trash"></span>
+                    <span class="sr-only">{str(tag=deletespecific arg1=$plan->title)|escape:html|safe}</span>
+                </a>
             </div>
 
             <div class="detail">{$plan->description|clean_html|safe}</div>

htdocs/theme/bootstrap/artefact/resume/templates/fragments/goals.tpl

@@ -3,11 +3,14 @@
     {contextualhelp plugintype='artefact' pluginname='resume' section='mygoals'}
 {/if}
 </legend>{/if}
-<table id="goalslist{$suffix}" class="tablerenderer fullwidth">
+<table id="goalslist{$suffix}" class="tablerenderer fullwidth table table-striped">
     <thead>
         <tr>
             <th>{str tag='goals' section='artefact.resume'}</th>
-            <th class="resumeattachments center"><img src="{theme_url filename="images/attachment.png"}" title="{str tag=Attachments section=artefact.resume}" alt="{str tag=Attachments section=artefact.resume}" /></th>
+            <th class="resumeattachments text-center">
+              <span class="glyphicon glyphicon-paperclip">
+              <span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
+            </th>
             <th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
         </tr>
     </thead>
@@ -16,7 +19,7 @@
     <tr class="{cycle values='r0,r1'}">
         <td class="goaltitle">
         {if $n->exists}
-          <h3 class="title"><a class="goaltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
+          <h3><a class="goaltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
           <div id="n{$n->id}_desc" class="hidden detail">{if $n->description != ''}{$n->description|clean_html|safe}{else}{str tag=nodescription section=artefact.resume}{/if}
           {if $n->files}
               <div id="resume_{$n->id}">
@@ -39,18 +42,20 @@
           </div>
           {/if}
         {else}
-          <h3 class="title">{str tag=$n->artefacttype section='artefact.resume'}</h3>
+          <h3>{str tag=$n->artefacttype section='artefact.resume'}</h3>
         {/if}
         </td>
         <td align="center">{$n->count}</td>
         <td class="right buttonscell btns2">
         {if $n->exists}
-        <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
-            <img src="{theme_url filename='images/btn_edit.png'}" alt="{str tag=edit}">
+        <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
+            <span class="glyphicon glyphicon-pencil"></span>
+            <span class="sr-only">{str tag=edit}</span>
         </a>
         {else}
-        <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
-            <img src="{theme_url filename='images/btn_edit.png'}" alt="{str tag=edit}">
+        <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
+          <span class="glyphicon glyphicon-pencil"></span>
+          <span class="sr-only">{str tag=edit}</span>
         </a>
         {/if}
         </td>

htdocs/theme/bootstrap/artefact/resume/templates/fragments/skills.tpl

@@ -3,11 +3,14 @@
     {contextualhelp plugintype='artefact' pluginname='resume' section='myskills'}
 {/if}
 </legend>{/if}
-<table id="skillslist{$suffix}" class="tablerenderer fullwidth">
+<table id="skillslist{$suffix}" class="tablerenderer fullwidth table table-striped">
     <thead>
         <tr>
             <th>{str tag='skills' section='artefact.resume'}</th>
-            <th class="resumeattachments center"><img src="{theme_url filename="images/attachment.png"}" title="{str tag=Attachments section=artefact.resume}" alt="{str tag=Attachments section=artefact.resume}" /></th>
+            <th class="resumeattachments text-center">
+              <span class="glyphicon glyphicon-paperclip"></span>
+              <span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
+            </th>
             <th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
         </tr>
     </thead>
@@ -16,7 +19,7 @@
     <tr class="{cycle values='r0,r1'}">
         <td class="skilltitle">
         {if $n->exists}
-          <h3 class="title"><a class="skilltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
+          <h3><a class="skilltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
           <div id="n{$n->id}_desc" class="hidden detail">{if $n->description != ''}{$n->description|clean_html|safe}{else}{str tag=nodescription section=artefact.resume}{/if}
           {if $n->files}
               <div id="resume_{$n->id}">
@@ -39,15 +42,21 @@
           </div>
           {/if}
         {else}
-          <h3 class="title">{str tag=$n->artefacttype section='artefact.resume'}</h3>
+          <h3>{str tag=$n->artefacttype section='artefact.resume'}</h3>
         {/if}
         </td>
         <td align="center">{$n->count}</td>
         <td class="right buttonscell btns2">
         {if $n->exists}
-          <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}"><img src="{theme_url filename='images/btn_edit.png'}" alt="{str tag=edit}"></a>
+          <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
+            <span class="glyphicon glyphicon-pencil"></span>
+            <span class="sr-only">{str tag=edit}</span>
+          </a>
         {else}
-          <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}"><img src="{theme_url filename='images/btn_edit.png'}" alt="{str tag=edit}"></a>
+          <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
+            <span class="glyphicon glyphicon-pencil"></span>
+            <span class="sr-only">{str tag=edit}</span>
+          </a>
         {/if}
         </td>
     </tr>

htdocs/theme/bootstrap/static/js/theme.js

@@ -3,32 +3,37 @@
 jQuery(function($) {
 "use strict";
 
-	$('.pieform.jstabs').prepend('<ul class="nav nav-tabs"></ul>');
+    $('.pieform.jstabs').prepend('<ul class="nav nav-tabs"></ul>');
 
-	var id,
-		listitem,
-		heading,
-		tabcontent = $('.pieform.jstabs .pieform-fieldset').parent(),
-		tabnav = $('.pieform.jstabs').find('.nav-tabs');
+    var id,
+        listitem,
+        heading,
+        tabcontent = $('.pieform.jstabs .pieform-fieldset').parent(),
+        tabnav = $('.pieform.jstabs').find('.nav-tabs');
 
-	// Remove class collasped that has been generated by pieform
-	$('.pieform-fieldset').removeClass('collapsed');
-	tabcontent.removeClass('collapsed');
+    // Remove class collasped that has been generated by pieform
+    $('.pieform-fieldset').removeClass('collapsed');
+    tabcontent.removeClass('collapsed');
 
-	// Add div and bootstrap class on tabcontent to show and hide
-	tabcontent.addClass('tab-pane').wrapAll('<div class="tab-content">');
-	tabcontent.first().addClass('active');
+    // Add div and bootstrap class on tabcontent to show and hide
+    tabcontent.addClass('tab-pane').wrapAll('<div class="tab-content">');
+    tabcontent.first().addClass('active');
 
 // Set up tab navigation
-	for(var i = 0; i < tabcontent.length; i = i + 1){
-		// get id and title from div (tabcontent)
-		id = $(tabcontent[i]).attr('id');
-		heading = $(tabcontent[i]).find('legend h4').first().text();
+    for(var i = 0; i < tabcontent.length; i = i + 1){
+        // get id and title from div (tabcontent)
+        id = $(tabcontent[i]).attr('id');
+        heading = $(tabcontent[i]).find('legend h4').first().text();
 
-		listitem = '<li role="presentation"><a href="#'+id+'" data-toggle="tab">'+heading+'</a></li>';
+        listitem = '<li role="presentation"><a href="#'+id+'" data-toggle="tab">'+heading+'</a></li>';
 
-		tabnav.append(listitem);
-	}
+        tabnav.append(listitem);
+    }
 
-	tabnav.find('li:first-child').addClass('active');
+    tabnav.find('li:first-child').addClass('active');
+
+    if ($('.site-messages').length === 0) {
+        $('.header').addClass('no-site-messages');
+        $('.main-nav').addClass('no-site-messages');
+    }
 });

htdocs/theme/bootstrap/static/sass/components/_contextual-help.scss

 // using bootstrap popover to style the help content
 span.help {
-	font-size: $font-size-base + 5;
-	vertical-align: top;
-	padding-left:10px;
-	display: inline-block;
+    font-size: $font-size-base + 5;
+    vertical-align: top;
+    padding-left:10px;
+    display: inline-block;
 
-	.glyphicon {
-		color: $mahara-blue;
-	}
+    .glyphicon {
+        color: $mahara-blue;
+    }
 }
 
 .contextualHelp {
-	position: absolute;
-	z-index: $zindex-popover;
-	width: 300px;
-	padding: 1px;
-	// Reset font and text propertes given new insertion method
-	font-family: $font-family-base;
-	font-size: $font-size-base;
-	font-weight: normal;
-	line-height: $line-height-base;
-	text-align: left;
-	background-color: $popover-bg;
-	background-clip: padding-box;
-	border: 1px solid $popover-fallback-border-color;
-	border: 1px solid $popover-border-color;
-	border-radius: $border-radius-large;
-	padding: 0 14px 8px;
-	font-size: $font-size-base - 1;
-	@include box-shadow(0 5px 10px rgba(0,0,0,.2));
+    position: absolute;
+    z-index: $zindex-popover;
+    width: 300px;
+    padding: 1px;
+    // Reset font and text propertes given new insertion method
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: normal;
+    line-height: $line-height-base;
+    text-align: left;
+    background-color: $popover-bg;
+    background-clip: padding-box;
+    border: 1px solid $popover-fallback-border-color;
+    border: 1px solid $popover-border-color;
+    border-radius: $border-radius-large;
+    padding: 0 14px 8px;
+    font-size: $font-size-base - 1;
+    @include box-shadow(0 5px 10px rgba(0,0,0,.2));