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

There are a number of predefined 'classes' of style that come with LEO which can be added inside HTML element tags. Keep in mind that the 'look and feel' of ACU LEO is determined by a stylesheet that is sometimes changed. This can affect how things look in your unit so check as you go.

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"> </> 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

This is how the buttons display in LEO as at 20/12/19.

bootstrap buttons in leo as at 201219

Tables

<table class="table">

Additional classes: table-bordered table-hover table-striped

The table below shows how it looks when it 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.

Page last updated on 23/01/2020

Learning & teaching

Please contact the Learning and Teaching Centre for professional development, resources and advice for your learning and teaching needs at ACU.

LEO support

Available 8am-10pm Sydney time, Mon to Fri,
9am-5pm Weekends and public holidays
Closed Good Friday and Christmas


LEO Guides
LEO Guides feedback