Tips and tricks with Text boxes in Mahara

USQ Mahara ePortfolio

Learning Systems and Support (LTQ) 1

Tips and tricks with Text boxes in Mahara

This tutorial assumes that you know how to drag a Text box block down to your page content area.

Contents

1. The parts of a Text box ............................................................................................................. 2

2. What each of the buttons are in the editor ................................................................................. 5

First row .................................................................................................................................. 5

Second row .............................................................................................................................. 5

Third row ................................................................................................................................. 7

3. Pasting plain (clean) text into a Text box ................................................................................... 8

4. Pasting from Microsoft Word or OpenOffice/LibreOffice Writer ................................................ 9

5. Formatting text using styles and colours in a Text box ............................................................ 11

Add a Heading ........................................................................................................................ 11

Change the Colour of the heading ............................................................................................. 12

Change the Font of the heading ................................................................................................ 13

Change the Font family of the paragraph text ............................................................................ 14

Making certain words stand out ................................................................................................ 15

6. Insert an image into a Text box .............................................................................................. 17

Setting up ............................................................................................................................. 17

Get the link for your image ...................................................................................................... 19

Insert your image into a text block ........................................................................................... 20

7. Image layout in a Text box .................................................................................................... 27

Wrapping images with text: aligned left or right ....................................................................... 27

Fine tuning images ................................................................................................................. 29

8. Inserting tables into a Text box .............................................................................................. 35

Inserting a table ..................................................................................................................... 35

Insert/Edit Table dialogue window sections explained .............................................................. 37

9. Editing table cells in a table within a Text box ......................................................................... 45

10. Background colour in a Text box ......................................................................................... 49

11. Superscript and subscript text in a Text box ........................................................................ 56

Subscript ............................................................................................................................... 56

Superscript ............................................................................................................................ 59

12. How to create a Drop Cap in a Text box ................................................................................. 62

13. How to create APA references in a Text box (hanging indents) ................................................ 65

Add your references ................................................................................................................ 65

Format your references ........................................................................................................... 66

Experimenting with the indent .................................................................................................. 69



1. The parts of a Text box

When you drag a text box down to your page, you will see this dialogue window pop up:

Here you can put in a new title or delete the default one which is ‘Text box’.

If you remove the Block title, it will appear as [No title] in edit mode:



This does not appear in display mode:

Retractable means ‘collapsible’.

This means you can open and close the Text box so your page doesn’t appear too long.

This is where all of your written content goes. You can apply all kinds of formatting and styles to

the text.

Here you can copy content from another pre-existing Text box (called ‘Notes’ in your Content

area).



Here you can choose a licence (Creative Commons or GNU or Other) for the content that you

upload or create.

If you are using content created by others, this is where you can list the Licensor (original

author) and the Original URL (if you got it from a website).

When you have finished editing your Text box, remember to click on the Save button.



2. What each of the buttons are in the editor

First row

Font style These buttons are used to make text bold, italic, underlined,

or strikethrough.

Select text colour This drop-down to give you a choice of colours for your text.

Text highlight

colour

This drop-down to give you a choice of text background

(highlight) colours.

Text alignment Align text, images or other content left, right, centre, and

full.

Horizontal line Adds a horizontal ruler to your page.

Emoticons Inserts small emoticon images, such as smiley faces.

Insert/Edit picture Allows you to insert an image into your text box. The image

needs to be in your files area in Mahara.

Spell check button You can choose your language and do a quick spellcheck.

Works best in Firefox.

Clean-up messy

code

This button allows you to clean up HTML code, such text that

you copied in from another source, such as the web.

Insert/Edit Link To insert or edit a hyperlink.

Unlink This is used to remove a hyperlink.

Edit HTML source Allows you to edit the HTML source code.

Toggle full screen

mode

Allows you to make your editing window the full size of your

screen.

Second row

Undo/redo Undo (CTRL+Z) and Re-do (CTRL+Y) the formatting you

have just made to your text.

