HowToMoodle Blog

How to enhance your Moodle Theme

In my last post, I detailed how you can style images to look like Polaroid pictures in your Moodle course when your site has a Bootstrap-based Moodle theme. Last week, I happened to speak to a client who, having read that post, asked me if there was anything else that she could do with content in a Bootstrap based theme...The answer is yes!

In this post, I am going to show you some options available that will enable you to change how tables are styled and how to make links look like call to action buttons in your content, which will enhance the look of your Moodle theme.

The default editor for new 2.7+ sites is Atto which is a good editor for site users as there are minimal settings making it easy to use. However, my preference is to use the TinyMCE text editor as it allows me to add classes within the interface thus negating the need to go into the code so I make this the default editor for my profile. I do this by editing my profile and changing the Text editor preferences to use the TinyMCE editor – I can always change this back to Atto when I’m finished.

As changing editor for profiles is relatively easy to do within your profile, I am only going to go through the options using the TinyMCE editor in this post.

How to format tables

We can give the table some basic styling like adding some white space around all the text in the table, horizontal lines between the rows and emboldening the text in the heading cells. This is done by adding the table class.

To add the class, click into your table and click the Insert/Edit table button edit_table_button . Select the required class from the dialog box (you may need to click the Toolbar toggle button at the top left of the editor’s toolbar to see this button);

table_settings

To make it easier for your learners to read table content, we can highlight alternative rows in the table by using the table-striped class value. Unfortunately, this class is not available in the class dropdown so we need to enter this manually.

Manually adding table classes

From the Class dropdown, go to the bottom of the list and select (value). Once selected, we can add whatever we want into the class value text box. We need to add “table” so that we get basic formatting that we added before and also “table-striped” to get the striped effect in the table image below making sure you leave a space between the two values. This will give you the following;

Formatted table

Other table classes in Bootstrap themes are;

  • table-condensed - reduces the height of all rows in the table (this has also been added to the table in the screenshot above)
  • table-bordered – adds a thin border to every cell
  • table-hover – changes the background fill of all cells in each row when the cursor is hovered over that row

How to make links into buttons

The second styling is about changing links into call to action buttons. Doing this will allow you to provide navigation aids that will be not look out of place with your Bootstrap theme .

To make the link text into a button, we first need to add the basic button formatting by adding the btn class using the editor. Click into the link you want to turn into a button and click the Add/Edit link button on the toolbar.  The btn class is available from the Class dropdown.

In the example I am using, we can provide a button link for learners so they can go to their assignment quickly;

The change from a link to a button

In a similar way that you stylised the table, you can stylise buttons by adding additional classes to the btn class, however you do have to go into the code to do this so whenever you want to do this, click on the [ <> ] but to see the underlying HTML code for your content. Once you have found the link btn class in the code, you can add additional styles you want in the same place. Just make sure you separate each value with a space. The first class that you should add to the btn class value is btn-default as this results in a standard sized button with padding and a white background leaving you with the following class value; class=”btn btn-default”.

You can define the button size using one of the following;

  • btn-large (large)
  • btn-small (small)
  • btn-block (spans across the container)

It is recommended that you add at least one of these so that the size of your button is not affected by another style.

Next, you can change the colour of your buttons by adding the next classes. The beauty of adding these is that you get the hover effects where the colours get darker when the cursor hovers over the button;

  • btn-primary (blue)
  • btn-success (green)
  • btn-danger (red)
  • btn-warning (orange/yellow)
  • btn-info (light blue)

These values result in the following buttons;

btn-default btn-primary btn-success
btn-danger btn-warning  btn-info

You can add other classes to various items in your content – there is a list of other classes here - http://getbootstrap.com/css

What Next

Do you need help with your Moodle site? We want to learn about your requirements. Call us on 0330 660 1111 or contact us via http://info.howtomoodle.com/contact-us

Ask us about themes, hosting, training, content creation for your e-learning site


Share this: