Troubleshooting: Forgot password for backend login 

The following example only works if your site administrator has enabled the password reset feature and if your backend account has a valid email address set.

1. Click on Forgot your password?

   Go to the backend login page and select Forgot your password?.

   

2. Enter your email address

   Use the same email address that you provided during registration.

   

3. Open the email

   Note that you will get the following page even if the email you entered was not found. This is due to the fact that the system will not disclose information about any registered email addresses.

   If you do not receive the email, check your spam folder and double-check that the email address is correct.

   

4. Enter the new password

   After you clicked on the password recovery link in the email you received you can enter a new password. Always use a secure password.

   

Adding pages within the page tree 

You can create a new page by dragging and dropping a page from the top of the page tree.

1. Select the type of page you want to add by choosing from one of the icons. In this example we are creating a standard page.
2. Drop the icon either between two existing pages to create a sibling or on top of an existing page to create a child.

3. Give the new page a title.

   

New pages are disabled by default. To enable a newly created page, right-click on the page and select Enable. You can also enable a page from the Access tab in page properties.

Adding pages with the context menu 

1. Right-click any existing page and choose More options > 'Create New' Wizard from the context menu.

   

   The New record screen will appear.

2. Decide where you want your new page to appear in the page tree by selecting one of the black arrows.

   

   The Create new Page screen will appear.

3. Provide a title for the page. You can also go to the Access tab and enable the page to make it visible in the frontend.

   

Visit the page types chapter for more information on the different types of pages that can be created.

Move pages 

1. Choose the page you want to move, then drag it anywhere in the page tree.

   A horizontal line displays to indicate the new position of the page.

   

   A gray outlined background on existing pages indicates that your page will become a child of that page.

   

2. Release your mouse. A confirmation message will appear displaying the option to copy or move the page.
3. Select Move this item.

Copy pages 

1. Choose the page you want to copy, then drag it to its new position on the page tree.
2. Release your mouse, then select Copy in the confirmation message.

Delete pages 

Choose the page you want to delete. Drag it directly to the right to display the Delete option.

Context menu 

A variety of functions are also available from the right-click context menu.

Filter the page tree 

At the top of the page tree is a filtering tool. Type a word or numbers to filter the page tree based on matching page titles or page ID.

Default page types 

By default, TYPO3 includes the following page types.

Custom page types 

Depending on the project, custom page types may also be available.

General 

This tab contains general information about the page. You can change the Page Type, and edit titles for the page and the URL.

The Page Title is used to generate speaking URLs (user friendly URL format). It is also used in menus and in the <title> tag.

When you specify an Alternative Navigation Title all other instances of Page Title are left unchanged.

SEO 

This tab is used for search engine optimization. It uses the cs_seo system extension. See the SEO Core extension manual for more information.

Social media 

The fields on this tab are used to enrich social media snippets for the URL of the page. It uses the typo3/cms-seo system extension. See the SEO Core extension manual for more information.

Metadata 

The fields available on this tab depend on how your site is configured. How the data is used by the frontend depends on TypoScript which depends on your site configuration.

Typically, you might see the Abstract field, and editorial details like Author Name and Last Update.

Appearance 

This tab contains properties that influence how the page is rendered.

Backend layouts can be applied to pages in the backend (the Web > Page module) to provide alternatives to the standard backend layout. In this way the backend page can mirror the structure of the frontend page. Content areas are then in roughly the same place as in the frontend, making editing easier.

Backend layouts can also be used to influence the rendering of the frontend.

The Show Content from Page field tells the page to display the content from another page. This is an easier method for repeating the content of a single page than using mount points.

Behaviour 

Fields on this tab set a variety of different aspects of the page.

Here are some of the common fields:

Link Target

Set the default Link Target for menu items linking to the page. You can also specify for the page to open in a new window.

Cache Lifetime

Define a specific cache duration as well as assign cache tags to the page. Some TYPO3 extensions can flush pages from the cache based on their cache tag.

Use as Root Page

Indicates that this page is the start of a new web site. The page icon in the page tree is replaced by a world icon (as displayed for the "Congratulations" page of the Introduction Package).

Include in Search

By default, every page is included in the TYPO3 CMS built-in search engine ext_indexed_search/Index. Use this flag to exclude the current page.

Hide child pages in page tree

Use this option to exclude the child page of the current page from rendering in page tree of the backend. This can be useful if you have a lot of subpages.

