Print bookPrint book

Text Editor - Formatting Text 2.9

Site: eCampus
Course: Staff Help
Book: Text Editor - Formatting Text 2.9
Printed by: Guest user
Date: Tuesday, 20 February 2018, 8:03 AM

Formatting Text

First [Turn Editing On]

All topics, activities and resources will have a section for you to type a name, description and/or content.

Edit icon for topics For Topics you need to pick the 'edit/cog' symbol related to the topic you wish to add text to.

For activities and resources this is found in Edit settings. You can also provide this information when you add a new activity or resource.

Editing Text

Once in an editing mode a tool bar appears that allows you to select which style, font, size and colours you want to apply to your text.

Toolbar Toggle

Text Styles

Format Options

There are various options for you to format your text.


When typing general text, use the Paragraph options. It is very important, for accessibility reasons, to make sure you use the appropriate Heading for headings/titles and to use "Paragraph" when typing in general paragraph text.
Remember, a single page should only have 1 heading entered in the Heading 1 style, as that should be the main heading for the page. On this page "Format Options is in Heading 1.

Using the Address format provides formatting that places lines close together and italicises them (as you would for an address). See an example below:

111 Nowhere Place
Somewhere WA 6999

Preformatted text appears as shown below:

preformatted text uses the html <pre> tags which formats text with a fixed-width font (usually Courier), 
and keeps both spaces      and 
line breaks.


Here is an example of the different ways you can format your text.

The coloured styles have names that may not match your intended use, but only provide the colour and border settings, so can be used wherever you wish. The three coloured styles shown below are:

  • pwa-primary (blue)
  • pwa-success (green)
  • pwa-maintenance (yellow)

Different ways you can format your text

Numbering and Bullet styles

Numbering and Bullet Styles

Turn editing on

button to turn editing on

Go to any resource or activity and press the Edit (button to Edit an activity or resource) button. From the drop-down menu, select Edit Settings.

button to edit settings

From the Content block press the (The button used to create a bullet list.) for a Bullet list, and press the (Button for the number list) for a numbered list. 

The bullet and number lists are located here

There are multiple styles that can be used when creating numbered lists.

To use these numbering styles, go to the Styles drop-down menu and you will have 3 options to choose from:

The types of numbering styles that can be used

Alpha numbering: This numbering style presents the list using letters of the alphabet (a - z). 

Modelling and Animating

  1. Creating and animating simple objects 
  2. Creating and animating complex objects 
  3. Designing backgrounds and landscapes

Roman numbering: This numbering style presents the list using roman numerals. For Example:

Games Theory

  1. Learning about video games through the study of video games
  2. The importance of debating prevalent issues surrounding the culture of gaming.
  3. Gaming can be seen as a worthwhile leisurely and professional pursuit.

Nested Decimal numbering: This style presents the list in standard numbers, but when indenting to create a list within a list. The numbers will appear in a decimal format. For Example:

Games Practical

  1. Combining the knowledge of:
    1. Programming/Coding
    2. Modelling and Animation
    3. Theoretical Knowledge
  2. Creating the game requires the general knowledge of
    1. Plot
    2. Setting
    3. Aesthetics (what audience are you creating the game for?)
    4. Mechanics (How will everything in the game work?)

    Maximising the Editor window

    Turn editing on

    button to turn editing on

    choose any existing resource or activity and click on the Edit (button to Edit an activity or resourcebutton and choose Edit Settings from the drop-down menu. 

    button to edit settings

    In the Content block of the Editor window. Press the Toggle full screen mode button (button to toggle full-screen mode in the editor window) to maximise the size of the content editor window.

    Location of the button to maximize the content window

    Toggling full-screen mode causes the content window to fill the entire screen. During this mode, only the content block that you are currently editing will be visible.

    a full-screen view of a maximised content window

    You can close the full screen view by pressing the Toggle full screen mode (button to toggle full-screen mode in the editor windowagain.

    Code window

    Turn editing on

    button to turn editing on

    Go to any existing activity or resource and press the Edit (button to Edit an activity or resourcebutton and then select Edit Settings from the drop-down menu. 

    button to edit settings

    In the content block press the Edit HTML source button (button to turn on the HTML Editor) to bring up the coding page.

    The HTML editor is located here

    The HTML source editor will appear as a pop-up. This will enable you to adjust the code alter the layout, font size and formatting of the text. Here is an example of HTML source code.

    An example of HTML source code

    Once you have finished editing the code from the HTML Source Editor, press the Update button to apply any changes you have made. If you would like to try your hand doing some coding yourself, please visit to examine different tutorials and challenges related to web-based coding.

    Adding Symbols

    Turn editing on

     button to turn editing on

    Go to any existing activity and click on the Edit button (button to Edit an activity or resource) and select Edit Settings from the drop-down menu.

    button to edit settings

    In the content box, press the Insert special character button (button to insert special symbols) to open a selection of symbols. This is the symbol selection screen:

    a selection of symbols that can be inserted

    On the right side of the selection screen, it will show:

    Symbol: The symbol icon and the full name shown below it.

    HTML-Code: The HTML code used to insert the symbol using the HTML source editor

    Num-code: The numerical code for the symbol 

    To insert the symbol, click the symbol and it will appear where the text cursor is currently positioned.

    Adding a URL

    Adding a URL hyperlink

    Follow these steps in order to add a URL to an existing resource (such as a page) or to a topic on the course page. 

    Edit topic or resource settings

    For a topic click on the 'Edit summary' cog symbol in the topic you wish to add the hyperlink to: Edit summary

    For a resource click on the 'Edit' drop-down menu to the right of the course resource > Edit settings

    1. Inside the resource content section or topic summary, either type word(s) to link to or highlight the existing word(s) you wish to attach a URL to; for this example we are going to create a link to the Student Support Services page.
    2. Type Student Support Services
    3. In another browser window/tab go to eCampus For students > Support Services
    4. Either right-click on the highlighted URL at the top of the page and "copy" or highlight the URL or press <CTRL>C to copy to clipboard.

    Support Services

    1. Return to the window you are adding the hyperlink to and highlight the words to link to (e.g. Student Support Services)
    2. Press the 'Insert/Edit link' symbol represent by a closed chain.   Closed Chain (Insert/Edit link)
    3. A dialog appears as shown below. Paste (<CTRL>V) the website URL into the 'Link URL' text box
      Link to Student Support
    4. Type in a Title for the URL
    5. Set Target to Open in a new window
    6. Click the [Insert] button at the bottom of the dialog.

    The result of adding the link should be that you taken to the Student Support Services as demonstrated here.

    Please note:

    It is recommended that you set the target to open in a new window. This will avoid students accidentally closing their eCampus course when closing the URL.