Using Introduction Package

Direct your browser to the login-mask. typo3/ is the directory where the login to the back end is possible. 

url_to_login

Use the login-data you created in the installation process or changed afterwords.

login

This is the start view.

backend start page

Go to “Page” in the module frame on the left.

page-modul

In the middle of the view you see the pagetree. Open the pages created by the installation process by clicking on the arrow icons left side to the page name “Home” and the world icon which is a symbol for the root page.

Then you see all created pages their hierarchy, which is also determining the navigation menu.

pagetree-opened

If you have a look to the front end like the node “Examples” you can compare the order in pagetree of back end to navigation structure in front end.

frontend-examples

The first page after “Home” is named in a different way.

Click on the icon like a page to the left of the page name “Welcome to TYPO3”.

click-welcome

Left click your mouse. Then you see a dialog box appearing. By clicking on “Edit” …

dialog-box-edit

… you are seeing the page attributes.

page-attributes

Change “Navigation title” to whatever and save the document by clicking on the floppy disk icon at the top.

page-attributes-change-navigation-title

Reload front end – the title of the first element in the menu is changed.

frontend-changed-navigation-title

Now we should change website title, change keywords and descriptions of exemplary one page.

code-before-changes

To check the changes later, we start looking at the HTML-code of the start page. Title, description and keywords of the start page are determined by the introduction package.

In the pagetree click on “Home”, on the left module bar click on “Template”. On the right side you get the detail view to template attributes according to page “Home”. Change the value of the drop-down box to “Info / Modify”.

go-to-template

That should be the result view.

template-edit-whole

Click on “Edit the whole template record”. Though clicking on the “Sitetitle”-pen-icon should be sufficient.

Change the Website title to your need and save it by clicking on the floppy disk icon.

template-change-website-title

Editing the first page of or pagetree goes like explained here. To find this mask, use the way I told above for the “Navigation title”.

Change here the “Pagetitle”.

change-page-title

Go to the register card “Metadata” and change there at least “Keywords” and “Description”. Save your changes.

change-page-meta

To clear the cache click on the flash-icon on the right top.

clear-cache

Afterwords reload front end.

 frontend-changed-sitetite

By looking to the HTML-code we see the changed tags like title, description and keywords.

code-after-changes

If you want to change the style, click on the left on the item “Filelist”, browse to the directory default | Templates | CSS. There click on the icon next to stylesheet.css.  In the appearing dialog box click on edit.

edit-css-file

Exemplary we change the color of the body-element.

edit-css-file-color

Save changes, clear the cache and reload the front end.

footer-is-changed

As you can see parts of the footer were determined by the style of the body element.

How to change page-content?

Click on “Page” than on the first element in pagetree on the right you see the page content. Here you see two elements. The one in the column “NORMAL” is responsible for the main part. Click in the pencil-icon.

find-page-content-start-page

In this case this content element is of “HTML”-type, which follows from the fact that the main part of the start page is a bit difficult to manage in a rich text environment.

Go the register card “HTML” and change the text between the tags.

edit-page-content-start-page-normal

Save and reload front end.

frontent-changed-page-content-start-page

How to delete pages and change the menu structure?

Go to the “List” module. Mark the page “Examples”. On the left detail view you see all sub pages to examples, on the bottom in detail view there are the content elements of the page “Examples”.

delete-pages-in-a-row

Mark “Extended view” and “Show clipboard” and “Clipboard #1”. The page reloads each time. Afterwords you check all the pages you want to delete and click on the trash-icon.

Reloading the front end and clicking on “Examples” proves that the sub pages are gone.

frontend-deleted-subpages

Then click on “Home” in pagetree. On the right detail view you see the sub pages. Click on the trash icon in the line of “Examples”.  After reloading front end the page “Examples” are gone.

frontend-with-deleted-Exapmles

Now you should go on adapting style sheets, changing pages, content elements, get starting to learn creating new pages and content elements. You should deactivate the login part and change the e-mail address in feedback form.

This entry was posted in TYPO3 and tagged , on by .

About Erdal Gök

Erdal Gök is a web consultant. He works since 1996 as a webworker and is self-employed since 2004. His main skills starts from building concepts for web-projects over designing and implemanting web-frameworks like TYPO3 or creating frontend templates on HTML / CSS or getting interactivity with Javascript.

5 thoughts on “Using Introduction Package

  1. Andi Sugandi

    Hello Erdal, one thing that I could not find the way yet was how to change contents of footer like: ‘Related Links’, ‘TYPO3 in social networks’, etc?

    Are they part of the ‘Page’ too like described on this post? How to modify them?

    Thanks in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *