Typo3 Web CMS

Typo3 is a very flexible, although complex, content management system. It's complexity is enough for the documentation to be scattered quite a bit. Here I try to collect the stuff needed to get started:

Concepts

• HMENU is the generic hierachical multilevel menu. Each level can be a TMENU (Text Menu) or GMENU (Graphical Menu). Information like this can be found in "TypoScript by Example".
• page.10.entryLevel = 1 creates a "second level only" menu

Getting a Template Started with static TypoScript

Starting point: new, fresh installation of Typo3 for a "separate parked domain", hosted at hetzner.de. Login to the backend as admin.

1. List view; create a new page (this will be the root level content page), unhide, assign a useful title, e.g. "Start Page".
2. Template View; Start Page; "Create Template for a new site";
3. List View; Start Page; "Template(1)"-area; edit page properties (pencil icon in line with "NEW SITE"):
   • edit Template title to something meaningful, e.g. "chuch homepage template"
   • edit "Website title" to whatever you want as a prefix in the <title> tag of every page.
   • fill the "Setup" text area with your long template (working example provided below)
   • Include static (from extensions): CSS Styled Content
4. Create a stylesheet: Template; Start Page; Info/Modify; edit resources; new text resource: name "styles", type .css
5. (useful, but very hard to configure) Import Extension RealURL

Working Template Example

temp.menu_1 = HMENU
temp.menu_1.wrap (
<div id="navi">
|
        </div>
)
temp.menu_1.1 = TMENU

temp.menu_1.1 {
NO.allWrap (
<h2> | </h2>
)
ACT = 1
ACT.allWrap (
<h2 class="menu1-act"> | </h2>
)
CUR = 1
CUR.allWrap (
<h2 class="menu1-cur"> | </h2>
)
expAll = 1
}
temp.menu_1.2 = TMENU
temp.menu_1.2 {
NO.allWrap (
<h3> | </h3>
)
ACT = 1
ACT.allWrap (
<h3 class="menu1-act"> | </h3>
)
CUR = 1
CUR.allWrap (
<h3 class="menu1-cur"> | </h3>
)
}
temp.menu_1.3 = TMENU
temp.menu_1.3 {
NO.allWrap (
<h4> | </h4>
)
ACT = 1
ACT.allWrap (
<h4 class="menu1-act"> | </h4>
)
CUR = 1
CUR.allWrap (
<h4 class="menu1-cur"> | </h4>
)
}

page = PAGE
page.typeNum = 0
page.stylesheet = styles.css

page.10 = COA
page.10.wrap (
  <div id="top">
  |
  </div>
)
page.10.1 = TEXT
page.10.1.value (
  <div id="logo"><img src="fileadmin/templates/res/logo_neutral.gif" alt="Logo"></div>
)
page.10.2 = TEXT
page.10.2 {
  field = title
  wrap (
  <div id="title">
  <h1>Sanda Fellowship Christ Church - <span>|</span></h1>
  </div>
  )
}
page.10.3 = TEXT
page.10.3.value (
  <div id="floatclearer"></div>
)

page.20 = COA
page.20.wrap (
  <div id="left">
  |
  </div>
)
page.20.1 < temp.menu_1

page.50 = COA
page.50.wrap (
  <div id="main">
  |
  </div>
  <div id="footer">
  </div>
)
page.50.2 < styles.content.get

Working Style Sheet Example

/* CSS-Styles for www.sanda-fcc.org - created by stut.de */

body{
font-family: georgia, palatino, serif;
        color: black;
        margin: 0em;
background-color: #FFFFFF;
}
div.floatclearer {
clear: both;
width: 0em;
height: 0em;
margin: 0em;
padding: 0em;
border: 0em;
}
img{
  border: 0px;
}
div#top {
background-color: #CCCC66;
padding-bottom: 1em;
margin: 0em;
}
div#logo {
  float:left;
  margin-left:1em;
  margin-top:1em;
  height:3em;
}
div#top h1 {
  margin-top:0em;
  margin-left:10em;
  padding-top:1em;
  font-size:150%;
}
div#left{
background-color: #CCCC66;
width:11em;
float:left;
padding: 1em 0em 5em 0em;
}

#main {
  background-color: #FFFFFF;
  margin-left: 11em;
  padding: 1em 1em 1em 1em;
}


div#navi{
  font-size:85%;
//  margin-left:10px;
}
#navi a:link {color:black;text-decoration:none;}
#navi a:visited {color:black;text-decoration:none;}
#navi a:active {background-color:black;color:white;text-decoration:none;}
#navi a:hover {background-color:black;color:white;text-decoration:none;}

#navi h2 {
  background-color: #FFCC00;
  padding: 0.2em 0em 0.2em 0.3em;
  margin: 0.6em 0.6em 0.2em 0.6em;
  font-size:100%;
}
#navi h2.menu1-act { 
//  background-color: #FFFF00;
//  border-color:black;
//  border-style:solid;
//  border-width:1px;
}

#navi .menu1-cur { 
  background-color: #FFFF00;
//  border-color:black;
//  border-style:solid;
//  border-width:1px;
}

#navi h3 {
  padding: 0.1em 0.3em 0.0em 0.3em;
  font-weight:normal;
  margin: 0.2em 0.6em 0.2em 0.6em;
  font-size:100%;
}
#navi h3.menu1-act { 
//  background-color: #FFCC00;
//  border-color:black;
//  border-style:solid;
//  border-width:1px;
}

