Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

TYPO3 Best Practice Workshop

Download as pdf or txt
Download as pdf or txt
You are on page 1of 29

TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Best Practice Workshop

TYPO3 Best Practice Workshop

Extension Key: best_practice_workshop


Language: en
Keywords: keywords comma-separated
Copyright 2009, Jochen Weiland, Riona Kuthe, <jweiland@jweiland.net, rkuthe@jweiland.net>

This document is published under the Open Content License


available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3


- a GNU/GPL CMS/Framework available from www.typo3.org

1
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Best Practice Workshop

Table of Contents
TYPO3 Best Practice Workshop....................1 Modern Template Building......................................16
Introduction........................................................... 3 Templavoila (Futuristic Template Building)..............18
TYPO3 Development System..................................4 TypoScript: Standard Configuration....................20
Local Development vs. Remote Development............4 Digital Asset Management (DAM)........................21
TYPO3 Provider...................................................... 5 Multilanguage Websites.......................................23
Directory Structure................................................6 Multiple-Tree Concept............................................ 23
Install Tool Settings............................................... 7 One-Tree Conept................................................... 23
Page and User TSconfig.........................................8 Debugging............................................................ 24
Rich Text Editor (RTE)............................................9 Tools..................................................................... 25
Paragraph and Character Styles...............................9 Firefox Add-on: Firebug......................................... 25
Modular TypoScript Code..................................... 12 Firefox Add-on: Web Developer..............................25
Extension Manager..............................................13 Useful Links.......................................................... 26
Templates.............................................................16 ............................................................................ 27

2
TYPO3 Best Practice Workshop - best_practice_workshop Introduction

Introduction
There are many different ways to implement a TYPO3 project. For those new to TYPO3 it is often difficult to decide which way
to choose and to understand which configurations are necessary and meaningful.
This workshop presents a number of shortcuts and best practices to reduce development time. These have been found very
useful in the daily work of the authors, but we understand that some developers may want to choose alternatives to the
methods shown here.

3
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Development System

TYPO3 Development System


Local Development vs. Remote Development
TYPO3 can be developed on a local PC. In this case, typically one of the following software packages will be installed: XAMPP,
LAMP, WAMP, MAMP. (?AMP stands for Apache, MySQL, PHP).
Once the project is completed and ready to go live, it can be transferred to the webserver where it will be accessible for the
users.
However it is recommended to do the development on the target system, rather than on a local PC. Otherwise there can be
compatibility issues arising from different versions or configuration of the Apache, MySQL and PHP software.
Development on the target system also allows the client to review the stages of development and there is no effort to transfer
the project from the local PC to the remote system (which can be several hours of work).
In many cases the development on a remote system is also faster, even though all data has to be transferred over the
Internet. The reason is, that a computer in a data center is optimized as a webserver, where a local PC is optimized for
desktop applications

Extension Development
TYPO3 extensions are programmed in PHP language. The recommended development platform is Eclipse (Java based), either
in form of PDT (PHP Development Tools, free) or ZendStudio (commercial). Most of the TYPO3 developers are using Eclipse,
so there is broad support and know-how for it.

4
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Provider

TYPO3 Provider
TYPO3 can be installed either in a low-cost webspace (shared server, 5 to 50 Euro) or on an exclusive server (50 to 500
Euro).
Most shared hosting packages are NOT suited for TYPO3 because of the system requirements. The default memory limit for
PHP scripts is 16 MB (for PHP5), while TYPO3 typically needs 20 to 50 MB (and more depending on complexity of the project
and installed extensions).
TYPO3 also requires additional software to be installed on the server: ImageMagick or GraphicsMagick for all image
processing functions and tools for indexing external documents as well as additional functionality for the Digital Asset
Management (DAM) feature.
There are a number of hosting companies that offer specialized TYPO3 hosting (both webspace and servers). Here you can
expect that the system requirements are met and that TYPO3 along with the necessary tools are already installed.
Depending on the complexity of the web pages, server performance and number of customers hosted on the server, a
webspace package can typically handle between 100.000 and 1 million page request per month. Websites that expect more
traffic should be hosted on an exclusive server. Websites with several million page impressions per month will require special
clustering configurations.
For maximum flexibility it is strongly recommended that a Secure Shell (SSH) access is available.

