Sylvain:Full Website Setup
From TYPO3Wiki
With TYPO3 3.6.2 + DUMMY package
You can force to get this done and put this pagename into
DocTeam-issue "to merge!".
And YOU should START to merge this :-)
Contents |
Installation current state
Here is my note about the installation and where I should restart.
Done
- plugin autoparser is configured in the template record (See below).
- Css styled content plugin is installed and well configured. (TODO: put link to details)
- the web designer's CSS has been integrated for major text content rendering into a modified stylesheet copied form the EXT:css_styled_content folder.
- the first level of the page menu is integrated in the template, and working.
- second level menu is integrated with TMENU_LAYERS, and the looking is good
- The contact form is intergrated with TYPO3 mailform content object. (TODO: put link to details)
- The full siteweb page's structure (page name) is in place, manualy imported. Some page content are inserted too.
- The Home page has a special looking, so a special condition has been enabled in the root template.
- starting the programming for special upload image in some page.
- Testing user locking see Testing solution 1
- catch the page id which hold the insert records and redirect it to the real page in frontend.
- Done by using extended page en showing the alternate page, set in page header, See insert records.
- FE login form configured, with standard login form.
- Frontend login/logout form removed, no more used
- Insert Records content fixed and Template modifed to add edit icon with login to the BE
- Installed Top content extension, to display last modified content for the site content supervisor
- Plugin removed, the list of change will be presesnted with a new extension, programmed from scratch and available in the BE. (see Admin content displayer)
- configured French locale for debian in order to provide French translation to php (See Configuring the web server)
- Recovered script content and completed the answer in the faq (See. tha FAQ)
TODO
- create a supervisor / admin plugin for the BE to present the changes.
- configure the BE to put the user strait in their content to edit.
- transform frontcontroler URL into readable URL (static URL)
- document extension problem if any (kj_recycler, content_uneraser)
- test if the contact form works.
- See if the content inclusion for desc/user_name.html is still necessary
- fix the level2 menu positioning and style, will be done with the web designer
Setting up TYPO3
Last time configuration tricks
(TODO: may be moved somewhere else, where ?)
Finalizing TYPO3, website setup.
Using the Setup module
- change the admin pasword
- enter admin information (name, email)
- change the install tool password
Using Install module
- All Configuration section
-
folderCreateMask = 777, for FTP sharing with a normal user - $TYPO3_CONF_VARS["BE"]["folderCreateMask"] = '0777'
-
I don't recommend configuration settings like those above. That way everyone would be able to change or delete all your files and directories in fileadmin/. It's similar to populating your server's root password ;-)
If you want to share your files you may try these settings in the All Configuration section instead:
- [BE][fileCreateMask] ($TYPO3_CONF_VARS["BE"]["fileCreateMask"])
- 0644, for write access via webserver only, read access for everyone else
- 0664, for write access via webserver and FTP, read access for everyone else (combined with [BE][createGroup])
- 0600, for read/write access via webserver only, no access for others
- 0660, for read/write access via webserver and FTP, no access for others (combined with [BE][createGroup])
- [BE][folderCreateMask] ($TYPO3_CONF_VARS["BE"]["folderCreateMask"])
- 0755, for write access via webserver only, read access for everyone else
- 0775, for write access via webserver and FTP, read access for everyone else (combined with [BE][createGroup])
- 0700, for read/write access via webserver only, no access for others
- 0770, for read/write access via webserver and FTP, no access for others (combined with [BE][createGroup])
- [BE][createGroup] ($TYPO3_CONF_VARS["BE"]["createGroup"])
- e.g. typo3, your webserver user und your ftp user should be members of this group
- It would be pointless to use this setting if you don't use 0664 / 0660 as fileCreateMask or 0775 / 0770 as folderCreateMask.
- When uploading data via FTP make sure to set the access group to the value of [BE][createGroup] and the access rights to the values of [BE][fileCreateMask] and [BE][folderCreateMask]. Most FTP-servers support settings for these matters.
I've used this post, found by google, http://typo3.toaster-schwerin.de/mailarchive/msg31131.html to find this one. This feature wasn't in version 3.5.x.
Configuring the web server
French locale support for debian. The locale for unix / Linux system allow you to change the output language of many system command. Like datation for example.
This page pointed me to the right command to run. http://www.debian.org/doc/manuals/debian-euro-support/ch-configure.en.html
# showing which locale are currently available locale -a # configuring new locale dpkg-reconfigure -plow locales # locale chosen en_US.ISO-8859-1... done en_US.ISO-8859-15... done en_US.UTF-8... done fr_FR.ISO-8859-1... done fr_FR.UTF-8... done fr_FR.UTF-8@euro... done fr_FR.ISO-8859-15@euro... done Generation complete.
Creating basic structure
(TODO: may be some link here or some screenshot)
- The root page
- Page Module
- New page, Inside
- unhide + set the title
- Template SysFolder
- New page, Type SysFolder, name 'Template'
GH-Image
`-- GH-Image.com
|--GH Image
|--CD de photos
|--Photographes
|--Panoramiques
|--Infographie
|--Imprimerie
|--VCD-DVD diaporama
|--[Tempate]
|--[FE_user]
`--[Poubelle]
- The template on the root page which will include the template in the template folder
- New Template (on the root page)
- Template title: root template
- check box Clear: Constants and Setup plus, check Rootlevel:
- Include basis template: our main template in the Template SysFolder
- upload the HTML template and make the template folder tree.
- fileadmin/template
|-- css | `-- style.css |-- images | |-- fond.gif | |-- images.jpg | |-- logo.jpg | |-- pix1.gif | |-- pix2.gif | |-- pix3.gif | |-- pointe.gif | `-- spacer.gif `-- template.html
Installing extension
- Rich Text Editor - Chooser (for mozilla RTE, if available)
- CSS styled content
- Template Auto-parser
- Web>Plugins
- Extension Repository Kickstarter
- Edit Frontend Only-flag
KJ Recycler
This extension seems nice to recover deleted item from the data base. KJ_RECYCLER
Big update is public, and i think it isn't deprecated now. Look here: http://typo3.org/extensions/repository/new/kj_recycler/
But it is now deprecated and not supported by its author any more. An alternative extension doing the same purpose is Content UnEraser.
For reclycing behavior under TYPO3, see also discussion in English newsgroups:
Configuring some special content
FE Login form
Setting up a login form for Frontend user is described in Getting Started (GS) 1.5 Password protected pages.
To work it also needs a template setting. Described here in GS (section: configuring the front end user folder?)
I my template setting it's as follow:
- >Template
- [Template] folder
- Constant Editor
- Category: CONTENT
- section: Content: 'Login' (styles.content.loginform.pid)
- PID of user archive = 37
Testing FE user login, ok but the password is restricted to be lowercase. See FAQ for detail
It also exist an extension New frontend login box which can do some nice trick.
Frontend login box for Backend user
I would like to offer to the user of this web site a login box in the frontend. (Still not sure about that)
Insert Records
This content is very nice because it offer the possibility to show the real content of another content record, located somewhere is in the website tree.
I use it in order to have content edition, restricted to only one content record in a lonely page.
But there's a problem using this method :
- When the user use the BE icon to show the page it shows the page which hold the real content, not the one in which the content element is inserted.
- The content record of type insert records, in the page where is inserted, is not updated, when I update the source record. The cache of the page not updated. Is it a bug ?
I solved the problem using 2 TYPO3 tricks.
- using extended page showing the alternate page, set in page header Show content from this page instead: pointing the the real page.
- using the page TSConfig to force cache refresh.
The Insert Records is of CType shortcut, usefull to customized rendering with TypoScript in Template.
The following TS allow to display a edit icon under any Insert Records content. It's in the Template Setup.
## customize Insert Records display ## customize Insert Records display tt_content.shortcut.30 = TEXT tt_content.shortcut.30.value ( <img align="right" alt="éditer" border="0" src="fileadmin/template/images/stylo_t3.gif"> ) tt_content.shortcut.30.wrap = <a h-r-e-f="typo3/" target="_blank">|</a>
Upgrading to TYPO3 3.6.2
Using the manual, I upgrade to a new TYPO3 version.
Starting at section 4.3 of the Manual. Note it good to read other section as well.
- revoming the die()
- In the main source distribution of TYPO3, the install script is disabled by a die() function call.
Open the file typo3/install/index.php and remove/out-comment the line that outputs this message!
- open the file with a text editor and comment the related line arround nile 43.
- Enter the Install password, which is NOT the BE admin password. Or read instruction to copie paste the MD5 string into the localconf.php.
- run Database Analyser
- run the data base COMPARE tools.
- for me it showed up old field to delete in the ouput section Update database tables and fields:
- I select the field and hit the Write to database button.
- I also chose to DROP that removed field because I don't use them any more.
- Then I IMPORT the "Dump statis data"
- nothing special
- reset User preference, I will set them back. (What bout this action ??, need more detail)
- Remove "temp_CACHED_" files in typo3conf/ dir
The reset User preference force me to reset some preference for my admin user:
- Recursive Copy: 30
- Recursive Delete(!): checked
Somes minor change in non admin user, not really important in my case.
Seems working well.
To endsure that everithing is correct, I also clear the cached file in temp folder with the installation tool. I logout my admin and log back again. :-)
Took 35 min, including writing this down.
Setting up the template
The template is the main TYPO3 object which will drive rendering of the website. In this example, the way we use a template is derived from MTB/1.
It uses the plugin autoparser which allows you to write a nice template with a web autoring tool, like DreamWeaver, and import it directly as an HTML file without any change.
In fact, the template nicely integrates parameter, advised by the TYPO3 programmer (administrator). Future template modification, will almost always be and FTP upload to the TYPO3 website.
In order for this setup to work we need the extension autoparser. See the following link for TypoScript example and how to install the Template Auto parser.
http://typo3.org/documentation/document-library/doc_tut_templselect/The_Template_Auto_pa/
Adding the template record
- In 'Template' folder, new >Template
- Adding related TypoScript based static template, in Include static:
- content (default)
Working with EXT:css_styled_content
The extension is globaly installed in the TYPO3 source folder. We can have a look in the extension folder in order to find some documentation and information to work with the stylesheet and the default style classes.
For detail see : typo3_src-3.6.1/typo3/ext/css_styled_content/css/readme.txt
Setting up the menu in TypoScript
The navigation menu, in a TYPO3 web site really tricky to set up. For beginner it can even be the hardest part.
In the web site which I'm setting up the designer has setup a DHTML menu. So we are going to use the TMENU_LAYERS content Object to integrate the same thing in TYPO3.
How did I come here
A very good question in fact, here is the path I've followed to find information about this menu stuff.
- I found the GREEN standard TypoScript-template wihch integrates this kind of menu.
- using the Template Analyser, in styles.gmenu_layer.green I found the TypoScript which renders the menu unsing the GMENU_LAYER.
- I looked into the TSref and found that there's also a TMENU_LAYER which is the same for textual menu.
- reading TSRef I noticed the small comment « (Please refer to the "testsite" application which has a large section with test-examples for a LOT of applications/configurations of the xMENU_LAYERS!) »
- Using my testsite install, I found this page
index.php?id=342&type=42
So I extracted all the code I needed for the menu. I haven't set all the parameters yet, but it's already usable.
temp.menu_1 = HMENU
# strangly the () doesn't work for setting a multiline value, here
temp.menu_1.wrap = <table class="Htablomenu" align="right" border="0" cellpadding="0" cellspacing="0" width="130"><tbody>|</tbody></table>
## TMENU_LAYERS type 42 from testsite example page id 342
# First level menu-object, textual
temp.menu_1.1 = TMENU_LAYERS
temp.menu_1.1 {
lockPosition = y
expAll=1
xPosOffset = 0
yPosOffset = -153
topOffset = 0
leftOffset = 292
setFixedWidth= 200
setFixedHeight=26
useLargestItemX = 1
freezeMouseover=1
hideMenuWhenNotOver = 10
hideMenuTimer = 1000
}
temp.menu_1.1.NO {
allWrap (<tr>
<td class="Hmenu" valign="top">|</td>
</tr>
)
ATagParams = class="Htxtmenu"
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2.wrap = <table border="0" cellpadding="3" cellspacing="1" style="background-color: rgb(130, 8, 90)">|</table>
temp.menu_1.2.NO {
allWrap = <tr><td id="2tmenu{elementUid}" style="background:#ffffff;">|</td></tr>
linkWrap = <div style="color: rgb(131, 8, 90);">|</div>
RO = 1
# the id '2tmenu' must be the same prefix as above see <td id="">
RO_chBgColor = #F2DCEB | #ffffff | 2tmenu
subst_elementUid = 1
}
Configuring the Template Record with TypoScript
All the information used here in the setup section is derived from MTB/1.
- Template title: set the name of the template record in the Template SysFolder
- Website title: overide site name in the page <title>
- Basic template code Setup:
# automaketemplate
# Configuring the Auto-Parser:
# main code took from MTB/1
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
# the file contain its own css related stylesheet, but css_styled_content doesn't ouput the same
# class names. See: PAGE object configuration at the end.
content.file = fileadmin/template/template.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/
}
temp.menu_1 = HMENU
# strangly the () doesn't work for setting a multiline value, here
temp.menu_1.wrap = <table class="Htablomenu" align="right" border="0" cellpadding="0" cellspacing="0" width="130"><tbody>|</tbody></table>
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap (<tr>
<td class="Hmenu" valign="top">|</td>
</tr>
)
NO.ATagParams = class="Htxtmenu"
}
/*
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}
*/
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
# Substitute the ###menu_1### subpart with some example content:
subparts.menu_1 < temp.menu_1
# Substitute the ###content### subpart with the real content extracted by css_styled_content
subparts.content < styles.content.get
}
# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
# TypoScript from typo3_src-3.6.1/typo3/ext/css_styled_content/css/readme.txt
page.stylesheet = fileadmin/template/css/css_styled_content.css
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
Configuring the static Template rendering
The template mechanism of TYPO3 is extermly powerful and difficult to trick for the beginner.
Here we will put some collected TypoScript code which configure the rendering engine. Our objective is to have our own HTML template file and our own CSS stylesheet rendered as nice as the one produced first by the web designer.
A big chalenge !
For the moment we have multiple way to achive that goal. The best which suite our objective is to have an external HTML template, and an external CSS style sheet.
We are trying here to keep the simpliest TypoScript configuration for our template record. And we would also like to keep the HTML template compatible with the web designer authoring tool. It means that we wont insert HTML comment, but use the AutoParser extention to do it for us keeping the HTML file unmodified.
Our main document source to extract the TypoScript configuration are
Documentation reference
During all this TYPO3 setup I've used the following documentation.
My FAQ and notes
This is my personal faq about this project. Text here will be integrated into some real faq and tips system.
How does the <link>-tag in text content work ?
In text content, you can use the special <link> which allow you to insert link in your text and let TYPO3 handle the formating and internal linking if any.
Example:
Passez par ce lien pour enter dans <link typo3/>l'outil de gestion</link>.
How to trunc the content in the BE ?
When view page content in the BE, something I would like to have only some few words of the content, not the full content.
ScreenShot:
How to make FE user password case sensitive
It seems that FE user password are case lowered when you fill the creation form.
A long time ago, someone asked on the mailinglist:
Extension Programming
This section has now its own page, click on the section Title.
Sugesstion, tools, improvement
- Auto parser, automatic import button, which could parse the HTML template and put some code into the Template record Setup field.
- Extension translation, would be nice to have the translate tools directly available on the extension repository on typo3.org.
