Tag Archives: Introduction package

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.

Install TYPO3 Introduction Package

In version 4.4 the TYPO3-Team introduced a new installation method, called “Introduction package”. It let’s you easily install a full TYPO3 instance. I want to have a look.

Go to http://typo3.org/download/. There you find more information to special packages and the actual version.

typo3.org download page

You will be redirected to sourceforge.net where the download immediately starts. You may change there to another mirror. I did it, because the first selected mirror was very slow.

You can check that the downloaded files are correct with a file integrity checker tool. Microsoft published “Microsoft File Checksum Integrity Verifier” which you find on  http://www.microsoft.com/downloads/details.aspx?FamilyID=B3C93558-31B7-47E2-A663-7365C1686C08&displaylang=en

Open the command line where you downloaded the file, write there (Please change paths to your settings)

c:\FCIV\fciv.exe introductionpackage-4.4.2.zip

and compare the checksum.

file integrity check result

Copy the zip-file to your document root unzip it there in a folder (C:\xampp\htdocs\introductionpackage_442).

Start xampp especially Apache and MySQL. Direct your browser to http://127.0.0.1/introductionpackage_442/.

wizard start page

If you didn’t create a database before let it does by the wizard. Type the wanted title of the database in the first field. Otherwise search the created database in the drop down box.

wizard step2 database

Click continue. On my windows system, where Apache and MySQL are real slow it took one minute to see next step.

wizard step3 database creation

In step 4 you type in a password and can set a different color for the demo web page.

wizard step4 install pw

That’s it. Click on “Go to your Website”.

wizard final congrulations

It’s nice. Isn’t it?

start page

Four example users for different purposes are created. So now have a look to backend. Click on “Log into TYPO3”. If you want to log on later, direct your browser to

http://127.0.0.1/introductionpackage_442/typo3/ or change the directory according to your configuration.

Insert “admin” in the box “Username” and the password you gave in step 4 in the field “Password”. Please don’t forget to change the username “admin” later to something more unguessable.

login page

Click on “Login”.

This is the start page of TYPO3 back end.

backend start page

To change the username of the admin, click on “User admin” on the left below “ADMIN TOOLS”. On the right detail page you see the list of back end users. There you click on the pencil to open the edit page of admin.

user admin edit

Change the Username to whatever, write a name and an e-mail address to get system-emails.

backend change admin username

Then click on the icon for floppy disc above.

To test the changed username for admin log off an on or reload the page. Then you can see the news on the right.

backend see new username

That’s it for now.  To get an insight of TYPO3 look at the page module and browse through the automatic pages.

backend modul page another insight