5
TYPO3 Best Practice Workshop - best_practice_workshop Directory Structure

Directory Structure

6
TYPO3 Best Practice Workshop - best_practice_workshop Install Tool Settings

Install Tool Settings


After installing TYPO3 and BEFORE starting with the project, the following changes should be made to the default settings in
the Install Tool:

["GFX"]["TTFdpi"] = '96'

["BE"]["compressionLevel"] = '3';

["FE"]["compressionLevel"] = '3';

["GFX"]["gdlib_2"] = '1';

["GFX"]["noIconProc"] = '0';

['SYS']['forceReturnPath'] = '1'

['BE']['forceCharset'] = 'utf-8'['SYS']

['setDBinit'] = 'SET NAMES utf8;'.chr(10).'SET CHARACTER SET utf8;'.chr(10).'SET SESSION


character_set_server=utf8;'.chr(10).''

['SYS']['UTF8filesystem'] = '1'

7
TYPO3 Best Practice Workshop - best_practice_workshop Page and User TSconfig

Page and User TSconfig


Page TSconfig concerns the configuration of the modules in the TYPO3 backend. The Page TSconfig is entered into the root
page and extends to the pages within this branch.
see: http://typo3.org/documentation/document-library/core-documentation/doc_core_tsconfig/current/
Page Tsconfig Top Level Objects:
mod, RTE, TCMAIN, TCEFORM, TSFE, tx_[extension key with no underscore]

User TSconfig is designed for users or groups of users. User TSconfig can be entered for both BE users and BE groups.
User TSconfig Top Level Objects:
admPanel, options, setup.defaults, setup.override, TCAdefaults.[tablename].[field], auth, page, tx_[extension key with no
underscore]

8
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)

Rich Text Editor (RTE)


There are several text editors available for TYPO3, this chapter discusses the extension rtehtmlarea, which is part of the
TYPO3 default software package.
Minimal configuration:

Demo configuation:

The RTE is configured using TSconfig, there are several sample configurations available in forums. With TSconfig the
appearance and features of the editor can be configured on the page level and/or user level. This means that different parts
of the website can use different RTE configurations, as well as there can be configurations for different users.
It is recommended to disable the insertion of images inside the RTE, rather the 'text with image' content element should be
used. When images are uploaded in the RTE, they will all be stored in the same directory and some of the advanced options
for images are not available.

Paragraph and Character Styles


In order to maintain a uniform look of the content elements on the website and keeping the elements in line with CI rules, a
number of paragraph styles that the editor is able to choose from can be preconfigured. Along with the configuration of the
RTE toolbar, the editor can then only choose from a predefined set of style elements.

9
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)

Using CSS and TSconfig it is also possible to configure the RTE for a WYSIWYG presentation. Currently a two-step
configuration is necessary: the styles need to be set both in an external CSS file as well as in TSconfig.
The externals CSS file is referenced in TSconfig:

RTE.default.contentCSS = fileadmin/templates/css/rte.css

Styles that are not defined in the CSS file will not be available in the selection boxes of the RTE. This is how the configuration
looks in the CSS file:
p.moreinfo {
background: #7a7a7a url(../img/moreinfo.gif) no-repeat;
font-weight: bold;
color: #ffffff;
margin: 3px 0 0 0;
padding: 4px 0 3px 30px;

Paragraph styles are defined as p-classes, character styles as span-classes:


span.important { color: #8A0020; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }

Link styles are defined as a-classes:


a.external-link {font-weight: bold;}
a.external-link-new-window {}
a.internal-link {}
a.internal-link-new-window {}
a.download {}
a.mail {}

Classes defined in CSS can be added or removed from the RTE configuration:
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses .= removeFromList(csc-frame-frame1, csc-frame-frame2)

RTE.default.classesParagraph := addToList(moreinfo, ....)


RTE.default.proc.allowedClasses := addToList(moreinfo, ....)

WYSIWYG styling can be configured with the following TSconfig code:


RTE.classes {
moreinfo {
name = Weitere Informationen
value = font-size: 11px; font-weight: bold; padding: 4px 0 5px 30px; background: #7a7a7a

10
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)

url(fileadmin/templates/main/img/moreinfo.gif) no-repeat; text-decoration:none);


}

In some cases it will be necessary to use slightly different font-sizes in the CSS for the RTE than on the website to achive the
same visual representation, this is because the general font size setting for the RTE is less than 100%.
Finally, use the code below to add the paragraph and character styles to the dropdown boxes (comma separated list):
RTE.default.classesParagraph = moreinfo, ...
RTE.default.classesCharacter = important, ...

11
TYPO3 Best Practice Workshop - best_practice_workshop Modular TypoScript Code

Modular TypoScript Code


In practice it is very handy to divide the TypoScript code into snippets according to its function. These snippets are saved
each as extension templates in a system folder.

On the root page of the site with one main template these extensions are the inserted in “Include basis templates”.

Using this method you can edit the code more easily and reuse the snippets for other projects.
Defining constants in the root template for the sitename, filepath etc. is also very helpful. Hence these constants can be
inserted multiple times into the setup snippets as variables.

12
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager

Extension Manager
There are 3 categories of extensions:
● System extensions are part of the TYPO3 package and supplied with the source code (example: RTE,
indexed_search, css_styled_content). They are located in the directory typo3/sysext
● Global extensions are available to all TYPO3 projects that share the same source code installation, they are
located in the directory typo3/ext (typically empty)
● Local extensions are available only to the TYPO3 project in which they are installed. They are located in the
directory typo3conf/ext
It is possible to have one extension installed for example as global AND als local extension, in this case the local extension
takes precedence.
It is recommended to install additional extensions always as local. Only in rare circumstances it will be necessary to update
system extensions, updates of these are made available as part of new TYPO3 versions.
Extensions that have been released to the public are available for download from the TYPO3 Extension Repository (TER).
Those extensions have been reviewed by the TYPO3 Security Team are always visible in the TER, in order to see extensions
without review a checkbox has to be set in the extension manager settings:

Also you may want to download extensions from the official TER and not from one of the mirror servers (since sometimes
there is a delay for updates to find their way to the mirrors):

Before installing a new extension, please follow these guidelines:


1. Only install extensions from which you know what they are doing – read the manual! You may also want to take a
look at the extensions' source code. You can search for extensions on www.typo3.org/extensions/repository/.
2. Extensions on typo3.org are listed by number of downloads – new (and perhaps very interesting) extensions may be
found near the bottom of the list...
3. Check TYPO3 and PHP version requirements as well as dependancies of other extensions
4. Extensions may have a status of Experimental – Alpha – Beta – Stable. If in doubt, prefer a stable version and don't
expect that those marked as experimental or alpha behave as expected in all circumstances. Extensions marked as
obsolete should not be installed – the functionality ist not required anymore (in most cases the function has been
integrated in the TYPO3 source code)
5. Update the TER list to make sure to download the latest version
6. Make sure to have a recent backup if it is necessary to undo the installation
7. Uninstall extensions that are no longer needed (or just have been installed for testing).

13
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager

TYPO3 projects should be regularly checked for available extension updates. This is easy with the menu “Check for extension
updates”. Just click on the extension name to install the update – but be sure to read the comments and update information
in the manual. Did we mention that it is a good idea to have a recent backup?

Sometimes it may be necessary to obtain an older version of an extension. In the default view, the extension manager only
offers the newest version for download. But clicking on the name of the extension rather than the download/install icon on
the left offers the older versions:

14
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager

15
TYPO3 Best Practice Workshop - best_practice_workshop Templates

Templates
HTML templates are used as the basis for any TYPO3 project. The template defines the overall structure of the website and
consists of regular HTML code. Depending on the project, one or more templates may be used for the different sections of a
website.
The template contains placeholders which are used to mark the insertion points for the dynamic content. For each dynamic
element of the website (menus, content, language selection, ...) a placeholder is required. Before delivering a page to the
browser, TYPO3 reads and analyzes the template file, reads the dynamic content from the database and inserts it into the
placeholders (or they are replaced with the dynamic elements).
There are two general methods to create and use the templates in TYPO3, which are discussed below.
Note: it is also technically possible to create a project in TYPO3 with TypoScript alone – not using any template file. However
this method is obsolete and not covered in this document.

Modern Template Building


With the extensions “rlmp_tmplselector” and “automaketemplate” a quite large range of layout varieties for your website can
be realized. The BE user can choose between the different layouts in the page properties.

The extension automaketemplate converts according to the setup below all div tags into subparts.
Example:
<div id="contentMain"> </div>
is converted into:
<div id="contentMain"><!-- ###contentMain###--> <!-- ###contentMain###--></div>

First you must create a folder structure like this in the folder fileadmin:

The main templates are stored in the folder "fileadmin/template/main/", all sub templates are stored in the folder sub. Save
the following templates in the folders.
Main template: template_01.html (wrapper for the sub templates) in folder main
<!-- ###DOCUMENT_HEADER### -->
<!-- ###DOCUMENT_HEADER### -->
<!-- ###DOCUMENT_BODY### begin -->

16
TYPO3 Best Practice Workshop - best_practice_workshop Templates

<div id="nonFooter">
<div id="page">
<div id="content"> </div>
<div id="header"> </div>
<div id="topmenu"> </div>
</div>
</div>
<div id="footer"> </div>
<!-- ###DOCUMENT_BODY### end -->

Default sub template: ct_1.html in folder sub


<title>Standard 3-columns: left*content*right</title>

<div id="ct1">
<div id="contentWrap">
<div id="contentMain"> </div>
<div id="contentRight"> </div>
<div id="contentBorder"> </div>
</div>
<div id="leftmenu"> </div>
</div>

TypoScript module for the page layout:


SETUP:
plugin.tx_rlmptmplselector_pi1 {
// Path to the main and sub templates
templatePathMain = fileadmin/templates/main/
templatePathSub = fileadmin/templates/sub/

// default Templates, if none has been chosen


defaultTemplateFileNameMain = template_01.html
defaultTemplateFileNameSub = ct_1.html

// inherit chosen main and sub templates to subpages


inheritMainTemplates = 1
inheritSubTemplates = 1
}

## Extension automaketemplate configuration


plugin.tx_automaketemplate_pi1 {
content < plugin.tx_rlmptmplselector_pi1
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
## enable only for table-based templates (depreciated)
# TD.all = 1
DIV.all = 1
}
relPathPrefix = fileadmin/templates/main/
}