Text List formatting Unordered (bulleted) list | Ordered (numbered) list

Insert/edit table Insert table | Edit table properties



Table row/cell

properties

Edit table row properties | Edit table cell properties

Insert/delete rows Insert row above | Insert row below | Delete row

Insert/delete

columns

Insert column to left | Insert column to right | Delete column

Split/merge cells Split merged table cells | Merge table cells

Cut / Copy / Paste Cut | Copy | Paste

Must use keyboard, as these buttons do not work in most

browsers.

CTRL+X on your keyboard for Cut

CTRL+C on your keyboard for Copy

CTRL+V on your keyboard for Paste

Paste from MS Word Paste from MS Word. Clicking on this button opens a dialogue

window, where you must CTRL+V on your keyboard to

Paste your content from MS Word (or other text editor, such

as OpenOffice/Libre Office Writer)

Firefox

Safari, Chrome,

Opera

IE



Third row

Font family The list of fonts you can use (may depend on your

computer):

Andale Mono

Arial

Arial Black

Book Antiqua

Comic Sans MS

Courier New

Georgia

Helvetica

Impact

Symbol

Tahoma

Terminal

Times New Roman

Trebuchet MS

Verdana

Webdings

Wingdings

Font size The list of available font sizes you can use:

1 (8pt)

2 (10pt)

3 (12pt)

4 (14pt)

5 (18pt)

6 (24pt)

7 (36pt)

Format The list of available pre-set formatting you can use:

Paragraph

Address

Preformatted

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6



3. Pasting plain (clean) text into a Text box

1. In your source document or web page, select the text you want to copy. Press CTRL+C on your

keyboard to Copy it (or right-click with your mouse and select Copy):

2. Open up a plain text editor, such as Notepad, and paste your text into that:

3. Copy the text from Notepad, then press CTRL+V on your keyboard to Paste it into your Text

box edit area.



4. Pasting from Microsoft Word or OpenOffice/LibreOffice Writer

1. In your source document or web page, select the text you want to copy. Press CTRL+C on your

keyboard to Copy it (or right-click with your mouse and select Copy):

2. Click on the Paste from Word button



3. Clicking on this button opens a dialogue window, where you must CTRL+V on your keyboard to

Paste your content from MS Word (or other text editor, such as OpenOffice/LibreOffice

Writer):

4. Click on the Insert button.

The major formatting (Headings, bold, italics, underline, etc.) should appear, though some font

colours may not.

5. Click on the Save button on your Text box:



5. Formatting text using styles and colours in a Text box

Add a Heading

1. First delete your block title:

2. In the text editing area, highlight the words that are going to be your heading:

3. Select whatever heading size you want, in this case it will be Heading 1:



4. Your text will now be sized as Heading 1:

Change the Colour of the heading

You can make your heading any colour you wish.

1. To begin doing this, select the heading:

2. Click on the font colour drop-down and select a colour:



3. Your heading colour will now be the colour you chose:

Change the Font of the heading

You can change the font of your heading to one that appears in the Font Family drop-down list.

1. To begin doing this, select the heading:

2. Click on the Font Family drop-down list and select a font:



3. Your heading Font Family will now be the Font Family you chose:

Change the Font family of the paragraph text

You can change the font of your remaining paragraph text to one that appears in the Font Family drop-

down list.

1. To begin doing this, select the paragraph text:

2. Click on the Font Family drop-down list and select a font:



3. Your paragraph text Font Family will now be the Font Family you chose:

Making certain words stand out

You can make certain keywords stand by making them bold, italic, underlining them or highlighting them

with colour.

1. To begin doing this, select the word/s you want to make standout. Select the B (Bold) button (or

CTRL+B on your keyboard). It will make the text bold:

2. Select the next group of words you want to stand out:



3. Your text will now be highlighted:

4. The finished text box in edit mode:

5. The finished text box in view mode, with the text box with content pasted from MS Word beside it

for comparison:



6. Insert an image into a Text box

Setting up

You are going to have two browser tabs with ePortfolio open, one where your page to be edited is

open and one where your Files area is open.

1. To do this, from your Dashboard, first navigate to your page to be edited, by clicking on

Portfolio:

2. That will take you to where your pages are:

3. Click on the Edit content and layout button to open your page ready for editing:



4. Now, right-mouse-click on Content and click on Open Link in New Tab (this example given is

showing Firefox, in Internet Explorer, it will be Open in new tab).

5. The new tab will immediately show your Profile content page:

6. Click on the Files sub-tab:



7. You are now in your Files area:

Get the link for your image

To get the link for your image, right-mouse-click on the image (in this example, it is page.png) you

want to link to, then click on Copy Link Location (in Firefox):

In each of the browsers the terminology may be slightly different:

Internet Explorer it will be Copy shortcut

Firefox it will be Copy Link Location

Chrome it will be Copy link address

Safari it will be Copy link



Insert your image into a text block

1. Go back to the browser tab where your page is ready for editing.

2. In your page edit view, if you are not already there, go to the Edit content tab, then the General

sub-tab:

3. Hover your mouse over the icons, and you will see the last one on the right (which looks like a

notepad with a pencil on it) says underneath it: “Text box: Add notes to your page”:

4. Click, hold and drag the text box block down to a column on your page:



5. The Text box: Configure dialogue will come up, where you can add a Title (or delete the pre-

existing one) to the Text Box, and then add in text as you would a word processor:

6. To add your image into the text box, first put your cursor where you want the image to appear:



7. Click on the Insert/Edit Image button:

8. The Insert/Edit Image dialogue will come up. Paste your copied Link Location into the Image

URL field (the Dimensions will automatically populate):

9. Fill out the Image Description field:

If you want your image to be between paragraphs, leave the Alignment set to -- Not Set --

in the dropdown menu.

Otherwise, if you want text to wrap around your image, set the Alignment to Left or Right.



10. In the Dimensions field, resize your image to suit your needs. (Do this if your image is larger

than 400×400 pixels.)

11. Border, Vertical Space and Horizontal Space:

If you type in a numeric value into the Border field, you will get a border around your

image. If you don’t want a border, leave it blank.

A numeric value in the Vertical Space field means that many pixels space above and below

your image (between the writing and your image). If you are happy with the default amount

of space, leave it blank, otherwise experiment with different spacing, to see what looks best.

A numeric value in the Horizontal Space field means that many pixels space left and right

of your image (between the writing and your image). If you are happy with the default

amount of space, leave it blank, otherwise experiment with different spacing, to see what looks

best.



12. Click on the Insert button:

13. Your image is now within your text box:

(This Text box has been toggled to full-screen so you can see the image fully inline.)



14. Click on the Save button:



15. Your image is now in your text box within your page:

16. Click on Done at the bottom of your page to save and exit editing your page.



7. Image layout in a Text box

Wrapping images with text: aligned left or right

1. Click on the Configure this block button:

2. Select the image by clicking on it:

3. Click on the Insert/Edit image button:



4. In the Alignment drop-down, select Left:

5. Click on the Update button.

6. Your image will now be on the Left side of the text:

(This Text box has been toggled to full-screen so you can see the image fully inline.)

7. Click on the Save button. This is what you will see:



8. If Right was selected in step 4, this is what you would see:

Fine tuning images

Borders





3. In the border field, type in a number between 1 and 10 (try not to go any thicker than 10

pixels). Click on the Update button:

4. You image will look similar to the one below:

5. Notice that the text touches the edge of the image:



6. ADVANCED EDITING:

a. To change the colour of your border, click on the HTML button:

b. This is what should appear:

c. On the second line of code, you should see the word black. Replace it with the word red:

d. Click on the Update button:



e. Your image should now have a red border:

f. After clicking on the Save button:



Spacing around images



3. In the Horizontal Space field, type in 5, click on the Update button:

Note: This will reset your border colour back to black. You will need to go back into the HTML code

to change it back. This is a bug with the TinyMCE editor that Mahara uses.



4. Your image will now have 5 pixels of space on either side of the image:

5. Click on the Save button. This is what you should see:



8. Inserting tables into a Text box

Inserting a table

1. To add your table into the text box, first put your cursor where you want the table to appear:

2. Click on the Insert/Edit Table button:

3. The Insert/Edit Table dialogue window will pop up:

For this tutorial we are going to leave it at the default values. Click on the Insert button.



4. You will see the following:

The dashed lines represent what your table will look like.

(If you are having borders the dashed lines represent where they would go.)

5. Add some content then click on the Save button:

6. After clicking on the Save button, this is what you should see:



Insert/Edit Table dialogue window sections explained

Columns

Rows

These are table columns:

These are table rows:



Cell padding

Cell Spacing

This diagram represents what Cell Padding and Cell Spacing is in a Table:



Alignment of table



Border

With nothing typed in the border field:

With 5px typed in the border field:



Width

Table width can be per cent (%) or pixels.

With nothing typed in the width field:

With 600px typed in the width field:

With 100% typed in the width field:



Height

Table height can only be in pixels.

With nothing typed in the height field:

With 300px typed in the height field:



Class

You won’t really need this. Generally, Class is left set to -- Not Set --, as this is generally used only if

there is a Cascading Style Sheet being used with the same class name applied.

This is best viewed in the HTML code:

Table caption



When the Table Caption box is ticked, an extra ‘cell’ appears across the top of the table:

It is where you can put your Table Caption. It is automatically centre-aligned:



9. Editing table cells in a table within a Text box

Table cell content alignment

NOTE: This feature can be buggy. You may need to go into HTML code to get your table

cell alignment (vertical and horizontal) to work.

There are two types of alignment in table cells:

Horizontal (left, centre, right) Vertical (top, centre, bottom)

Notice in this table, all of the content is aligned to the top of the cell. This is the default vertical

alignment of table cell content:



To edit alignment of a single table cell, click on one of the cells and click on the Table Cell Properties

button:

Change Alignment to Left and Vertical Alignment to Top:

Click on the Update button, and your table will appear similar to the one below:



Do the same for each of the rest of the table cells, changing the text as you go so it looks the same

as the image below:

If using the individual cell formatting doesn’t work, here is the HTML Code for the above table (centre

must be spelled ‘center’):

<table style="border-color: #000000; border-width: 1px; border-style: solid;" border="1" cellspacing="0">

<tbody>

<tr>

<td style="width: 120px; height: 50px; vertical-align: top; text-align: left;">Top left</td>

<td style="width: 120px; height: 50px; vertical-align: top; text-align: center;">Top centre</td>

<td style="width: 120px; height: 50px; vertical-align: top; text-align: right;">Top right</td>

</tr>

<tr>

<td style="width: 120px; height: 50px; vertical-align: middle; text-align: left;">Centre left</td>

<td style="width: 120px; height: 50px; vertical-align: middle; text-align: center;">Centre centre</td>

<td style="width: 120px; height: 50px; vertical-align: middle; text-align: right;">Centre right</td>

</tr>



<tr>

<td style="width: 120px; height: 50px; vertical-align: bottom; text-align: left;">Bottom left</td>

<td style="width: 120px; height: 50px; vertical-align: bottom; text-align: center;">Bottom centre</td>

<td style="width: 120px; height: 50px; vertical-align: bottom; text-align: right;">Bottom right</td>

</tr>

</tbody>

</table>



10. Background colour in a Text box

This can be done by doing a little trick with a single-cell table.

You can make a ‘blah’ looking plain page look a little more interesting by adding some colour to your text-

boxes.

1. To add colour the background of a text box, click on the Configure this block button:



2. Select your text in the editor and cut it by pressing CTRL+X on your keyboard

3. You should have an empty text box:

4. Click on the Insert/Edit Table button:



5. The Insert/Edit Table dialogue window will pop up:

6. On the General tab and change the:

a. Columns field to 1

b. Rows field to 1

c. Width field to 100%



7. Click on the Advanced tab:

8. Click on the Background Colour browse button:



9. A dialogue window will pop up:

10. You have three different ways you can choose colour:

a. Picker:

(You can pretty much choose any colour.)

b. Palette:

(These are web compatible colours.)



c. Named:

(These are named HTML/web compatible colours.)

11. Click on the Insert button:

12. You will end up with a small coloured single-cell table:



13. Click into the table and press CTRL+V to paste your content into the table cell:

14. The finished page has three columns of colour:

15. This could be made more interesting by adding images and having multiple tables within a text

box.



11. Superscript and subscript text in a Text box

A subscript or superscript is a number, figure, symbol, or other indicator that appears smaller than

the normal text and is set slightly below or above it:

Subscript text appears at or below the text baseline

Superscript text appears above the text baseline

Subscripts and superscripts are often used in formulas, mathematical expressions and chemical

compounds or isotopes, but have many other uses as well.

This is subscript and this is superscript.

Subscript

To begin creating a piece of subscript, paste your text into your text box

1. Click on the Edit HTML Source button:

2. You will see some HTML code. This is the code behind what your writing looks look like:



3. In this example, both words ‘subscript’ will be made subscript.

4. Go to the first word ‘subscript’ and on the left side of it, type in this tag: <sub>

5. Now go to the right of the word and type in this end tag: </sub>

6. Do the same for the second word ‘subscript’:



7. Click on the Update button:

8. Your text should appear similar to this below:

9. Click on the Save button

10. The final text box (with extra text added):



Superscript

To begin creating a piece of superscript, paste your text into your text box



3. In this example, both words ‘superscript’ will be made superscript.

4. Go to the first word ‘superscript’ and on the left side of it, type in this tag: <sup>



5. Now go to the right of the word and type in this end tag: </sup>

6. Do the same for the second word ‘superscript’:





9. Click on the Save button




12. How to create a Drop Cap in a Text box

To begin creating a drop cap at the beginning of your text paragraph, paste your text into your text box





3. On the first line, on the right side of the <p> tag, copy and paste the following code snippet:

<span style="float: left; font-size: 300%; font-weight:900; line-height: 0.85em;

margin-right: 0.09em; margin-bottom:-0.25em;">

4. On the right side of the capital letter ‘A’ copy and paste in this code snippet (end tag):

</span>





7. Click on the Save button.




13. How to create APA references in a Text box (hanging indents)

Add your references

If you have your reference in a word document, copy and paste them into your text box using the Paste

from Word button. This should preserve any italic, but be aware that the italic may be stripped out:

1. Clicking on the Paste from Word button:

2. Use CTRL+V on your keyboard to paste the text from Word into the window. Click on the Insert

button:



Format your references


2. You will see a lot of HTML code. This is the code behind what your references look like:



3. On the first line, on the left side of the <p> tag, press enter to create a new empty line:

4. Copy the following code snippet and paste it in:

<div style="margin-left:20px; text-indent:-20px;">



5. Now you need to add in an ending tag. Copy the following code snippet and paste it in underneath the very end </p> tag:

</div>

6. Click on the Update button, then on the Save button, and you will now have a hanging indent for

your APA reference style:



Experimenting with the indent

You can make the indent greater or smaller by going back into the HTML code and experimenting with

the numbers in the first tag:

Example 1: <div style="margin-left:30px; text-indent:-30px;">




When sharing any aspect of your ePortfolio, please limit sharing your pages to Specific

Friends, Specific Groups, Specific People, or to a Secret URL. Do not allow Public

Access to any page, or allow access to Logged-In Users unless you intend for those

pages to be widely available and able to be reproduced. Academic staff sometimes choose

this option for demonstration purposes, but students should consider their privacy before

sharing widely with the Public or Logged in Users.

Tips and tricks with Text boxes in Mahara

Documents

Transcript of Tips and tricks with Text boxes in Mahara