TYPO3 Quick Reference for Editors This Quick Reference for TYPO3 V4 Is Meant to Supplement the TYPO3 Videos

Home , Frame (GUI)

TYPO3 Quick Reference for Editors This quick reference for TYPO3 v4 is meant to supplement the TYPO3 videos. Minor deviations might result from the different targets, since the videos follow a didactical approach, while the quick reference describes efficient ways of individual steps. The quick reference and videos usually show only one of the many possibilities TYPO3 offers.

If you want to follow along with the below mentioned steps, please, make sure that [Extended view] is activated. The icons and help texts may possibly differ partly from those in your system, depending on the TYPO3 version, configuration of the interface, and context.

Basics Pages Content Rich Text Editor Frontend-Editing Files

Basics Log in

Type URL of your domain in the browser >> add '/typo3' >> press [Enter] >> enter your [Username] and [Password] >> click [Log In] (cookies and popups need to be allowed)

Video: Basic Concepts

Access to records

Click module Web: [Page]

Video: Basic Concepts

Display a page's records or select a page for editing

Module Web - [Page]: if the right page is not visible in the page tree, click in front of the web site name and/or page names >> click on page name

Videos: Basic Concepts, Icons and Clicks

Display a page's context menu with various functions

Module Web - [Page]: click in front of the page name in the page tree

Video: Icons and Clicks Display a content element's context menu with various functions

Module Web - [Page]: click on page name in the page tree >> click in front of the content element in the right frame

Video: Icons and Clicks

Display a content element's editing form

Module Web - [Page]: click on page name in the page tree >> click on name of the content element in the right frame

Video: Icons and Clicks

Display a context menu in the Rich Text Editor of the editing form

Module Web - [Page]: click on page name in the page tree >> click on content element name >> open tab [Text] >> place cursor at right position or mark a text passage >> click with right mouse button

Video: Icons and Clicks

Display help texts

Module Web - [Page]: hold cursor over icons until help text appears or click for a detailed help text

Video: Icons and Clicks

Save input in between

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame>> edit record >> click [Save document] in the upper bar of the form

Video: Icons and Clicks

Save input and view it in the frontend

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click [Save document and view page] in the upper bar of the form

Video: Icons and Clicks

Save input and create a new element

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click [Save document and create a new one] in the upper bar of the form

Video: Icons and Clicks Save input and close the form

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click [Save and close document] in the upper bar of the form

Video: Icons and Clicks

Close a form without saving the input

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> optionally edit record >> click [Close document] in the upper bar of the form

Video: Icons and Clicks

Delete a record (during editing)

Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> optionally edit record >> click [Delete] in the upper bar of the form >> click [OK], if confirmation prompt appears

Video: Icons and Clicks

Log out

Click [Logout] in the upper bar

Video: Basic Concepts

Pages Display a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Show] in the context menu

Video: Handling Pages

Create a new page and fill in page properties

Module Web - [Page]: click in front of the page name in the page tree >> click [New] in the context menu >> choose [Page (inside)] or [Page (after)] >> fill in fields (at least [Pagetitle]) >> finish with [Save an close document]

Video: Handling Pages Copy a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Copy] in the context menu

Video: Handling Pages

Cut a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Cut] in the context menu

Video: Handling Pages

Paste a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Paste into] or [Paste after] in the context menu

Video: Handling Pages

Unhide a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Unhide] in the context menu

Video: Handling Pages

Hide a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Hide] in the context menu

Video: Handling Pages

Edit page properties

Module Web - [Page]: click in front of the page name in the page tree >> click [Edit page properties] in the context menu >> fill in fields or change input >> finish with [Save and close document]

Videos: Handling Pages, complementary: Page Properties

Delete a page

Module Web - [Page]: click in front of the page name in the page tree >> click [Delete] in the context menu >> click [OK], if confirmation prompt appears

Video: Handling Pages Contents Create a new content element

Module Web - [List]: click on page name in the page tree >> click [Create new record] in the upper bar of the right frame >> choose [Pagecontent] >> fill in fields (e.g. [Header] and [Text]) >> complete with [Save and close document]

Video: 4 Minutes Introduction, complementary: General Aspects of Content Elements

Create the content element type 'Text w/ image' for inserting images

Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose 'Text w/Image' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Media] click [Browse for files] next to [Images] >> click [Browse] to upload new images, if necessary >> choose image(s) in the folder tree >> optionally fill in fields from [Position] to [Title Text] >> finish with [Save and close document]

Videos: Images via Content Element, complementary: Including Files (Element Browser)

Create the content element type 'Filelinks'

Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose 'Filelinks' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Filelinks] click [Browse for files] next to [Files] >> choose files in the folder tree >> optionally fill in further fields >> finish with [Save and close document]

Video: Types of Content Elements

Create the content element type 'Insert records'

Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose 'Insert records' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Insert Records] click [Browse for records] next to [Items] >> choose page in the page tree >> choose pagecontent >> finish with [Save and close document]

Video: Types of Content Elements

Create the content element type 'HTML'

Module Web - [List]: click on page name in the page tree >>click [Create new record after this record] of the respective content element in the right frame >> choose 'HTML' within [Type] >> click [OK], if confirmation prompt appears >> tab: [HTML] add source code >> finish with [Save and close document]

Video: Types of Content Elements

Create the content element type 'Form'

Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose 'Form' within [Type] >> click [OK], if confirmation prompt appears >> fill in fields (e.g. [Header]) >> save input with [Save document]

>> tab: [Form] click [Forms wizard] next to [Configuration] >> create form fields as desired >> finish with [Save and close document]

Video: Creating Forms - available soon

Edit a content element

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Edit] at the right content element >> edit fields >> finish with [Save and close document]

Video: Page Module

Unhide a content element

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> enable [Show hidden content elements] if necessary >> click [Un-hide] of the content element

Video: Page Module

Hide a content element

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Hide] of the content element >> enable [Show hidden content elements] if necessary

Video: Page Module

Move a content element within a page

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame>> click [Move record up] or [Move record down] of the content element

Video: Page Module Move a content element to another page

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click in front of the content element >> click [Cut] in the context menu >> click on target page name in the page tree >> click in front of the target content element in the right frame >> choose [Paste after]

Video: Page Module

Delete a content element

Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Delete] of the content element >> click [OK], if confirmation prompt appears

Video: Page Module

Rich Text Editor Format paragraphs of the text

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in the paragraph you want to reformat >> choose [Type of block] or [Block style] >> save input with [Save document]

Video: General Aspects of the Rich Text Editor (RTE)

Format individual characters

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: mark the characters you want to reformat >> choose [Text style] >> save input with [Save document]

Video: General Aspects of the Rich Text Editor (RTE)

Create bulleted lists

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: mark respective text >> click [Bulleted list] >> optionally mark individual for rows for additional indention >> click [Increase indent] >> save input with [Save document]

Video: Buttons of the Rich Text Editor (RTE)

Use spell-checker

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: click [Spell-check] >> edit misspelled words with [Replace], [Replace all], [Ignore] or [Ignore all] considering the suggestions made >> complete with [OK] >> save input with [Save document] Video: Buttons of the Rich Text Editor (RTE)

Insert a link to an internal page

Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [Page]: optionally fill in fields >> click target page in the page tree >> save input with [Save document] Video: Setting Links in the Rich Text Editor (RTE)

Insert a link to a file

Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [File]: optionally fill in fields >> click target file in the folder tree >> save input with [Save document] Video: Setting Links in the Rich Text Editor (RTE)

Insert a link to an external site

Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [External URL]: type url >> optionally fill in further fields >> click [Set Link] >> save input with [Save document] Video: Setting Links in the Rich Text Editor (RTE)

Insert a link to an email address

Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [Email]: type email address >> optionally fill in further fields >> click [Set Link] >> save input with [Save document] Video: Setting Links in the Rich Text Editor (RTE)

Include images as 'Magic Image'

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in respective text passage >> click [Insert/modify image] >> tab [New Magic Image]: click on folder name in the folder tree >> click image name >> optionally click image with right mouse pointer and choose [Image properties] in the context menu >> fill in fields as desired >> save input with [Save document]

Video: Images in the Rich Text Editor (RTE) - Part 1 Include images as 'Plain Image'

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: put mouse pointer to respective text passage >> click [Insert/modify image] >> tab [New Plain Image]: click on folder name in the folder tree >> click on name of the web-suitable image >> optionally click on image with right mouse pointer and choose [Image properties] in the context menu >> fill in fields as desired >> save input with [Save document]

Video: Images in the Rich Text Editor (RTE) - Part 2

Include images via 'Drag 'n' Drop'

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: put mouse pointer to respective text passage >> click [Insert/modify image] >> tab [Drag & Drop]: click on folder name in the folder tree >> click image and drag it by holding the left mouse button to the target text passage >> close popup window (Element Browser) >> save input with [Save document]

Video: Images in the Rich Text Editor (RTE) - Part 2

Insert tables

Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in respective text passage >> click [Insert table] >> optionally fill in fields (e.g. [Rows] and [Cols]) >> click [OK] >> fill in cells >> optionally click [Row properties] to choose e.g. table header >> save input with [Save document]

Video: Tables in the Rich Text Editor (RTE)

Frontend Editing Activate frontend editing

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> if necessary, click tab or window of the browser where the frontend view of the page opens with editing buttons (editing buttons can be seen only as long as logged in with the related domain in the backend)

Video: Editing Content Directly (Frontend Editing)

Edit a header in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Edit header] >> change text >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)

Edit text in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Edit bodytext] >> edit text >> click [Save and close document] to automatically update the display

Video: Editing Content Directly (Frontend Editing)

Edit an entire content element in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Edit record] >> edit fields as desired >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)

Move a content element in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Move up] or [Move down]

Video: Editing Content Directly (Frontend Editing)

Create a new content element in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [New record after] >> fill in fields as desired >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)

Hide a content element in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Hide] >> click [OK], if confirmation prompt appears (record will only be editable in the backend)

Video: Editing Content Directly (Frontend Editing)

Delete a content element in the frontend

Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Delete] >> click [OK], if confirmation prompt appears

Video: Editing Content Directly (Frontend Editing) Files Access to files

Module File - [Filelist]: click in front of the folder name in the folder tree, if necessary >> click folder name >> optionally activate [Display thumbnails] in the right frame

Video: Managing Files (File List)

Move files

Module File - [Filelist]: click folder name in the folder tree >> click (or other file icon) in front of the file name in the right frame >> click [Cut] in the context menu >> click in front of the target folder in the folder tree >> click [Paste into] in the context menu

Video: Managing Files (File List)

Rename files

Module File - [Filelist]: click folder name in the folder tree >> click (or other file icon) in front of the file name in the right frame >> click [Rename] in the context menu >> change file name >> click [Rename]

Video: Managing Files (File List)

Upload files for the web site

Module File - [Filelist]: click folder name in the folder tree >> click [Upload files] in the upper bar of the right frame >> click [Browse...] and select images or other files from local computer >> click [Upload files]

Video: Managing Files (File List)