temp.contentAreaTemplate = TEMPLATE
temp.contentAreaTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = sub

workOnSubpart = DOCUMENT_BODY
subparts.contentMain < styles.content.get
subparts.contentRight < styles.content.getRight
subparts.leftmenu < styles.content.getLeft
subparts.BORDER < styles.content.getBorder
}

temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = main

17
TYPO3 Best Practice Workshop - best_practice_workshop Templates

workOnSubpart = DOCUMENT_BODY
subparts.content < temp.contentAreaTemplate
}

temp.headTemplate = TEMPLATE
temp.headTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_HEADER
}

temp.contentAreaHeaderTemplate = TEMPLATE
temp.contentAreaHeaderTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = sub
workOnSubpart = DOCUMENT_HEADER
}

page = PAGE
page {
typeNum = 0
bodyTag = <body>

10 < temp.mainTemplate
headerData.10 < temp.headTemplate
headerData.20 < temp.contentAreaHeaderTemplate
}

That's it!

Templavoila (Futuristic Template Building)


TemplaVoila (TV) is a different approach to create a TYPO3 project from an existing HTML template. It is covered in detail in
the tutorial 'Futuristic Template Building', however that documentation is somewhat outdated and does not cover the latest
version of TV.
To use TemplaVoila the following requirements must be met:
● Extensions static_info_tables, div, lib and templavoila must be installed
● There must be a system folder in the page tree to hold the TV data structures
● HTML template that passes W3C validation (many problems that occur with TV are caused by templates that do not
validate correctly)
In the page tree create a root page that will be the parent of all the pages in the website. Create subpages that reflect the
structure of the website:

In the page properties of the root page set the TV Storage folder in the 'Gerneral Record Storage Page':

This is the initial Typoscript code needed:


page= PAGE

18
TYPO3 Best Practice Workshop - best_practice_workshop Templates

page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Mapping
The key concept of TemplaVoila is the mapping of the template to the elements in TYPO3. Mapping is started through the
File->Filelist module. A right-click on the name of the template file offers the option TemplaVoila:

