---

 

Changing font size or style within your course is a great way to add some extra flair or cater to your specific users by choosing a font that is easiest for them to read. 

There are two ways to change the type of font used in the text widget. The simple method is quite straight forward and uses the default formatting that is used across all courses. The advanced method requires you to tinker with the text source code.

---

Simple Method

Step 1

Put the page in Edit mode 

Step 2

Click on the Setup tab in the Text Widget 

Step 3

Click on Formats > Headings and select the Header size for your text

---

Advanced Method: Supported Inline CSS Properties in the Text Widget

 

The Text Widget allows you to add text, images, tables, videos, and iFrames. In the Text Editor, you can customise the elements using inline CSS via the Source Code. 

 

Inline CSS is added in the style attribute of an HTML element.  Here's an example of inline CSS:

 

<h1 style="color: green;">Blog Post Title</h1>

 

Please take note that not all CSS properties are supported in the Text widget. Here is the list of the supported inline CSS properties:

• background-color
• color
• display
• float
• font-size
• margin-left
• margin-right
• text-align
• text-decoration

---

 

Changing the Background Color of the Container Box in the Text Widget

 

Would you like to emphasise a specific paragraph or content by putting it in a container with a background color? You can do this in the Text widget, here’s how:

 

Step 1

In the Text widget > Setup tab, click on Formats > Special > Container to insert a container element.

Step 2

Enter the text content in the container.

 

Step 3

Click Edit and select the Source Code.

 

Step 4

In the Source Code, please insert the container-color parameter in the container div class. Here's an example:

 

<div data-type="container-border" class="macro-container container-border container-orange">

Step 5

Click OK and then click Done to save the changes.

 

These are the available colors that you can use for now:

 

• container-orange
• container-red
• container-blue
• container-yellow
• container-purple
• container-teal

 

---

Remove the container box in the Text widget

To remove the container, highlight the text inside it. Then, click Edit in the top left corner of the Text widget and select Remove container.