Contains Plugin

Lets you define the page as a container for a frontend plugin.

Resources 

This tab lets you link media files to the current page. How those files are handled depends on your frontend rendering configuration.

The rest of the properties on this tab are related to Page TSconfig.

Language 

This tab lets you control the visibility of the page based on localization.

For more information about translation, see Working with Languages

Access 

This tab lets you control the visibility of the page.

For more information, see Elements visibility.

Categories 

TYPO3 CMS provides a system-wide categorisation tool. By default categories can be applied to pages, content elements, and files.

Categories should be created in a folder and then be assigned to pages. The content element type "Special Menus", for example, can display a list of pages from a selected category.

Notes 

Use this tab for your own editorial notes and internal comments, such as reminders or to-do lists.

Notes display in the backend above the Page Properties tabs. They are not displayed in the frontend.

Types of content elements 

Typical page content 

Insert regular text and image content types to build standard web pages.

Form elements 

Create a login form or a simple contact form.

Menu elements 

Present a menu or list of page links in different ways.

Plugins 

Plugins are provided by extensions. Plugins that are available on this tab will depend on the individual plugin architecture or on the backend configuration. In some cases a plugin is made available by adding the "General Plugin" content element and then selecting the plugin itself on the Plugin tab.

Special elements 

Insert plain HTML, or a horizontal divider on the page. The "Insert records" element lets you reference other content elements, i.e. reuse a content element from another page without duplicating it.

Add new content to a page 

1. On a page, click the + Content icon in the place where you want to insert content.
2. On the Typical Page Content tab, choose the "Text & Media" element. This is the most commonly used content type. The Create new Page Content screen appears.

1. In the Header field, type My new content element.
2. In the Text area, type in some text. This field uses a Rich Text Editor (RTE).
3. Save and close the content element. You can see the newly added element on the page:

Moving content elements 

You can move content elements using drag and drop.

Click in the grey bar at the top of a content element to start dragging it. Highlighted areas will then show you where you can drop it.

You can move a content element from one page to another in the Web > List module using cut and paste. Refer to the clipboard chapter for information about using the clipboard in the List module.

Creating a link 

1. Select the text you want to link.

2. Click the Link icon in the toolbar. The Link Browser window displays.

   

This window lets you link to an internal page, file, folder, external URL, email address or phone number.

Internal links 

You can link to an internal file, folder, page or content element on a page.

On the Page tab, select the page in the page tree that you want to link to.

Alternatively, you can link to a specific point (anchor) on the page. Browse to the page you want to link to, then click the arrow icon next to the page name. The content elements on that page are displayed and you can select the content element you want to link to.

The Link Browser window closes and the link is added to your text.

Removing a link 

To remove a link from text, put your cursor anywhere in the linked text then click the Unlink icon on the toolbar.

Add an image to a page 

1. On the Images tab, click the Add image button. The File selector window displays to let you browse for an image.

   

2. Browse the file tree, then select a folder.
3. Tick the Display thumbnails box to show a preview of each image in the folder.
4. Click the name of an image to select it. Alternatively, click the + icon to select multiple images before closing the window.

Configure the image 

The Images tab lets you perform a number of actions to configure an image.

Add a video to a page 

On the Media tab, click the Add media file button, then follow the same process as you would to Add an image to a page.

Alternatively, you can click the Add media by URL button to paste a link to a video or audio file from the web.

Configure the video 

Use the Autoplay setting to specify whether the video should start playing as soon as the page loads.

You can configure various settings for media files (for example, adding a border, setting page position and behavior) just as you would to configure an image.

Create a form from scratch 

1. In the Web > Forms module, click the + Create new form button.
2. In the Create new form wizard, choose to create a blank form.

3. Give your form a name, then click Next and Finish.

   A blank form displays.

   

4. Click the Create new element button. The New element window displays.

   

   TYPO3 comes with over twenty form fields by default, including:

   • Basic elements like text or password fields
   • Special elements requiring specific format validation, like phone numbers or dates
   • Select elements like checkboxes or multiple choice
   • Advanced elements that have special rules, like user uploads or calendar date pickers
   • Container elements to visually organize surveys

   Once you’ve selected a form element, you can customize the settings for how the field is displayed.

5. Choose the Text element and the field is added to your form. You can configure settings for the field (such as placeholder text and field validation) on the right-hand side of the screen .

   

