T3Doc/doc tut quickstart/General principles

<< Back to Getting Started Tutorial

General principles

Backend and Frontend

TYPO3 is divided in two areas - the backend and the frontend. While the frontend is for everyone out there on the web - it is the website TYPO3 produces - only you are allowed access to the backend - the administrative area of the website. A username and password is always required for the backend. You will later learn how to give access to the backend to others - like editors or co-administrators. To go to the frontend, enter "http://www.your-site.example.org/" in your address bar. For now continue with the backend. Go to the backend of your new website: open a browser and type "http://www.your-site.example.org/typo3/". You will get a login page looking like this:

Use the username "admin" and the password you set when installing TYPO3.

After pressing the login button you get redirected to the TYPO3 backend overview.

On the left you have TYPO3's main modules - the main menu of the backend. Click on "Page" to go to the page module now.

General Backend Structure

On the left you still have the modules overview, in the middle you now have the page tree and on the right the content area.

Page tree

The page tree represents the hierarchical structure of your page. In most cases this is exactly corresponding to what you will see in the navigations on your website. The page tree can be expanded by clicking the little arrows on the left of the items. Look at your page tree now:

Simultaneously look at the navigation in frontend if you click on "About TYPO3".

You can see how the main menu of your website corresponds to the first level pages in the page tree, and the submenu corresponds to those beneath "About TYPO3" in the page tree. For all modules below the "Web" category there is a page tree shown, this means all those modules are acting on a per-page base. A click on the page title will open that page in the content frame on the right. Hovering over the icon of a page will display its internal id. This id is also used to display the page in the frontend. A click on the icon will open the context menu.

The context menu

The context menu of a page can be used to access most of the page-related functions the fast way. Here is what these options do:

