The iLearn formatting tools provide some basic editing and formatting capability to all text areas within iLearn. However, there are some times when you need to go beyond what the tools offer at face value. This support document goes through some more advanced formatting capabilities available in iLearn using templates, a little HTML, and a small amount of elbow grease.

Templates

Templates are a quick way to provide cleanly formatted content that fits in with iLearn native theme without too much hassle.

Templates are a good starting point, but sometimes you may want to customize the templates a bit to suit your needs more. A good example is the template called schedule-table. This template provides a two column table with a heading row that can be used for any tabular data.

Note: Many of the design decisions in iLearn are based around accessibility. Tables, in particular, should only be used for tabular data, or information such as tables of figures, dates and times, or other content that syntactically fit into a table format. Tables should not be used as pure design features to make text "look nice", as uses such as these harm accessibility for students who use assistive technology such as screen readers to consume content on a page.

To add a column to a table

1. Select the Show more tools button to show the second row of tools in the toolbar
2. Click in the table in your content in the column that you want to add a column after
3. Select the Table tool from the toolbar and choose Insert column after

To add a row to a table

1. Select the Show more tools button to show the second row of tools in the toolbar
2. Click the last row in your table
3. Select the Table tool in the toolbar and choose Insert row after

Table colors

The default colors chosen for the template are intended to be neutral. However, iLearn's theme back end provides some color alternatives that you can tap into if you know some HTML code.

Note: The following section covers advanced text formatting via HTML. This is strictly not required in day to day usage of iLearn and does have the potential to cause formatting issues in your course if not done correctly. Mozilla, the makers of Firefox, have a decent introduction to HTML article on their website if you want to get more in depth on HTML. Many of the items in this support document will have clear examples from iLearn, so only a base knowledge of HTML is necessary for these examples.

The table from the images above will be used as a basis for our examples.

Tech-nerd notes: iLearn's theme is based on Bootstrap 4 (as of Fall 2018). As such, many of the features available in Bootstrap 4 are also available in iLearn if you code them in HTML.

Headings

Table headings have three possible modes: Not highlighted, dark, and light highlighting. The default chosen for the template is dark but it's possible to change it to one of the other three.

To remove the highlighting entirely

1. Select the Show more tools button to show the second row of tools in the toolbar
2. Select the HTML tool from the second row of tools. This will place your content in HTML mode.
   
3. Look for the following line:

   <thead class="thead-dark">

   Change to the following:

   <thead class="thead">

4. Select the HTML tool to go back to WYSIWYG (what you see is what you get) mode
   

To make it light gray instead

1. Select the Show more tools button to show the second row of tools in the toolbar
2. Select the HTML tool from the second row of tools. This will place your content in HTML mode.
   
3. Look for the following line:

   <thead class="thead-dark">

   Change to the following:

   <thead class="thead-light">

4. Select the HTML tool to go back to WYSIWYG (what you see is what you get) mode
   

Table color

The table itself can be in dark or light mode. To set the table to dark mode:

1. Select the HTML tool to go into HTML mode.
2. Look for the following line:

   <table class="table table-responsive-md">

   Change to the following:

   <table class="table table-responsive-md table-dark">

3. Select the HTML tool to go back to WYSIWYG mode
   

Table rows can also be highlighted with some of the built-in highlights in the template. To change the color of a row:

1. Select the HTML tool to go into HTML mode
2. Find the row you want to edit. In my example, I want to edit the row for "Thing 2"
   
3. Look for the following line:

   <tr>

   Change to the following:

   <tr class="table-primary">

   Note: There are a few options available here, each with their own coloration based on iLearn's theme.

   • table-active
   • table-primary
   • table-secondary
   • table-success
   • table-danger
   • table-warning
   • table-info
   • table-light
   • table-dark

   Note: If you prefer a bolder color, an alternative is the following:

   • bg-primary
   • bg-success
   • bg-danger
   • bg-warning
   • bg-info

4. Select the HTML tool to go back to WYSIWYG mode
   
   
   

For additional assistance, contact Academic Technology: (415) 405-5555, at@sfsu.edu, LIB 80