When clicking on the preview button, the template of the website is shown in visual mode:

In the first step, a root container must be mapped to the body-tag of the template. By clicking on the map button, the HTML
tags in the template are displayed in the preview:

19
TYPO3 Best Practice Workshop - best_practice_workshop Templates

The root container is mapped by clicking on the <body> tag. In the Action column we can select between INNER and OUTER
mapping. Choosing INNER, the elements inside the tag are mapped, leaving the HTML tag intact. With OUTER mapping, the
content between the HTML tag and the tag itself are replaced. Outer mapping is necessary if not only the content but also
the tags are generated dynamically. For the root container INNER mapping must be selected, since the <body> tag needs to
remain:

By mapping the <body> tag, a container is created that will contain the elements of the webpage. To create the elements, a
fieldname must be added. The name always starts with field_ and must be unique. Only letters a-z and underscore are
allowed. The first element will be the main navigation of the website:

Depending on the layout and implementation of the template, it may sometime be easier to map in the HTML source view:

20
TYPO3 Best Practice Workshop - best_practice_workshop Templates

After saving we can click on the edit icon and now have the option to add a path to our future Typoscript object:

21
TYPO3 Best Practice Workshop - best_practice_workshop TypoScript: Standard Configuration

TypoScript: Standard Configuration


The first module you should insert beside the page layout settings is the TypoScript module with the standard configuration.
## Forbid IE to work in Quirks-Mode
[browser = msie]
config.doctypeSwitch = 1
[GLOBAL]

config {

## XHTML Settings ##
## Set DOCtype
doctype = xhtml_trans
## Clean XHTML Code
xhtml_cleaning = all
## Removes comments around content elements
disablePrefixComment = 1
## Hide <xml...> tag instead of doctypeSwitch
#config.xmlprologue = none

## Language configuration ##
lang = de
language = de
locale_all = de_DE
htmlTag_langKey = de

#### IMPORTANT: baseURL must be updated for RealUrl: ####


baseURL = http://test.riona.de/
tx_realurl_enable = 1
prefixLocalAnchors = all

## Activate Admin-Panel
admPanel = 0

## Extra Debug-Info as comment in HTML code.


## Should be deactivated after going online!
debug = 1

## Span protection, encode email-address, exchanging @ to '(at)':


spamProtectEmailAddresses = 1
spamProtectEmailAddresses_atSubst = &nbsp;(at)&nbsp;

## Configuration for simulateStaticDocuments, deactivate it when using RealURL


simulateStaticDocuments = 1
simulateStaticDocuments_noTypeIfNoTitle = 1
simulateStaticDocuments_pEnc = md5
simulateStaticDocuments_pEnc_onlyP = L

## RealUrl configuration, deactivate simulateStaticDocuments


simulateStaticDocuments = 0

## AWSTAT ##
## Create logfile for AWSTATS, count website access
stat_apache = 1
stat_apache_logfile = logfile.log
stat_excludeBEuserHits = 1
## Save statistics in database. Attention: database can grow very big when activating!
# stat_mysql = 1

## Save klicks on external links in table sys_stat


jumpurl = 1

## Enable indexedsearch also for extern files (pdf, doc, etc.)


index_enable = 1
index_externals = 1

## Save frontend user access


tx_loginusertrack_enable = 1
}

## Allow HTML tags in headers


lib.stdheader.10.setCurrent.htmlSpecialChars = 0

22
TYPO3 Best Practice Workshop - best_practice_workshop Digital Asset Management (DAM)

Digital Asset Management (DAM)


If a project contains 100s or 1,000s of images and other media files (PDF, audio, video, text, ...) it is much better to store
information about these files in a media database, rather than keeping these files just in a number of directories.
The Digital Asset Management (DAM) extension for TYPO3 stores information and meta data about these files in the
database. Editors can search the database and find related files.
When installing DAM, an option is offered to disable the traditional File->Filelist module. We recommend to not disable this
module in general, but disable it for normal editors. Using the File->Filelist module it is possible to edit text files in the
backend. This is not possible with the Media->List module, since that can only used to edit the meta data of a file, but not
the content.
DAM offers the possibility to automatically extract data from the media files, for example EXIF tags from digital cameras or
the text content from Word or PDF files. This data can also be searched when an editor looks for specific media files.
In order that these extract-functions work, a number of additional programs need to be installed on the web server and
included in the binPath in the Install Tool. Also a number of additional service-extensions need to be installed:

When media files are uploaded through the element browser, they are automatically indexed and meta data is extracted.
However if files are added for example through FTP or the File->Filelist module, they are not added to the database. Using
the DAM indexer these files can be added to the database after uploading.

23
TYPO3 Best Practice Workshop - best_practice_workshop Digital Asset Management (DAM)

Using the TYPO3 Element Browser the editor can now search for keywords and quickly get a list of all matching files:

24
TYPO3 Best Practice Workshop - best_practice_workshop Multilanguage Websites

Multilanguage Websites
Many websites are multi-lingual: the visitor can select between languages. TYPO3 has extensive support for generating sites
in any language.
For optimum results TYPO3 should be configured to use the utf-8 character set. Depending on the language, a single
character is represented by 1 to 4 bytes. This not only makes it possible to display character sets like Chinese, but also to mix
several different character sets in one page (for example German, Russian and Japanese).
The character set should be set in the install tool before content is entered, since it is quite difficult to convert a project from
one encoding to another at a later point in time.

Multiple-Tree Concept
If the page structure and content differs a lot in the various languages, the best way to setup a project will be the multiple-
tree concept. Here each language has its own page structure. The language selector will always point to the starting page of
the other languages.
Configuration of the multiple-tree concept requires only to set the language-specific Typoscript parameters on the starting
page of each page structure.

One-Tree Conept
In this configuration it is assumed that the page structure in the various languages is basically identical. For each page there
will be a corresponding page in the other language(s). The language selector switches between the different language
versions of the same page. If a translation for a specific page is not available either the default language is shown or the
language selector will not allow to switch to the other language.

25
TYPO3 Best Practice Workshop - best_practice_workshop Debugging

Debugging

26
TYPO3 Best Practice Workshop - best_practice_workshop Tools

Tools
Firefox Add-on: Firebug

Firebug integrates with Firefox. While you browse you can edit, debug, and monitor CSS, HTML, and JavaScript live in any
web page.

Firefox Add-on: Web Developer

Adds a menu and a toolbar with various web developer tools.

27
TYPO3 Best Practice Workshop - best_practice_workshop Useful Links

Useful Links

28
TYPO3 Best Practice Workshop - best_practice_workshop

Reference
– Possible subsections: Reference (TypoScript)

Property: Data type: Description: Default:


allWrap /+stdWrap wrap Wraps the whole item
wrapItemAndSub wrap Wraps the whole item and any submenu concatenated to it.
subst_elementUid boolean If set, all appearances of the string '{elementUid}' in the total element
html-code (after wrapped in .allWrap} is substituted with the uid number
of the menu item.
This is useful if you want to insert an identification code in the HTML in
order to manipulate properties with JavaScript.
RO_chBgColor string If property RO is set (see below) then you can set this property to a
certain set of parameters which will allow you to change the background
color of eg. the tablecell when the mouse rolls over you text-link.

Syntax:
[over-color] | [out-color] | [id-prefix]

Example:
page = PAGE
page.typeNum = 0
page.10 = HMENU
page.10.wrap = <table border=1>|</table>
page.10.1 = TMENU
page.10.1.NO {
allWrap = <tr><td valign=top id="1tmenu{elementUid}"
style="background:#eeeeee;">|</td></tr>
subst_elementUid = 1
RO_chBgColor = #cccccc | #eeeeee | 1tmenu
RO = 1
}

This example will start out with the table cells in #eeeeee and change
them to #cccccc (and back) when rolled over. The “1tmenu” string is a
unique id for the menu items. You may not need it (unless the same menu
items are more than once on a page), but the important thing is that the
id of the table cell has the exact same label before the {elementUid} (red
marks). The other important thing is that you DO set a default
background color for the cell with the style-attribute (blue marking). If
you do not, Mozilla browsers will behave a little strange by not capturing
the mouseout event the first time it's triggered.
[tsref:(cObject).TEST]

29

You might also like