TypoScript (TS) is the "language", for setting up templates with Typo3. TS is really not a scripting-language with control structures (like if(), while(), for()) and everything. Actually it's just a way to define a whole lot of values in a hierarchical tree-like structure. In fact it's very much alike the Windows Registry: Values arranged logically as "objects"
TS has a certain resemblance with JavaScript in the syntax, but you must really take the time to explore the few important rules of the syntax. It's very simple.
Here is an example of TypoScript:
temp.topmenu = HMENU
temp.topmenu.entryLevel = 1
temp.topmenu.1 = GMENU
temp.topmenu.1.target = content
temp.topmenu.1.NO {XY = [10.w]+12,20
backColor = {$bgCol}wrap = |*| || || || | <br> |*|
10 = TEXT
10.text.field = title
10.fontFile = media/fonts/hatten.ttf
10.fontSize = 16
10.fontColor = {$menuCol1}10.offset = 6,14
10.niceText = 1
10.emboss.offset = 1,1
10.emboss.lowColor = white
10.emboss.highColor = black
10.emboss.blur = 40
10.emboss.opacity = 40
}
temp.topmenu.1.RO < temp.topmenu.1.NO
temp.topmenu.1.RO = 1
temp.topmenu.1.RO {10.emboss.offset = -1,-1
}
This piece of code defines an object "temp.topmenu" which generates a navigation menu for the www.typo3.com website (the topmenu).
temp.topmenu is a content-object of the type "HMENU". Content-objects usually return some HTML content like in this case the HTML-code for site navigation. "HMENU" stands for "hierarchical menu" and this content object is designed to create menus you can put on the website. Here the HMENU has an "entryLevel = 1". This means that the menu consists of pages on the first level (zero being the root-level!) of the page-tree on this website. Now the first level of the menu is defined to be a "GMENU". This is a graphical menu. The target for the menu is "content". This refers the toplevel-object which contains the configuration of the content-frame. The actual frame on the website will also be named "content" by the way...
The next thing that happens is that NO is defined for the GMENU. NO stands for normal. This means that the following configuration is for the buttons when in normal mode (if not mouseover and such stuff...). NO is an GIFBUILDER-object. You cannot see this directly from this piece of code but you can see it in this documentation if you look at the GMENU-object. There you'll see that NO is always a GIFBUILDER-object. You cannot change this!
Next an object inside GIFBUILDER is defined (a GifBuilderObj) on position 10 of an array in this object. The GifBuilderObj is of type "TEXT". The actual text is defined by the object-property "text". Here we could just assign a value like "10.text = some text!" but we need the title of the page from the database. As the text-property has properties from the stdWrap function we import the value of field "title" from the page-record for this particular menuitem.
Now the fontfile, fontsize and fontcolor is defined. Fontcolor is also defined to be a constant. Again this adds the flexibility of easily changing this value from the constant-field of the templatesetup and not directly in TypoScript. "offset" is used to move the text 6 pixels down and 14 pixels to the right on the gif-file. "emboss" adds the embossed effect to the text.
The GIFBUILDER-object is very exciting. Here the dimensions (XY) of the gif-images is defined to be a height of 20 pixels and a width of the text on the gif + 12 pixels. In this way the width differs depending on the text upon it! The background color of the gif-file (backColor) is set to a constant, bgCol, which is the global background color on the website!! This is very clever as a change of this global value will also change the background color of the gif-files! Then a "wrap" is defined. A wrap means a value which is split in halfs by the |-character (vertical line). The first and second parts is placed around something. This kind of wrap is a bit crazy as it puts a <BR>-tag behind every fourth of the menu-gifs!
Now the normal-state part of the menu is finished:
The next thing is that we would really like to add mouse-over effects to the buttons. So the next piece of TypoScript-code is added:
temp.topmenu.1.RO < temp.topmenu.1.NO
temp.topmenu.1.RO = 1
temp.topmenu.1.RO {10.emboss.offset = -1,-1
}
"RO" stands for roll-over, so this is the configuration of the gif-images when the mouse is moved over them.
Here the NO property of GMENU is copied to the RO property of GMENU!! But as RO is optional (NO was required), we must enable it by setting RO = 1. The next is that a single property inside the GIFBUILDER-object is overridden, the emboss-offset is set to "-1,-1". Everything else is just like the normal version of the menu.
Thus the buttons is kind off "pressed" when you move the mouse over them!:
You can see this menu on www.typo3.com.
