LEO Guides

Styling content in LEO units

At a basic level, content can appear in LEO as uploaded PDFs, but content can be directly accessed in LEO through resources such as Page, Book, Lesson, Label and even Quiz. In fact, anywhere in LEO you use the Text Editor, you can style the content in many different ways.

Before you get started:

  • Keep the student in mind when styling content.
  • Your school or faculty often has a LEO template which you should be working from.
  • Keep it simple. Overuse of colour and fonts can be distracting and can draw attention away from the message.

There are many opportunities to style content using just the buttons in the the LEO Text Editor such as adding headings, links, images and lists. Knowing a little bit of HTML adds a whole new dimension to styling opportunities. Please view the eLearning101 session, Styling content in LEO. The session goes over the following tips and tricks:

  • Highlighting key points
  • Links and buttons
  • Introduction to HTML
  • Tables
  • Icons and images

LEO has a number of pre-defined 'classes' of style which can be added inside HTML element tags.


Wells

<div class="well">

Put a well directly into a paragraph tag <p class="well"></p> to highlight the paragraph, or surround multiple elements with the <div class="well"></div> tags to highlight a section of content.

Here is an example of a well.


Alert boxes

<div class="alert">

additional classes: alert-success, alert-info, alert-warning, alert-danger

This is a paragraph with the class="alert alert-success".

This is a paragraph with the class="alert alert-info".

This is a paragraph with the class="alert alert-warning".

This is a paragraph with the class="alert alert-danger".


Buttons

<a href="#" class="btn">

additional classes: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger

Button classes should be put inside a link tag <a>

button default button primary button success button info button warning button danger


Tables

<table class="table">

additional classes: table-bordered table-hover table-striped

The table below has all the classes <table class="table table-bordered table-hover table-striped">

Heading One Heading Two Heading Three
content content content
content content content
content content content

Note: If you decide to put a coloured background in a table or row, avoid the "table-hover" and "table-striped" classes, as these will overwrite your colouring.