6. Click the Preview mode icon to see an indication of how your form will display on the frontend. Use the Edit mode icon to return to editing your form.

   

Working with forms 

When you have added multiple fields to your form, you can drag and drop them to rearrange their order.

Click the Settings button at the top of the form to add Finishers like a confirmation message or redirection to another page.

You can integrate extensions with existing forms. For example, if you're running a sales operation, you can integrate with Mautic and any changes to a TYPO3 form will update Mautic to give you seamless lead tracking.

Edit all headers 

To edit the headers of all records in one go, select the pencil icon next to the "Header" label:

You will then see this:

Upon saving this change will be applied to all records.

Edit all selected fields 

All fields that are currently viewable can be edited at the same time by selecting a different icon:

The result is almost the same form, but with the additional field "Type":

Edit selected fields of selected records 

When the advanced clipboard with multi-selection mode is activated, it is possible to select only those records that should be edited.

The result is a form for editing just the chosen field for the selected records.

Managing files in the TYPO3 CMS 

Files including documents and images are managed in the Filelist module. Similar to the Web > List module, it displays a navigation tree, which corresponds to the file structure on the server, and a list of all files for the selected directory.

For admin users, the folder displayed by default is called "fileadmin/ (auto-generated)" and corresponds to the fileadmin/ folder located under the document root folder on your web server.

Using these files inside content elements to display them or link to them in your web site is covered in the images chapter.

Clipboard 

There's a clipboard just like in the List module.

The handling is the same as the description used in the Advanced clipboard usage.

Creating new folders 

To create folders within the file storage, the button Create Folder opens a module dialog with the familiar separation of tree and working frame. Left hand all available storages and folders are displayed in tree structure. The folder selected here will act as the parent for the folders to be created. Folders are to be created one by one, the modal will remain open after operation to ease multiple additions. Each new entry appears immediately in the folder tree and can be used as parent.

Uploading new files 

You can upload files to a given folder by using the context menu or to the current directory by using the action icon in the docheader. Also, drag & drop will initiate the upload. Just drag any file into the main view to upload it to the current folder, or select the click, browse and choose files option.

Next steps 

The next chapters cover configuration and administration tasks that require special access privileges as described in Access control in the backend (users and groups).

Defining a new language 

Languages are defined per site.

Adding a new language is done in the Site Management > Sites module, which is restricted to admin users. Detailed information on how to configure your site to add more languages can be found in the Site Handling documentation.

The Introduction Package's default languages are English, Danish and German languages.

Translation modes 

When you choose to translate content, TYPO3 offers two methods:

• Translate - Use this option when you have a strict translation workflow or content structure.

  TYPO3 will create a direct connection between the original language and the translation. When the original language content is changed, the translations are marked as out-of-date and you can see the changes in the original language when editing a translation.

  This mode means that TYPO3 can help you maintain consistency when you have separate teams localizing content. This mode also allows TYPO3 to automatically mark translated content for review, and notify translators when the original text changes.

• Copy - Use this option when you would like the content structure to be free and independent between languages.

  TYPO3 creates a copy of the content in the target language. No connection is maintained between the original and the translation, which means subsequent versions of the translations can easily diverge from the original.

Working with translations 

1. Working with the Introduction Package, in the Web > Pages module, go to the "Congratulations" home page.

2. Using the menu in the docheader, switch to the "Languages" view.

   

3. In the drop-down menu "Create a new translation of this page", choose a language, let's say German in this case. The page properties displays for the German version of the page.

4. Type the German translation in the Page Title field.

   

5. Save and close the page. The screen now displays two versions of the content elements showing the default language and the German version side by side.

   

6. In the German column, click the Translate button for a content element. The Localize wizard displays.

   

7. For this example, click the Translate button then click Next. Step 2 of the wizard will pass by automatically since we are translating in a single language. Step 3 provides a summary of the elements that will be translated.

8. Click Next to complete the wizard.

   The German version of the content element is now prepended with [Translate to German:]. The element is hidden by default, so that incomplete translations aren't displayed on the frontend until you are ready.

   

Adjusting the view 

The Page module may now seem cluttered, with one column for each translation. You can view a single language at a time by switching back to the "Columns" mode and choosing a specific language in the docheader.

Next steps 

The Frontend Localization Guide contains detailed information about setting up a multilingual web site and how to actually do the translation and localization.

The Site Handling documentation contains information about how to configure your site to add more languages.