#navi h4 {
  padding: 0.1em 0.3em 0.0em 0.3em;
  font-weight:normal;
  margin: 0.2em 0.6em 0.2em 1.5em;
  font-size:90%;
}
#navi h4.menu1-act { 
//  background-color: #FFCC00;
  border-color:black;
  border-style:solid;
  border-width:1px;
}

TemplaVoila (failed)

• A web site is either created with TemplaVoila or without. There is no easy conversion between "classic/modern" and "futuristic" mode. This is because the content records are in a completely different format. Perhaps the button "enable old page editor" (an option when installing the TemplaVoila extension in the Typo3 Extension Manager) would help.
• Doing it with TemplaVoila has one huge advantage for the beginner: you get loads of example objects by running the TemplaVoila wizard.
• You need to have the template really right before you start. Inserting just a small decorative div later may require you to redo all the mapping.
• TemplaVoila is documented in the Tutorial "Futuristic Template Building".
• I tried TemplaVoila, but somehow it didn't work out. I had ro redo the mapping all over the time. I finally decided to build the template in static TypoScript, because there are fewer layers of complexity involved. I would have hand coded the HTML-template anyway. The template I was considering was not complex, so less than 100 lines of TypoScript dit it. The syntax is a bit cryptic, but you get used to it.

Members Only Area

• (once per site) create the storage area for frontend groups and users:
  1. Go to list view
  2. Create a new page, below (not parallel) the Start page
  3. Set the page type to SysFolder
  4. Give it a descriptive title, e.g. "FrontendUsers"
  5. Set the field "contains extension" to "Website Users"
  6. Important: take note of the PID of the new SysFolder
• (once per site) make the template recognize the new SysFolder
  1. Select the template tool
  2. go to the template record (usually the start page)
  3. select the constant editor
  4. go to the section 'Content: Login', Field "PID of user archive"
  5. select the check box and click "update"
  6. re-visit the field; an input field should have appeared
  7. enter the PID you noted above, click "update"
• Create frontend groups and users:
  1. go to List View
  2. go to the FrontendUsers folder
  3. create a new record for the group
  4. select the record type: website user group
     You definitely need a group, even if you have only few users, because every user needs to be member of a group. Additionally, access permission for web pages is always granted to a group, not to a user.
  5. Enter the group name and optionally other information, save/close
  6. create a new record for the user
  7. select the record type: website user
  8. Enter the user name, the password and optionally other information
  9. add group membership to the new user
  10. save/close
• Create restricted web pages
  1. Create a new page (e.g.) "Member's Area" or visit an existing page (may be top of a large subtree) in Page mode
  2. Edit page properties, scroll to "General Options (continued), Access"
  3. on the right pane click on the name of the group you want to be able to view the page (subtree).
• Create a login form (absolutely required)
  1. Create a new page (e.g.) "Member's area" or visit a page where you want to insert .
  2. insert a new content element of type login form
  3. preferrably: select a target page, e.g. the root of the protected subtree

Multi-Language Sites

Nice documentation can be found in http://typo3.org/documentation/tips-tricks/multi-language-sites-in-typo3/. I try do get things done easier by using the extension bb_languageselect:

• Before creating content, decide a default language, e.g. German for a German organisation with occasional international visitors.
• create additional website languages
  1. chose list view, go to the root of the page tree (even above the start page)
  2. add a new record, select type "website language"
  3. enter the name of the language and select an appropriate flag
  4. remember the id-number of each language
• Install extension bb_languageselect
• Configure it and include it in the template, e.g. add this text to the setup section of the template record:

  temp.languageSelect = USER
temp.languageSelect {
userFunc = tx_bblanguageselect_pi1->showFlags
iconset = jacorre
cn_DE = 0
cn_GB = 3
}
page.595 < temp.languageSelect

• Make the template use the selected language, e.g. add this text to the top of the setup section of the template record:

  config.linkVars = L
[globalVar = GP:L = 3]
config.sys_language_uid = 3
config.language = en

  [GLOBAL]
...

  Create a [globalVar ...] section for each non-default language.

  This code assumes that language uid=3 is English. Don't forget to add a [GLOBAL] condition after the code.

  Additional template localization can be done by using [globalVar ...] conditions in other places.

• Create multilingual content
  1. In page view, go to the page to be translated.
  2. Select the language tool on the top right selector, where you could also chose Columns, Quick Edit, ...
  3. In the selector box "make new translation of this page", select the language you want to create a page version for.
  4. copy/edit content as usual. You'll see several columns for the different languages

Attemptimg (failed) a calendar with the extended calendar (calendar) extension

Much of this is borrowed from http://blog.undkonsorten.com/typo3-kalender-extension-extended-calendar-calendar (German language).

• Download and install the tt_news extentsion
  • Important: disable "Use General Record Storage Page"
• Download and install the extended calendar extension (calendar). (Author's home page)
• Create a SysFolder for the events, e.g. Events
• New events, including categories, and target audiences, can be created as records inside the Events-SysFolder
• Does not work out of the box. Error message: NO entry in the $TCA-array for the table "tt_news". This means that the function enableFields() is called with an invalid table name as argument.

Manuals

To use the main advantage of a CMS, enabling non-technical browser users to edit web contents, these users need training and documentation. Here are my results of a web search for end-user friendly Typo3 frontend manuals (with emphasis on German language):

• official "Getting Started", Section "Edit Page Content" (German version)
• the above as a video (21.4 MB, 23 Minutes, multilanguage audio in English, Danish, German)

Home | Christian Missions | Christustreff Marburg | Pictures of Marburg | Job | Remote Communications | Linux OS | Psion page | Contact

Last updated: 11.06.2011 08:46:32 Martin Stut, email: , Marburg, Germany
URL: http://www.stut.de/typo3.html