REFERENCE MANUAL

ON

V2017.0.1

1

TYPO3

TYPO3 is the standard Content Management System (CMS) for The University of the South

Pacific (USP).

TYPO3 is divided into two areas - the backend and the frontend. The frontend is for everyone

using the web. In the backend, only the content editors are allowed to access the CMS. A username

and password is always required and issued by the USP Webmaster.

Frontend and backend features of TYPO3

The frontend is the user-interface that looks just like any website. It is used by any web

surfer when surfing the website. Also the frontend provides some controls to log in backend

users by which they can simply edit the content and data of the website.

The backend is a feature-rich user-interface composed of different menus (Page, List, File

list, etc), located to the left.

Each webpage has its own content to display. The Webmaster can access all Sections in Typo. But

for other Content Editors, they have access only to the section that have been authorised by the

Webmaster.

TYPO3 STRUCTURE

Figure 1: Typo3 Backend

Content Area PageTree Menu

2

Menu

Is the section that contains all the backend functionality for the whole webpage.

Pagetree

Is a graphical listing of all web pages in the site. User clicks on the desired page in the pagetree

for editing depending on the login access the user has.

Content

This section allows user to edit articles, page content, images and then post it on the site.

Note:

Request for access can be made to the webmaster in an email to webmaster@usp.ac.fj . All access

should be approved by Head of School/Head of Department first.

Please note that there are policies in place which you should read and be familiar with before

accessing any part of the USP website:

10.02.2 USP Typo3 Access Guideline - The purpose of this guideline is to inform USP

staff members of their obligation before and after web access has been granted to them.

https://policylib.usp.ac.fj/form.search.php?search=USP%20Typo3%20Access%20Guidel

ine

10.02.3 Website + Web Application Hosting and Template Guideline - The purpose of this

guideline is to inform USP staff members of their obligation before and after they

commence on either designing/developing in-house website/web application or out-

sourcing it.

https://policylib.usp.ac.fj/form.search.php?search=Web%20Application%20Hosting

10.02.1 USP Homepage Image Banner Guidelines - The purpose of these guidelines is to

provide guidance to faculties, schools, and the regional campuses on the appropriate use of

the USP Homepage Image Banner and to provide a procedure on creating messages for the

Banner with clear knowledge of image suitability, usage rights, dimensions and quality.

https://policylib.usp.ac.fj/form.search.php?search=Homepage%20Image%20Banner

10.01.1 USP Corporate Identity Style Guide – Use of USP Logo, Name, Colors

https://policylib.usp.ac.fj/form.search.php?search=Corporate%20Identity%20Style

3

TABLE OF CONTENT

TITLE PAGE NO.

Typo3 Introduction 1 – 2

Table of Content 3 – 4

Basics

Login

Access to Records

Displaying Page Records or Selecting a Page

for Editing

Displaying Page Context Menu

Displaying the Content Elements

Displaying Context Menu in RTE (Rich Text

Editor)

Help Texts

Saving in Between

Save and View in Frontend

Save Document and Create a New One

Save Changes and Close Document

Close Without Saving

Logout

5 – 7

Pages

Display Page

Creating a New Page and Filling the

Property

Unhide a Page

Hide Page

Copy Page

Cut a Page

Paste a Page

Editing Page Properties

7 – 8

Files

Access to Files

Creating Folders

Moving Files

Renaming Files

Uploading Files for Website

9

Content Element

Creating New Content Element

Creating Content Element with Text and

Image

10 – 11

4

Creating Content Elements with Type File

links

Creating Content Element with Type HTML

Edit Content Element

Unhiding a Content Element

Hiding a Content Element

Moving Content Element Within a Page

Moving Content Element to Another Page

12 – 14

Rich Text Editor

Formatting Paragraphs of the Text

Formatting Individual Characters

Creating Bulleted List

Inserting Link to an Internal Page

Inserting a Link to a File

Inserting Link to an External Site

Inserting Link to an Email Address

Including Images

Including Images as Plain Image

Inserting Tables

15 – 19

Practice Exercise 20

5

TABLE OF FIGURES

Figure Title Page

1 Typo3 Backend 1

2 Typo3 Login Portal 5

3 Main Screen View 5

4 Edit Content Element 6

5 Page Preview 7

6 Editing Page Properties 8

7 Files and Folders 9

8 File Upload 9

9 New Content Element 10

10 Text Content 10

11 Image Content 10

12 HTML Content 12

13 Content Element Editing 12

14 Content Element Hiding 13

15 Moving Content Element 14

16 Rich Text Editor 15

17 Adding Images 16

18 Adding Tables 17

6

BASICS

1. Login

Figure 2. Login Portal

Type the URL www.usp.ac.fj/typo3 then press ‘Enter’.

In the Login window, type your Username and Password to Login.

2. Access Pages

Click on the menu ‘Web’ to see the available sub-menu.

Some of the sub-menu that appear are: Page, View, List, etc.

Click on the sub-menu Page to access the webpages in the pagetree.

Figure 3. Main Screen View

3. Displaying Webpage or Selecting a Webpage for Editing

To edit or display the desired webpage, click on the name/title to expand/view all

sub-webpage.

4. Displaying Page Context Menu

Click on the icon in front of the page name to view the context menu with

various functions/options.

7

5. Displaying the Content

To view just the content, click on the page name in the page tree in the respective

frame and the content will be displayed in the Content Area.

6. Help Texts

Hover cursor over icons until help text appears or click on the icon for

detailed help.

7. Saving while editing

After editing the content in the page, click on the icon to save the document

located on the upper bar of the form.

Figure 4. Edit Content Element

8. Save and View in Frontend

To view page after editing, click on to save document and view page located

on the upper bar of the form.

9. Save Document and Create a New One

Click on the icon located on the upper bar of the form to save changes in the

content and create new content.

10. Save Changes and Close Document

Click on after editing to save changes and close the document.

11. Close Without Saving

Selecting icon located on the upper left upper bar of the form closes the

document without making any changes to the document.

12. Logout

Click Logout on the upper bar to exit the system.

8

PAGES

1. Display Page

Click on in front of the page name and select View Menu to display

the page.

Figure 5. Page Preview

2. Creating a New Page and Filling the Property

Right click on the webpage to bring up the context menu and then choose

Page Actions, select the icon for new page

Choose the position where the new page is to be created.

3. Hide Page

Click in front of page name and choose icon to hide page

4. Unhide a Page

Click in front of page name and choose icon to unhide page.

9

5. Copy Page

Click in front of the page name and then choose Page Actions, select the icon

to copy page.

6. Cut a Page

Click in front of the page name and then choose Page Actions, select to

cut the page.

7. Paste a Page

Click in front of page name and then choose Page Actions, select to paste

into and to paste after.

Figure 6. Editing Page Properties

8. Editing Page Properties

Click in front of page name and select icon to edit page properties.

After changing the fields, finish by clicking to save and close document.

10

FILES

Figure 7. Files and Folders

1. Access to Files

Click on the menu Filelist .

Click on the folder name in the folder tree to access all the files.

2. Creating a New Folder

Click on the icon of file list in module web then right-click the folder name in the

folder tree after which click on New

Select the number of folders you wish to create and enter their respective names

Click om ‘Create Folders’ to save and exit back to Folder Meny

3. Moving Files

Click on the icon of file list in module web. Click the folder name in the folder tree and then click in front of the file name

in the right frame. Click in the target folder and then select icon to paste into that folder.

4. Renaming Files Click on the icon of file list in module web.

Click the folder name in the folder tree and then click on the icon in the

right frame in front of the file name to change the file name.

5. Uploading Files for Website

Click on the module web icon and then select the folder name in the folder

tree.

Click on the icon on the upper bar of the right frame to upload files and

then click on select files to locate the files to upload from the local computer.

11

CONTENT ELEMENT

1. Creating New Content Element

Figure 9. New Content Element

Select the create icon to create new content.

Choose Regular Text Element and then select the page position to fill in

the page fields such as the header and the text.

Figure 10. Text Content

12

2. Creating Content Element with Text and Image

Select for new content.

Choose icon and then select the page position to place the image with

text. In the images field, click on the icon to browse for files and upload

the images.

Finish by clicking icon on the upper bar to save and close document.

Figure 11. Image Content

3. Creating Content Elements with Type File links

Click on the icon on the module and then select the page name in the page

tree, select icon for new content.

Select icon and then choose the position to insert the File links.

Then click on to browse for files and then finish by clicking on the icon

to save and close document.

4. Creating Content Element with Type HTML

13

Click on the icon on the module and then select the page name in the page

tree, select to create new record.

Choose icon and choose the location to add the source code before

finishing by clicking to save and close document.

Figure 12. HTML Content

5. Edit Content Element

Click on the icon on the module web select the page name in the page tree.

Choose in the upper left corner of the right frame to edit content.

Finally after editing, click on to save and close document.

Figure 13. Content Element Editing

6. Un-hiding a Content Element

14

Click on the module web and select the page name in the page tree.

Choose on the upper left of the right frame to unhide the content element.

Figure 14. Content Element Hiding

7. Hiding a Content Element

Click on the icon on the web module.

Select the page name and then choose on the upper left of the right frame

to hide the page content.

8. Moving Content Element Within a Page

Click on the icon on the page module and select the page name.

Click on icon in front of the header located in the right frame.

Select more options and then choose move content to the appropriate

location.

Click on icon in the module web to view the page in frontend.

15

Figure 15. Moving Content Element

9.Moving Content Element to Another Page

Click on the module and select the page.

On the upper left corner of the right frame, click in front of the content

element and then click to cut the page.

On the target page, click on in front of the content element and select

to paste the page correspondingly.

16

RICH TEXT EDITOR

1. Formatting Paragraphs of the Text

Click on List, the icon on the module web and then click on the page in the

page tree.

Click on and then select to edit the paragraph.

Place cursor on the paragraph needed to be changed and then choose the block

style.

Finally click on icon to save document.

Figure 16. Rich Text Editor

2. Including Images

Click on the icon in module web and select the page.

Click in the right frame. In the tab text place cursor in the text passage and

click to insert image.

In the new magic image tab, click on the folder name in the folder tree and then

on the image name.

Fill in the fields and then save by clicking

17

Figure 17. Adding Images

3. Including Images as Plain Image

Click onto the List icon in the module web.

Select the page and click for editing.

Put the mouse pointer to the respective text passage and click on to insert image.

Choose the New Plain Image tab and then the folder name followed by the image name.

Fill in the fields and then finish saving by clicking on the icon .

18

Figure 16. Rich Text Editor

4. Formatting Individual Characters

Click on icon on module web and select the page in the page tree.

Click on and then choose to edit in the right frame.

Mark characters to reformat and choose the text style.

Click to save changes to the document

5. Creating Bulleted List

Click on web module List; and select the page.

Click on and then choose to edit in the right frame.

In the text mark text that needs to be bulleted.

Save input by clicking icon.

6. Inserting Link to an Internal Page

Click on the icon and then select the page from the page tree.

Click in the right frame to edit record. In the text click the word and click

to insert web link.

Choose the target page in the page tree and save changes by clicking the icon

.

7. Inserting a Link to a File

Click and mark the word to insert the link.

19

Click icon to insert link and then choose the respective file in the folder

tree.

Fill in the fields in the file tab and save by clicking .

8. Inserting Link to an External Site

Click and then mark the respective word.

Click to insert the link. In the tab external URL, type the URL and fill in

the fields.

Save changes by clicking the icon .

9. Inserting Link to an Email Address

Click on and mark the respective word.

Click on to insert the link. In the tab email type the email address and fill

in the fields.

Finish by clicking the icon to save changes to the content.

Figure 18. Adding Tables

10. Inserting Tables

Click onto the List icon in the module web.

Select the page and click for editing.

Put the mouse pointer to the respective text passage and click on to insert table.

Fill in the fields such as rows and columns and also click on to fill in properties

such as header.

Finish with saving by clicking on the icon .

20

TYPO3 Practice Test (40 minutes)

1. Create a New Webpage and title it as your name. Example, Pritesh Chandra.

2. On the newly created page, create a Regular Text Element and feed in the first content

provided by the trainer. If you don’t have the content (text and images), please ask the

trainer immediately.

3. Create a second Regular Text Element for “Awards” and feed in the content. Make the

list bulleted list.

4. The trainer has provided an image. You need to place that image on the page as the third

content.

a. First create a folder under your name in Filelist

b. Upload the image in the folder you have created

c. Return to your page and create third content and place the image on the webpage.

5. Once the image has been uploaded, center align it so that it appears in the center of the

page.

6. Create another Regular Text Element called Useful Links and feed the content provided.

7. On this content, the first text is a hyperlink to a website and second link should be a

hyperlink to the image that you have just uploaded.

8. Your page should look like this: