Skip to main content

Making use of #bootstrap to add gloss to #moodle sites.

At the end of 2013 the University of Canberra upgraded to Moodle 2.5. We also upgraded the theme to ensure the platform would be responsive to various screen sizes. Catalyst IT performed this work for us. We very carefully chose the Bootstrap engine that Twitter uses (see here: https://github.com/moodleman/moodle-theme_elegance/blob/master/readme_moodle.txt) knowing that we could later on use the classes the theme engine offered to enhance the look of our Moodle sites. We had seen Julian Ridden  (http://moodleman.net/) present on how one could exploit Bootstrap in Moodle at a local Moodle conference early in 2013.

This post will show you how to exploit Bootstrap to enhance various elements of Moodle, none of which is new, but the first time I for one have played around with it in any depth. Below I will add the CSS used to achieve the effects.

Useful sites:
http://getbootstrap.com/2.3.2/base-css.html#tables (base classes
https://docs.moodle.org/25/en/bootstrap-Theme (moodle doc)
http://getbootstrap.com/components (other components)

Also a major feature of this site is the RSS feed top left, it actually pulls in a feed of the database that contains the learning modules. Every time we add a new module, the list updates - it shows the most recent 5 database entries!

Please comment with your own Boostrap hacks and tricks, I'd really like to see how far we can go.

Overall Look

This image shows a site that has some elements using Bootstrap - notice the icons in the "Module Mentors Mockup" on the left. Each is an image with rounded corners, text, Bootstrap mail icon, encapsulated in a button class.

In the "Theme: Assessment" topic you can see what would otherwise be a list of links. In this case I have added a table with 2 rows and 4 columns, inserted a link in each cell, and have applied a button and button primary class to each link.



 With further refinements:


 

How to make each photo, text and icon a whole button that can be clicked to email the person

First create a condensed table to scaffold the icon layout using the Bootstrap class "table-condensed": <table class="table table-condensed">
Each cell contains the picture, name of the person, and a mail icon as a visual cue to students that  the button can be clicked to send an email. A mailto: a tag is used to start up the students email client with the to field pre-populated.

Using the correct order of HTML tags and Bootstrap classes the collection of elements can be brought together as a button:

<td>
<p class="btn btn-small"><a href="mailto:person.name@canberra.edu.au"><img class="img-rounded" src="http://www.canberra.edu.au/data/assets/image/Person.jpg" alt="Person Name" height="92" width="80" /><br />Person Name<i class="icon-envelope"></i></a></p>
</td>


You can see the btn and btn-small classes are used in the P tag to wrap everything up in a button. Also note the A tag incorporated the image, the text, and the mail icon so that the entire contents of the button becomes click-able.



How to turn links into buttons



To make a responsive table use the following to start the table:
<div class="table-responsive">
<table class="table table-hover" border="0">

For the links, turn them into buttons using:
<a class="btn btn-primary" href="">Assessment for learning</a>

To add the arrow, include the following just before the closing </a> tag:

<i class="icon-play icon-white"></i>

Update - a better way to do this!



Use the following Div structure (2 columns/4 rows) to make the grid of buttons below truly responsive - IE don't use a table
<div>
 <div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
 </div>
 <div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
 </div>
 <div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
 </div>
 <div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
  <div style="padding: 2px 2px 2px 2px; display: inline-block;"><a style="text-align: left; width: 240px;" class="btn btn-info" href="LINK">TITLE<i class="icon-play icon-white"></i></a></div>
 </div>
</div>

How to create an RSS feed of a database

This one is not about adding more Bootstrap CSS classes, but it is cool nonetheless. I wanted to add the database list to the top level of the site but couldn't see a way to do that. My colleague, Dr Peter Evans, informed me that the database can generate an RSS feed. Knowing I could add an RSS feed block to a Moodle site I tried consuming the database feed and it worked very well. Enhancing the initial idea of just listing the database entries this actually provides a dynamic list that updates to show the latest database entries, very useful.

  • Edit the database settings and change the number of RSS entries from None to whatever number. Save.
  • In the admin block again - click on the new link: RSS feed for this activity.
  • Copy the link to your clipboard.
  • Add an RSS block to your site, click add/edit feeds and add the database activity RSS URI you copied before.
  • Give it a readable name...
  • Return to the feed block settings and select your new feed in the list.
  • Set things like the maximum number of feeds to show and save.
  • Done.



How to make a database list view look good


Dr Evans also told me that Database lists could be turned into tables. A bit of searching later, and the look of this table is achieved by applying the classes table table-striped table-bordered table-hover to the table element.

The structure of list is made by putting the table header in the header section of the list template, the rows in the body, and the table close code in the footer of the template, like this:
(PS you will need to disable the editor to do it, and of course you need to setup your database fields etc.)

Header box:
<div class="defaulttemplate">
<table  class="table table-striped table-bordered table-hover">
<tbody>
<tr class="r0" class="info">
<td><strong>Module Name (Click to enrol/access)</strong></td>
<td><strong>Tags</strong></td>
<td><strong>Details</strong></td>
<td><strong>Badge</strong></td>
</tr>

Repeated Entry box:
<tr class="r1">
<td class="template-field cell c0">[[Module URL]]</td>
<td class="template-field cell c0">[[Module Tags]]</td>
<td class="template-field cell c0">##more##  ##edit## ##delete##</td>
<td class="template-field cell c0">[[Module Badge]]</td>
</tr>


Footer box:
</tbody>
</table>
</div>
<br/>

Comments

Popular posts from this blog

What does 2021 hold for student #learningexperience at my university

"Handwriting Text E-Learning Loading. Concept meaning Forecasting the future event"   by  focusonmore.com  is licensed under  CC BY 2.0 This year we have a unique opportunity to capitalise on what was 2020 and all the impacts it had on learning and teaching.  Staff ICT literacy levels and confidence increased because they had to use digital tools for teaching, there was no choice. This situation was complicated, academics of all levels of ICT literacy had to adapt. Some staff had zero experience with digital tools and were using online tools for the first time, while others are always pushing boundaries and looking for alternative tools available from central support areas. As with staff, some students have very low ICT literacy, while others blaze ahead of the curve, using the tools like pros and needing much instruction. They just work it out. Shifting this cohort of students and staff to fully online was a massive undertaking and a huge shock for everyone.  Going into 2020

Good assessment design is hard, here are some resources that might help

Designing good assessment is an art and a science IMHO. Here are some great resources, as much for my record as they are useful for others. http://static.pdesas.org/content/documents/M1-Slide_22_DOK_Hess_Cognitive_Rigor.pdf https://www.teachthought.com/critical-thinking/14-brilliant-blooms-taxonomy-posters-for-teachers/ (nice) http://static.pdesas.org/content/documents/M1-Slide_19_DOK_Wheel_Slide.pdf https://www.edutopia.org/blog/levels-of-understanding-learning-fits-all-charity-stephens (multiple pathways to cater for student diversity)

Make your #onlinelearning experience more personal with a #lightboard

In August 2019 the DVCA at UC wanted to invest in some light boards as he had seen the educational benefits at the previous university he worked for. I was tasked with putting in a comprehensive bid to an annual equipment fund and, if successful, follow the process through to implementation working with AV Services, and Library Services. As of March 2020 the Library houses UC's first ever Lighboard, and academic staff are putting it to good use. The Lightboard is a glass panel filled with light which stands between the teacher and the audience/camera. The teacher faces the camera (viewers) and writes on the glass using liquid chalk (for best results), the results glow on the glass, and a camera is used to record the session. The camera we use flips the image horizontally so the writing appears in the correct orientation without having to flip it in a post production process. The videos capture the face and hand movements/gestures of the teacher, as well as the hand written conten