Publication dates 

You can specify a period of time for content to be visible. This might be useful for seasonal announcements or festive periods. Any page or content element with a defined Publish Date will not be visible before that date. If it has an Expiration Date, it will be hidden from that point onward.

When you set a publication date in the future then try to navigate to that page, you are redirected to the home page.

When you enable the Extend to Subpages setting, the publication date (and other access restrictions) also apply to all child pages of the current page. This makes it possible to apply restrictions to a whole branch of the page tree.

Frontend users 

The concept of the TYPO3 backend and frontend is explained in the Getting Started Tutorial.

You can use the concept of frontend users (website visitors) to create member-only content and restrict access to pages and content elements by requiring a log in.

Frontend users are always part of frontend groups. Access is granted to groups, never directly to users. Users and groups are defined like any other record, and stored in a suitable page in the backend.

Create a user group and user 

1. Create a new folder in the page tree, and name it "Frontend users".

   

2. Navigate to the Web > List module, and select your new folder.

3. Click the + Create new record icon at the top left of the Docheader. The "New record" wizard displays.

   

4. Click Website Usergroup to create a new frontend group.

5. Name it "Private Area".

   

6. Save and close the record.
7. Use the "New record" wizard again, but this time create a Website User.

8. Type a username, a password and click the "Private Area" group to select it.

   

   You can add further information on the Personal Data tab if required.

9. Save and close the record.

Assign access rights 

Now that we have at least one group, and a user assigned to that group, we can assign access restrictions. This is done on the Access tab of the page properties or content element properties.

1. Navigate to the Web > Page module, and create a new page called "Members only".
2. Add a text content element to the Members Only page, with text similar to "You need to authenticate to access the members area".
3. On the Access tab, select the "Hide at login" group for it.
4. Save and close the record.
5. Add another text content element to the page, with text similar to "Welcome to the members area".
6. On the Access tab, select the "Private area" group for it.
7. Save and close the record.

You should have something like this:

Try setting the access for an entire page to "Private area". When you save the page, notice how the icon in the page tree changes. This is a visual reminder that the page is not public. If you try to access a restricted page in the frontend, the TYPO3 error message "Page Not Found" will display.

Add a login form 

The next step is to place a login box somewhere on the site so that visitors can log in to view the restricted content.

1. On the "Members only" page, click the + Content button between the two existing content elements.
2. In the new content element wizard, go to the Form elements tab and select "Login Form".
3. Give it a header (for example, Log in).
4. Go to the Plugin tab. There are several options for the Login Form, but the only one which is absolutely necessary is the "User Storage Page".

5. Use the Browse for records icon to browse the page tree and select the "Web site users" folder.

   

6. Save and close the record.

7. View the page. You should have something like this:

   

8. Enter the user name and the password you defined earlier for the frontend user, and you should see the following:

   

This is just a quick overview of the login form provided by TYPO3 CMS. It has a rich set of features that are described in the Frontend Login manual.

Sharing links 

To share a link, look for the Share icon located at the top right hand side of any page in the backend.

Linking to a page 

The example below would create a deep link to the About Us page:

Linking to a content element 

This example would a create a deep link to the Introduction content element, found on the About Us page:

Linking to backend modules 

It is possible to create links to places within backend modules. This example would create a link to the Site Configuration module.

URLs and deep links 

When creating links to anything in the backend, it is recommended that the Share button is used to generate the link. Copying the URL from the browser is not recommended.

Topics 

Navigating the page tree using a keyboard 

It is possible to navigate the page tree using only a keyboard and it adheres to the guidelines set out in WAI-ARIA Authoring Practices 1.1.

• Home moves the focus to the first item in the page tree.
• End moves the focus to the last item in the page tree.
• Enter either expands the item or selects it.
• Up and Down arrow keys will move the focus up and down the page tree.
• Right arrow key will expand the focus if possible.
• Left arrow key will close the focus if possible.

Editing text in the Rich Text Editor (RTE) 

Below is a list of common keyboard commands that can be used when editing text in TYPO3's RTE.

Reloading pages and clearing browser cache 

Opening the backend search modal 

Multiselect in content elements 

The keyboard commands can be used on a select element:

Or a folder element:

Or a group element:

Selecting and deselecting options with the keyboard:

• enter = Add options, either from right to left or left to right
• delete or backspace = Remove an option for Windows and Mac users
• alt + arrow up = Move the option one up
• alt + arrow down = Move the option one down
• alt + shift + arrow up = Move the option to the top
• alt + shift + arrow down = Move the option to the bottom

More combinations:

• shift + arrow up = Include the upper option
• shift + arrow down = Include the lower option
• home = Move the cursor to the top
• end = Move the cursor to the bottom

Browser cache 

The browser on the client machine (Chrome, Edge, Firefox, etc) also caches pages. Sometimes you cannot see changes you have made to a page because your browser has cached the old content.

It depends on the browser and the operating system, how you can clear your browsers cache.

On Windows in most browsers you can press Ctrl + F5 to clear the browser cache.

Automatic cache clearing 

With TYPO3, the cache of a page is cleared automatically in the following cases:

• You changed something about the page itself like its title
• You changed a content of the page like a text or image on that page
• In certain time intervals, usually once a day
• If content with a starttime or endtime set becomes visible or invisible
• In some other cases that your integrator or developer might have defined

Scenario: Changes are not visible in the frontend 

If the cache did not get automatically cleared, the changes you made might not be visible right away in the frontend.

Some scenarios in which manual cache clearing might be necessary:

• You changed the title of a page. You view the affected page and everything looks fine. Now you go to the start page and cannot see your change in the menu. The following happened: Changing a pages title deletes the cache of the affected page. It does, however, not delete the cache of other pages like the start page.
• You added a news record. It does not appear in the news list. Creating a record does not automatically delete the cache of any page unless the integrator made some configurations.
• You changed content on one page that should also be displayed on other pages. This is often done with static parts of the page that should be editable such as the footer, a carousel in the header, etc.

Manual cache clearing 

Clearing the cache of a single page can be done without ill effect in most installations.

To clear the cache of that page, go to the module Web > Page and click the button representing a lightning bolt with the tooltip Clear cache for this page.

When you reload the affected page, the changes should be visible right away. If the changes are not visible, clear the Browser cache. Or use an incognito tab in your browser.

Only editors who have the relevant user rights can flush the cache of all pages. If you cannot see the lightning bolt button beside the help menu button in the toolbar you might not have the rights to carry out this action:

Previewing a page without clearing the cache 

If you need to preview a page and cannot clear its cache you can use the parameter no_cache=1 to preview the page as it will look once the cache is cleared. This option might have been disabled by the administrator however.

For example, visit https://example.org/community/events?no_cache=1.

Working with multi media: Digital asset management 

Multi media assets (images, videos, audio, etc) are usually stored as files on the server. Especially videos are frequently displayed from third-party sources such as Youtube or Vimeo.

In TYPO3 you can manage all assets in the backend module File > Filelist if you have sufficient permissions. See chapter Managing files in the TYPO3 CMS.

Writing accessible text 

See also the following W3C page: Writing for Web Accessibility

Copyright 

Whenever you use files not created by yourself, for example images or videos, the copyright must be considered.

Using a file or even a text without proper copyright lead to high fines. If in doubt, do not use a content without consulting legal advice first.

Even images that you created yourself might infringe someones copyright. For example you may not take pictures of certain artwork or draw a picture of your favorite cartoon character and publish it.

Have a look at the related Wikipedia article: Copyright

Data privacy 

In different countries there are different laws about data privacy. In general, you may not publish pictures of or data from any person alive or dead unless the person consented. There are some exceptions for persons of public interest such as politicians, scientists or movie stars.

Personal data does not only include a persons name but each information that might help to identify the person in question such as phone number, email address, IP address, nick names, pictures, car license plates etc.

Wikipedia has a good article on Personal Data which explains the situation in different countries.

Publishing personal information without consent might lead to high fines in some countries. If in doubt, do not use any personal information without consulting legal advice first.

Credits 

This guide is based on material originally written by Marlies Cohen and Eikaa.

It has since been updated by Susanne Moog, François Suter and Felicity Brand.

Thanks to them all!

Feedback 

If you find a bug in this guide, please use the "Edit on GitHub" button in the top right corner and submit a pull request via GitHub. Alternatively you can file an issue using the bug tracker: https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-Editors/issues.

To support the translation to other languages see Internationalization and Localization.

Maintaining high quality documentation requires time and effort and the TYPO3 Documentation Team always appreciates support. If you want to support us, please contact us as described in the next section.

Contact the Documentation Team 

For general questions about the documentation get in touch with the Documentation Team.