1. Show: Opens the page you clicked in the browser (frontend)
2. Edit: Lets you edit the page properties
3. New: Lets you create a new page or new content
4. Info: Displays some information of the page
5. Copy: Copies the page
6. Cut: Cuts the page
7. Hide: Hides the page (so it isn't accessible from the frontend anymore)
8. Visibility settings: Lets you change the pages visibility settings (like show/hide, access by certain user groups only...)
9. Edit page properties: Lets you edit the properties of the page directly (like the page title or type)
10. Delete: Deletes the page
11. History/Undo: Shows the change history of the page (who did which changes when)

Depending on the context, more functions might be available.

Now use the context menu to show the "Welcome to TYPO3" page in the frontend. You see on (1 blue) that the last part of the title in your browser bar corresponds to the title of the page in the page tree.(2) shows you that this is the page with ID 6. Go back to your page tree and hover over this' pages icon and you will see the ID 6 again.(3) might puzzle you - in the page tree and the title bar the pages name is "Welcome to TYPO3", but here in the menu it is suddenly "Get Started". How come? To find out select "Edit page properties" in the context menu of that page and take a look at the right content area:

There you can see that the page title (1) is "Welcome to TYPO3" but you will be also able to find "Get Started" at (2). It is called "Navigation title" and means the title that is displayed in any navigational elements (menus, breadcrumbs, sitemaps...). If it is empty the page title is.

Special pages

Going back to the page tree, you will notice different symbols are used for the different page types. The ones appearing in the menu on your website are normal pages. Nothing special about them. Then there are those with a dotted border on the icon, these are pages that are hidden in menus.

Hide in menu

Pages hidden in menus are basically like the normal pages but don't appear in the menus. This is useful if you want to have a page you just want to link to but that should not appear in the menu.Edit the page properties of the page "Search" (use the context menu):

You can see that the page has "Hide in menu" checked.

Sysfolders

In the page tree you see some pages with a folder icon. These are so-called sysfolders. By default pages created in TYPO3 are meant to contain web page content. They appear in the menu and can have a title. 95% of all pages are used like that. But pages can also serve as simple containers of database elements that are not meant to be content on a visible web page. This is what sysfolders are for. Use them just like you use folders on your computer's file system to store different files in an organized manner. In the same way sysfolders are "folders" that nicely organize database elements inside TYPO3. Database elements are for example frontend users, frontend groups or news records.

You can create a sysfolder by selecting it in the "Type" drop down in the page properties:

Shortcuts

A shortcut can be used to create a page that is empty but works - for example - as a parent page of other pages. Imagine you are selling a product and have a navigation like this on you website:- About us- My Product- Imprint- ContactNow you want to have some subpages beneath the "My Product" page to convey the information about your product:- About us- My Product - Overview - Technical Details - Pricing and Shipping- Imprint- ContactYou don't really have content for the My Product page, you just want it to appear in the menu. Now you can use a shortcut to point the "My Product" page to the "Overview" page. What happens? Whenever you click the main menu point "My Product" you get directly to the overview page. You got your menu structure like you wanted but don't need content for the My Product page.

In the Introduction Package you will find a shortcut, too. The "Home" page. The symbol for a shortcut is the little arrow in the lower right. The "Home" page is additionally the root of your website and has therefore it's own domain - that is where the world icon is coming from.

You create a shortcut like you create a sysfolder - by selecting it's type in the drop down when editing page properties (1).

Link to external URL

External links can be used to create a link to an external page that appears in your menu. We will try this together. Imagine you want to have a link to http://typo3.org in your menu.First, click on the icon of the "Give Feedback" page and choose "New" from the context menu:

Choose "Page after" in the content frame on the right:

Now you should see the "Edit page properties" dialog that you already know:

1. Change the type to "Link to external URL" (1). You will get an alert that informs you that your changes have to be saved in order to continue. Press OK.
2. Fill in the "Pagetitle". Let's call the menu item "TYPO3 – Enterprise Open Source CMS". The orange exclamation mark tells us that the field is required.

Now you should see something like this:

Note the orange exclamation mark in the "URL" tab? This means, there is still something left for us to do. Click on that tab.

This is of course the most important part - the external URL we want to link to. Enter the URL in (1) and select the URL scheme in (2). If you don't want to use (2), you can set it to empty and just write the whole URL into (1).

Warning

Choosing the right type Pay attention to the "Type" select box! Select the correct URL scheme here or set it to blank if you want to enter URLs which already contain a scheme (like http://typo3.org instead of typo3.org).

Note the little arrow at (3)? It shows you which fields you changed that aren't saved yet.

Save your changes now. You can save with one of the buttons located in the docheader:

In general you can see what a button does by hovering over it and waiting for the tooltip explanation. File:100002010000002000000020FBC04693.png

Note

Help icons If you want to find out what certain elements in TYPO3 do you will often find a small question mark which you can hover to display a help text. If you click on the text you will get a longer explanation.

Visual Menu Spacer

You can see another page type in our page tree:

This type is called visual menu spacer and does basically nothing in a default TYPO3 installation. You can use it to divide the page tree into parts so you have an easier overview.

Page content

Now that we have seen how the page is structured via the page tree and what the different page types do. It is time to have a look at the content. First let's see how the content on a page is organized.

1. Open the page "Editor Features" > "Text and Images" in your browser
2. In a second browser window open the TYPO3 backend
3. Choose the page module and select "Editor Features" > "Text and images" in your page tree
4. Compare both views

Frontend:

Backend:

As you can see the order of the content elements on the webpage is the same as the order of the elements in the backend. The content elements are additionally sorted by columns, content that is in the right column in the backend is in the right column on your page. Each content element on your page can be of a different type (like text or text with image), so you can create very flexible pages.

Let's look what happens if we move a content element.

1. Hover with your mouse over the gray bar of a content element on that page:

As you can see, some editing icons for that element appear. Use the arrows at the right to move the content element up or down. After you moved the element have a look at your website frontend. You should see the page reflecting your changes to the order. The other icons in the elements header point to different actions you can do with this element: