Attention

TYPO3 v6 has reached its end-of-life April 18th, 2017 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.

There is no further ELTS support. It is strongly recommended updating your project.

Visual style of TCEforms

The design of the auto-generated forms in TYPO3 (typically referred to as "TCEforms") can be controlled down to fine detail. The fifth parameter in the $TCA/types configuration is used for this.

The value consists of three integer pointers separated by a dash ("-"). The first parameter points to a color scheme, the second points to a style scheme for the form elements and the third points to the a border scheme for the table surrounding all form elements until the next border is defined.

The integer pointers refer to entries in the global $TBE_STYLES variable. Here the definitions for each pointer is configured.

$TBE_STYLES entries related to TCEforms

The array $TBE_STYLES is a part of the skinning API in TYPO3 and therefore the full description is found in the section about skinning . However the definition of the three entries related to TCEforms will be explained in detail here below.

Default integer pointers

The "[0-x]" values in the "Subkeys" column in the table below represents the integer pointers that you use in the types- configuration of $TCA. You can set up any positive integer key you like, but TYPO3s core parts already implements the keys from 0-5 with a certain meaning which you are encouraged to follow as well:

Int. pointer

0

Title

Default

Description

Default index. Always used on main-palettes in the bottom of the forms.

Int. pointer

1

Title

Meta fields

Description

Typically used for "Hidden", "Type" and other primary "meta" fields

Int. pointer

2

Title

Headers

Description

For fields related to header information

Int. pointer

3

Title

Main content

Description

For main content

Int. pointer

4

Title

Extras

Description

For extra content, like images, files etc.

Int. pointer

5

Title

Advanced

Description

For special content

Even if these pointers are used in the core of TYPO3 the default configuration as found in typo3/sysext/core/ext_tables.php includes only a definition of the default "0" (zero) pointer:

$TBE_STYLES = array(
        'colorschemes' => array(
                '0' => '#E4E0DB,#CBC7C3,#EDE9E5',
        ),
        'borderschemes' => array(
                '0' => array('border:solid 1px black;',5)
        )
);

Reference table:

Key

Key

Sub-keys

Sub-keys

Description

Description

Key

colorschemes

Sub-keys

[0-x]

Description

This value is a comma separated list of five color/class definitions. The meaning of each color/class is defined as:

[general cell] , [header cell] , [palette header cell] , [header label] , [palette header label]

Each composite color/class value is split with a "|" (vertical bar). The first part is a color value, typically setting a background color or font color. The second part is a class attribute value which will be set either for the table cell (td) or the span-tag around text

For both color and class values these facts apply:

• Omitting a color (blank value) will use the default value (from index "0" and if index "0" is not defined, based on the general mainColors in $TBE_STYLES)

• Setting a color value to dash ("-") will make it transparent (or just not set).

Class attributes are set only if there was a class value set. There are no default class values.

Example:

$TBE_STYLES['colorschemes'][0]='red,yellow,blue,olive,green';

Setting any color in forms

Example:

$TBE_STYLES['colorschemes'][0]='-|class-red,-|class-yellow,-|class-blue,-|class-olive,-|class-green';

This sets class attribute values instead. If you add this to the stylesheet you will get the same result as entering the real color values:

TABLE.typo3-TCEforms .class-red { background-color: red; }
TABLE.typo3-TCEforms .class-yellow { background-color: yellow; }
TABLE.typo3-TCEforms .class-blue { background-color: blue; }
TABLE.typo3-TCEforms .class-olive { color: olive; }
TABLE.typo3-TCEforms .class-green { color: green; }

Key

styleschemes

Sub-keys

[0-x][elementKey]

Description

This value is the content of the "style" attribute of a form element (defined by "elementKey").

If the value is prefixed "CLASS:" then it will set the class attribute instead to the value after the prefix.

"elementKey" is the value of a ['columns']['field name']['config'] / TYPE (e.g. "text", "group", "check", "flex" etc.) or the string "all" (for defining a default value)

Example:

$TBE_STYLES['styleschemes'][0]['all'] = 'background-color:#F7F7F3;';
$TBE_STYLES['styleschemes'][0]['check'] = '';

This (above) sets the background-color CSS attribute of all form elements except checkboxes!

Example:

$TBE_STYLES['styleschemes'][0]['all'] = 'CLASS: formField';

This will set the class attribute to 'formField' for all elements. The associated stylesheet could look like:

TABLE.typo3-TCEforms .formField { background-color: #F7F7F3; }

Key

borderschemes

Sub-keys

[0-x][key]

Description

This value defines the border style of the group of fields.

Technically the group of fields are wrapped into a table.

"key" is an index defining various values:

• "0" : "style" attribute of the table wrapping the section

• "1" : Distance in pixels after the wrapping table

• "2" : "background" attribute of table wrapping the section: Reference to background image is relative to typo3/ folder (prefixed with ->backPath)

• "3" : "class" attribute of table wrapping the section.

Example:

$TBE_STYLES['borderschemes'][0][0] = 'border:solid 1px black;';
$TBE_STYLES['borderschemes'][0][1] = 5;
$TBE_STYLES['borderschemes'][0][2] = '../typo3conf/freestyler_transp.gif';

This renders the form fields like this:

Setting a background in forms

(Black border, the distance to the next section is 5 pixels and there is a background image)

Example:

$TBE_STYLES['borderschemes'][0]= array('','','','wrapperTable');

With an associated stylesheet you can get the same result (image not included):

TABLE.typo3-TCEforms .wrapperTable { border: 1px solid black; margin-top: 5px; }

See next chapter for examples of how to configure your TCEforms.

Style pointers in the "types" configuration

The following is examples of how to use the styling features of TCEforms in real life. These examples will give you a chance to figure out how the features described in the reference table above is implemented.

In the examples below the $TBE_STYLES configuration includes the following:

$TBE_STYLES['colorschemes'] = Array (
    '0' => '#F7F7F3,#E3E3DF,#EDEDE9',
    '1' => '#94A19A,#7C8D84,#7C8D84',
    '2' => '#E4D69E,#E7DBA8,#E9DEAF',
    '3' => '#C2BFC0,#C7C5C5,#C7C5C5',
    '4' => '#B2B5C3,#C4C6D1,#D5D7DE',
    '5' => '#C3B2B5,#D1C4C6,#DED5D7'
);
$TBE_STYLES['styleschemes'] = Array (
    '0' => array('all'=>'background-color: #F7F7F3;border:#7C8D84 solid 1px;', 'check'=>''),
    '1' => array('all'=>'background-color: #94A19A;border:#7C8D84 solid 1px;', 'check'=>''),
    '2' => array('all'=>'background-color: #E4D69E;border:#7C8D84 solid 1px;', 'check'=>''),
    '3' => array('all'=>'background-color: #C2BFC0;border:#7C8D84 solid 1px;', 'check'=>''),
    '4' => array('all'=>'background-color: #B2B5C3;border:#7C8D84 solid 1px;', 'check'=>''),
    '5' => array('all'=>'background-color: #C3B2B5;border:#7C8D84 solid 1px;', 'check'=>''),
);
$TBE_STYLES['borderschemes'] = Array (
    '0' => array('border:solid 1px black;',5),
    '1' => array('border:solid 1px black;',5),
    '2' => array('border:solid 1px black;',5),
    '3' => array('border:solid 1px black;',5),
    '4' => array('border:solid 1px black;',5),
    '5' => array('border:solid 1px black;',5)
);

Examples

First, lets look at a plain types-configuration which merely renders a list of fields:

'types' => Array (
    '0' => Array('showitem' => 'title;;1,photodate,description,images,fe_cruser_id')
),

It renders this form:

The forms standard look

Now I modify the types config to include the fifth parameters (in red):

'types' => Array (
        '0' => Array('showitem' => 'title;;1;;1--0,photodate;;;;-4-,description;;;;2-0-,images;;;;1--0,fe_cruser_id')
),

And this looks like:

The forms dark look

To understand how the style pointers works, lets organize them into a table. This is the "types"-configuration string:

title;;1;;1--0,photodate;;;;-4-,description;;;;2-0-,images;;;;1--0,fe_cruser_id

Splitting this information into a table looks like this:

Fieldname

Fieldname

5th param

5th param:

'colorscheme' pnt

'colorscheme' pnt:

'stylescheme' pnt

'stylescheme' pnt:

'borderscheme' pnt

'borderscheme' pnt:

Fieldname

title

5th param

1--0

'colorscheme' pnt

1

'stylescheme' pnt

[blank]

'borderscheme' pnt

0

Fieldname

photodate

5th param

-4-

'colorscheme' pnt

[blank]

'stylescheme' pnt

4

'borderscheme' pnt

[blank]

Fieldname

description

5th param

2-0-

'colorscheme' pnt

2

'stylescheme' pnt

0

'borderscheme' pnt

[blank]

Fieldname

images

5th param

1--0

'colorscheme' pnt

1

'stylescheme' pnt

[blank]

'borderscheme' pnt

0

Fieldname

fe_cruser_id

5th param

[blank]

'colorscheme' pnt

[blank]

'stylescheme' pnt

[blank]

'borderscheme' pnt

[blank]

Explanation:

• "colorscheme" : The pointer is set to "1" for the first field ("title" field). This gives a green style (according to definitions in $TBE_STYLES['colorscheme'][1]) which is active until the "description" field is rendered. Here the pointer is changed to "2" which gives the yellow style. Immediately after the pointer is set back to "1" and that is active throughout the form.

• "stylescheme" : The pointer starts by being blank. Since no previous value is set, the pointer is implicitly "0" (zero) then. At the field "photodate" the pointer is set to "4" which means the style attribute gets the value "background-color: #B2B5C3;border:#7C8D84 solid 1px;" (according to the current configuration of $TBE_STYLES['stylescheme'][4]). This gives the blueish background of the date field. Immediately after the pointer is back at "0" again and that lasts for the rest of the fields.

• "borderscheme" : The pointer is set to "0", then blank for three fields and then set to "0" again for the last two fields. In effect we get the form divided into two sections. As you can see setting the borderscheme pointer explicitly - even if set to the same value! - breaks up the form each time into a new section. Setting the first pointer to the default border scheme was actually not necessary but served to illustrate that the same border was applied twice.

It should also be clear now, that setting an empty pointer (blank string) will just let the former value pass through.

The three schemes are designed to go in pairs. It is most likely that all three pointers should be set each time you apply the fifth parameter value. Example:

'types' => Array (
        '0' => Array('showitem' => 'title;;1;;1-1-1,photodate;;;;2-2-2,description;;;;3-3-3,images,fe_cruser_id;;;;5-5-5')
),

All forms color schemes