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

University of Canberra Library adds #VR Headsets to the catalogue - on the road to immersive learning resources in #Education

In September 2018 the UC Library added VR headsets to the catalogue, available in the short loan section. Students can loan the headsets for up to 3 hours. Support for using the headsets will be limited to basic guidance, and beyond this it will be up to students to have their apps and content ready, just needing the headset to get going. Supporting this technology is difficult given the number of different phones, OS versions and apps out there giving rise to any app recommendations working on one phone and not another. For this reason support will be limited, however as our in-house knowledge grows more advice will be able to be given. A small number of headsets to start with represents a low risk investment that also allows staff to up skill in VR technology. Demo sessions and training given to Library staff has been fun and a valuable sharing activity as everyone is at different stages of familiarity. Now that a number of staff in the library have been up skilled we can begin t

Conference Notes: ACODEs AR + VR + MR (XR) = #anewreality #acodenews

#aNewReality Workshop @ Griffith University Griffith University held a 2 day Immersive Learning event where those Colleagues who manage emerging technologies, and leading practitioners from across the Australasian Landscape shared their experiences, both at an Institutional and ‘on the ground’ development levels. Some of the questions UC went in asking: What are other Higher Education Institutions are doing around Immersive Learning and Emerging Technologies?  How is XR being used to increase student engagement, retention, and learning? How does XR support online students to feel more connected and situated? What strategies and technologies are a good fit for UniCanberra? Which approaches are not only educationally effective but also scale in terms of adoption and supportable, and are equitable? How much physical investment is needed to create various content in-house, what kind of content can be created using different technologies, and what ongoing support/