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
- Icons and images
LEO has a number of pre-defined 'classes' of style which can be added inside HTML element tags.
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.
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".
<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>
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|
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.