by Bernd Warken at netcos AG
1.1 Webserver and needed Programs
1.4 TemplaVoilà and Extensions
Chapter 2: Example with a Content of one Column
2.4 TemplaVoilà Data Structure
2.6 Adoption of the Data Structure
Chapter 3: Increase the Content by several Columns
3.5 Construction of the TemplaVoilà Data Structures
Chapter 4: Combination of Column Divisions
This document describes the generation of examples with several columns of the same width within the webdesign architecture TYPO3. The basic concept is the nested usage of div tag pairs that are controlled by float left and float right. Thus neither margin nor padding are needed for the breadth. These tags are critical for some browsers, mostly for Microsoft Internet Explorer. Of course, there also exist other possibilities, but this concept seems to be the securest. If interested just read on.
This document is part of the TYPO3 project several_columns within tsrep.de. The actual version is 1.1 of 21 August 2007. The author is Bernd Warken at netcos AG.
The project consists of this document and a set of example files in some subdirectories, which contain the described source code of this document.
several_columns.sxw this document, in OpenOffice text form v1
css/several_columns .css complete CSS file, chapter 2.2 und 3.4
templates/several_columns 1.html 1 column, HTML draft, chapter 2.1
templates/several_columns 2.html 2 columns, HTML draft, chapter 3.3
templates/several_columns 3.html 3 columns, HTML draft, chapter 3.3
templates/several_columns 4.html 4 columns, HTML draft, chapter 3.3
templates/several_columns 5.html 5 columns, HTML draft, chapter 3.3
templates/several_columns 3_3_5_5.html 3+3+5+5 Spalten, HTML draft, chapter 4
ts/typoscript-template.tmpl complete TypoScript template, chapter 2.5
All elements of the project (this document and the source codes) are put under the licence GPL (GNU General Public License) version 3. The original text of this licence is available under http://www.gnu.org/licenses/gpl.html.
Copyright 2007 Bernd Warken
This document was created with using TYPO3 version 4.1.2. You should already have some basic knowledge on TYPO3. Some suitable tutorials, videos, and documents are available at the TYPO3 website http://typo3.org. The whole TYPO3 program runson every web browser.
In order that a browser works together with TYPO3, it is necessary that a web server is running on your computer. We propose that you use apache2 for that. Additionally you need php in version 4 or 5, version 5 is better. Moreover the database mysql is used, eventually you will need phpmyadmin as optimal administration tool für mysql. If apache makes problem just try to deinstall the modul suphp first. With other problems in the program chain, it is possible to replace the system installation of the programs apache2, php, mysql, and phpmyadmin by the program set XAMPP from http://www.apachefriends.org/de/xampp.htm. This provides a working system of those programs, but it is said to be a bit unsecure.
If you want to follow the examples in this project you must have a TYPO3 version installed. You find an asctual version of the TYPO3 packets dummy and source at http://typo3.org/download/. Both packets will be installed into the local www directory. This is located at /var/www/ on an apache server of a Linux Debian system, at /opt/lampp/htdocs/ on a XAMPP system. In each case, this directory is approached on each browser by http://localhost. We propose to create a subdirectory typo3/ in this directory for the installation of several TYPO3 installations.
The dummy directory can be renamed just as you like. Here we assume that it was called http://localhost/typo3/several_columns. With UNIX-like operating systems, the TYPO3 tree should have the permissions of the apache user. On Linux-Debian, this means that the whole tree should be owned to the user and group www-data, XAMPP uses the user nobody and the group nogroup.
When newly installed the call of http://localhost/typo3/mehrspaltig in a web browser starts the Install Tool of TYPO3. It can happen that this program soes not start automatically. Then you must create the file ENABLE_INSTALL_TOOL in the subdirectory typo3conf of the TYPO3 tree and restart the page in the browser. If you are asked for a password within the install tool try the default password joh316. You find details on this tool in the documentation page of the TYPO3 website. In this document, however, we will just tell about some error messages.
This tool displays a menu with 10 points. Point 1: Basic Configuration presents some errors of the file php.ini that should be fixed urgently. On Linux-Debian, this file is located in the directory /etc/php5/apache2/, on other systems in the configuration area for apache and php. Especially the variable memory_limit should be set to some high value, such as 128M, to prevent memory problems of TYPO3.
When this setup is done the TYPO3 backend is started. This can be reached by calling http://localhost/typo3/mehrspaltig/typo3/ in a web browser. Login as user admin and use the password password when newly installed. Now you are at the backend. On the left column, you see a menu. Its elements are called TYPO3 modules. We will use them in the following.
You should change your password because you are the mighty user admin. You can do that under the modul Setup in the module group User in the lower part. Save your decision by the button Save Configuration at the lower end.
It is very hard to create applications with many columns in the classical TYPO3 concept. The normal situation is that there exist only 4 regions of a page: left, right, nomal, and border. For more columns, these regions do not suffice any more. A deeper split is very hard. So we change to the new TYPO3 concept TemplaVoilà that allows an arbitrary number and order of regions. This concept, however, is not yet default part of TYPO3, but it is an extension that can be easily installed.
The installation of extensions is a default procedure in TYPO3. It is done by the module Ext Manager (module group Tools) in the element Import extensions. The name of the extension TemplaVoilà is TemplaVoilà! (templavoila).
When installing TemplaVoilà some more extensions have to be installed as well. But the module Ext Manager performs that automatically when following its guidance. After the installation, the page in the web browser must be reloaded in order to activate the newly installed modules.
Moreover the extension Lorem Ipsum (lorem_ipsum) is very useful. It allows to insert arbitrary texts and pictures in a simple way. We assume that you install this extension as well.
In order to work with TemplaVoilà, a simplified HTML draft is needed, an originary file that is used to create the TYPO3 code. Such a file is often called HTML template, although this name leads to a confusion with the term TypoScript templates. Creating such a HTML draft is very simple, only very few HTML knowledge is needed. All elements that are supposed to act as TYPO3 elements are represented by div tags. The creative control by CSS is done by the parameters id or class.
We want to include the following structures into our document, a logo, below that a vertical menu for the content pages, whereas the content with a single column appears to the right. We firstly create a HTML file for this structure. Then we construct a suitable CSS file for the visual representation. From these two files we generate a TemplaVoilà data structure and write a TypoScript template. After creating these structures, we are able to view the generated website in the frontend.
For the creation of the needed HTML file, we go to the module Filelist (module group File). There we see the tree structure of the folder fileadmin. Firstly we generate the subfolder templates by clicking on the symbol left of fileadmin and choosing the element New. By that, a selective form for generating a folder and a file appears. We create the folder templates.
We move into this folder by clicking the plus sign left of fileadmin and choosing the subfolder templates. In this folder, we generate a new file several_columns1.html by clicking the button New. This file becomes the HTML draft for constructions with a content of one column. By choosing the element Edit in the symbol left of the file name, an editor for this file is opened. We write the following content in this file.
|
<html> <head> <title>several_columns1</title> <link rel="stylesheet" type="text/css" href="../css/several_columns.css"> </head> <body> <div id="project"> <div id="head">[HEAD]</div> <div id="columns"> <div id="column_left"> <div id="menu_left">[MENU_LEFT]</div> </div> <div id="column_right" class="content"> <div id="first_of_one" class="content_one">[FIRST_OF_ONE]</div> </div> </div> </div> </body> </html> |
This content is also available in the example file templates/several_columns1.html.
The code seems to contain more div structures than necessary, but this makes sense for pure handling with CSS. For the structures we want to show in the frontend we set a description in brackets. This is not necessary and can be changed arbitrarily. But by this we can find the elements more easily in the code.
[HEAD] describes the logo, [MENU_LEFT] stands for the navigation menu supposed to appear on the left column. Both elements are contained in each page of the output (frontend), while [ONE_OF_ONE] stands for the content of a page which, of course, is different for different pages. The name [ONE_OF_ONE] stands for „column one of maximal one column“.
The div structure is now described as a whole. The whole program is enclosed by a div with the id project. Part of this are two divs with the ids head and columns. head stands for the logo in the upper part of the output. The field columns is contained below that and contains the whole further regions. It is composed of two divs column_left and column_right. Each of them contains a div with the part that can be seen in the output, the menu on the left and the page content on the right.
The CSS file was called in the <head> part of the HTML file with ../css/several_columns.css. That means that it should exist in the folder fileadmin/css. So we have to create this folder and this file (again with New in the menu within module Filelist). We insert the following content into the file several_columns.css.
|
* { padding: 0; margin: 0; width: auto; }
#project { width: 800px; margin: auto; }
#head { height: 125px; width: 800px; background-color: yellow; margin-bottom: 10px; }
#columns { clear: both; width: 800px; }
#column_left { float: left; width: 190px; }
#menu_left { background-color: #47BF4C; }
#menu_left ul li { list-style-type: none; }
#menu_left ul ul li { margin-left: 20px; }
#column_right { float: right; width: 600px; }
.content_one { border: blue 1px solid; background-color: #ffc; } |
The example file css/mehrspaltig.css contains this code, but also some more elements that are handled in later chapters.
In the frontend, the navigation menu and the content part shall stand side by side. So we have two parallel columns. In CSS, this is done by two div tags, the first one (column_left) with float: left and the second (column_right) with float: right. According to the HTML standard, these div tags must have a width parameter each. We do not use border, margins und paddings in these, if needed these could be provided in sub-divs. This happens for example in the div with class content_one, a sub-div of the float element column_right.
In the TypoScript templates we will construct the menu in such a way that the menu entries are covered by within ul and li. We put list-style-type to none, such that no list presentation will be taken. Sup-pages will use two ul. These are indented here by a margin.
Now we create a new page named several_columns, it is supposed to be the root for our program. For that, we choose the module Page (module group Web). In the middle column, there usually are the page names that have already been created. But with a new installation of TYPO3, there is only the top page. If we did not provide a Site name during the installation the top page is called New TYPO3 site. We can leave this title or change it if we want, it does not hurt us.
Next we click on the symbol left of the top page. A menu opens, from which we choose New. Next we select the menu point Create a new page.
Now appears an installation menu for the new page. Firstly we deactivate the point Hide page. We choose as Type the element Shortcut. That makes this page a link to another page that will be created later on. Moreover we supply the Pagetitle as several_columns. Now this page can be saved by clicking a button with the picture of a floppy disk. We see three such floppy symbols at the upper and lower end of the page; the left symbol is Save document, the central one is Save document and view page, and the right symbol is Save and close doument. All three symbols can be used for saving, but as we are done with the configuration with this page the right symbol would be best.
As a result, a plus sign appears beneath the top page on the middle column. When clicking on this we see that there is a new page several_columns as subpage; we can now work on with this.
Next we create the subpage Home of several_columns. For that, we click on the symbol left to several_columns and choose again New. Then we select Page (inside). Again we deactivate Hide page. We let the Type be Standard. We supply the Pagetitle as Home. We save (by the floppy button).
Now we can provide the Shortcut connection for the page several_columns. We click on the modul Page (module group Web) on the left column, then on several_columns in the middle column. We choose the pencil symbol in the right column. By that we can work on the content of the page. We control that Type is really set to Shortcut. Then we look for the element Shortcut to page in the form. On the total right under it, there is a button Browse for records. By selecting this, a list of the already created pages is shown. We choose the page Home. We are now back to the form. We save it (floppy symbol).
Next we must generate a Storage Folder (General Record Storage page), this is needed by TemplaVoilà. For that, we create another subpage of several_columns and call it Storage Folder. This time we need as Type the value SysFolder.
We provide this page to several_columns by opening the pencil symbol of several_columns in the module Page and inserting the page Storage Folder into the element General Record Storage page. We then save the form.
In order to work with the data in the HTML draft file, we must produce a TmeplaVoilà data structure with it. To do this, we move to this file by the module Filelist (module group File) over the folder fileadmin and subfolder templates. We click on the symbol left of the file name several_columns1.html. A menu with several entries arises. We choose the entry TemplaVoilà. By that, a form for the construction of a data structure appears.
The first data element provided is called Root. It represents the root element in the HTML file. This data element is already preconfigured. The only thing to be provided is the position where this root lies in the HTML file. To provide this position, click the button Map. Thereby a graphical overview of the tags in the HTML file is shown. We select the element body for Root and push the arising Set button. Thus the configuration of the Root element has been done.
The Preview button shows which regions of the HTML file could be configured. We actually see there three tags that can be inserted as data structures. For doing this, we click on the field [Enter new fieldname]. Thereby the content of this field changes to field_. As first element, we want to include the element Head. Thus we insert the field name field_head. The starting name field_ is important and should not be changed. Thereafter we can take over the new field by the button Add.
Thereby arises a new form in which we must change two fields. In the field Title we provide a suitable title, in our case Head. An important field is Editing Type. Therein we use only two types, Content Elements for the parts that change with every page, and TypoScript Object Path for the parts that are the same for each output page. As our element Head is an enterprise logo that remains the same for each page we choose TypoScript Object Path. Now we can push the button Add to overtake.
Thereby the form changes a bit. An additional field Object path: arises. It has the default value lib.myObject, but we prefer to choose the value lib.head. This name will be used in the TypoScript template. We can now overtake this by pushing the button Update which has replaced the button Add.
A new Map button arises at our field field_head. We push this one. A map with the tags is printed. We select from this the div that belongs to [HEAD] and has the id head. The arising action field with INNER (Exclude tag) can be overtaken with the Set button. Thus the configuration of the head element is done.
In the same way, the element [MENU_LEFT] is configured. We built a new field field_menu_left with the title Menu Left. As navigation element, it is again equal for all pages, such that again the Editing Type: TypoScript Object Path is taken over. As Object path: we take lib.menu_left. In the Map, we choose the div with the id menu_left.
Only one element is left, the content element [FIRST_OF_ONE]. Its field name is field_first_of_one, the title First of one. As the page content changes with any page its Editing Type should be chosen as Content Elements. Accepting with the Add button does not create a new form, such that Map arises without specifying an Object path. We choose the div with the id first_of_one.
Thus the configuration of all elements is done. Now the data structure must be saved. This is done by the button Save as. As this is a new data structure that wasn't saved before, the field Title of DS/TO must be given. DS is an abbreviation for „data structure“ and TO for „template object“. We choose several_columns1 as DS/TO title. As Template Type we select Page Template. In Store in PID we take the page name Storage Folder. This can be saved by the button Create TO and DS. Thus the section on TemplaVoilà data structure is done.
Now the TypoScript template has to be constructed. To do this, we select the module Template (modul group Web). In the middle column, we choose the page several_column. In the form on the right column, we click Create template for a new site. A new form with sever pencil symbols arises. Choose the pencil beneath Setup. A new template is created and shown in an editor. It already contains a content with Hello, World. We delete this content completely and write instead
|
page = PAGE page.typeNum = 0 page.stylesheet = fileadmin/css/several_columns.css page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page |
page is an arbitrary variable name, we could have chosen something else, e.g. site. But the naming page is standard, so we prefer to keep it. The parameter typeNum is set to 0 for the normal output. stylesheet refers to the file name of our CSS file. The last two rows determine the usage of TemplaVoilà.
We also insert into the template the elements of the TemplaVoilà data structure that are equal for all pages, i.e. lib.head and lib.menu_left. We do not have an image file for the logo in lib.head, such that we generate a graphics of our own using GIFBUILDER; we use just two boxes of different heights with different colors.
|
lib { head = IMAGE head { file = GIFBUILDER file { XY = 800,125 10 = BOX 10 { dimensions = 0,0,800,80 color = #CF9140 } 20 = BOX 20 { dimensions = 0,80,800,45 color = #FFC172 } } } menu_left = HMENU menu_left { 1 = TMENU 1 { expAll = 1 wrap = <ul>|</ul> NO.wrapItemAndSub = <li>|</li> CUR < .NO CUR = 1 CUR.doNotLinkIt = 1 } } } |
We also build a menu by defining to use a list for the page names. Moreover the current page is defined as not being linked (by CUR.doNotLinkIt), so it cannot be pushed.
The complete code of the TypoScript templates is available in the example file ts/typoscript-template.tmpl.
Next we must tell the system, which TemplaVoilà data structure should be applied, even though we just have one such structure. This information can be inhereted to subpages; but as we will use different column numbers different data structures will be used later on, such that the different data structure information must be provided to almost any page.
We select the page Home in the module Page (module group Web), and push the corresponding pencil symbol in the right column. Thereby a form opens, in which we look for the field Page Template structure. By the corresponding button, we can open a menu of available TemplaVoilà data structures, so far only several_columns1 exists.
We choose this in order to activate it. A dialogue arises which we accept by pushing ok. A new field emerged, Use Template Design. Possibly an element has been automatically assigned to this field, otherwise we must select a suitable element from the corresponding menu. Its name might be several_columns1 [Template]. Save these informations by the floppy button.
When we now push the Home page button within the module Page we see that its layout has changed. A new field First of one is added. That's the content element created within the TemplaVoilà data structure.
To add the content for this page, push the button Create new element below the field. Then choose Regular text element. To avoid providing our own text, we use the extension Lorem Ipsum that we already installed in a former chapter. We see that in the form there exist two buttons named Lipsum, one at the Header and the other at Text. We push both of these buttons. This creates a one-liner for the title and a paragraph of text. The language sounds a bit like latin, but it is an arbitrary text, different from any existing language.
We save this again (button with floppy).
In order to have the content really displayed, the extension CSS Styled Content must first be activated in our TypoScript template. This extension is already installed automatically.
To activate it, we open the page several_columns in the module Template (modul group Web). We push the button Click here to edit whole template record below the pencil symbols. Thereby a form on the template we generated for this page opens.
We look for the folder Include static (from extensions):. Therein we click in the list Items: the element CSS Styled Content (css_styled_content). Thereby this element is inserted in the left list Selected:. By this action the data structure in this extension is activated.
Now we can save by pushing the floppy symbol at the upper or lower end of the form.
Now we are in a position that we can have a look at the first result of our self generated TYPO3 website. Therefore we open the module Page, push the button left to the page name several_columns and select View. In the browser, a new window or tab arises, where the output of our wesite is displayed.
It would also be possible to call this directly in the browser using the URL http://typo3/several_columns/.
Both presentations are called the frontend. The editing of the pages, however, is done in the backend.
Of course, the navigation menu is far from complete because we generated only one content page, called Home. But the menu works.
It is easy to generate further pages after the basic data structures and templates are done. We now create a new page that will contain a subpage as well. To create a new page, we go again to the module Page and push the symbol beneath the page name Home. We choose New and Page (after). In the arising form, we provide the page title, One Column. Please take care that Hide page: ist not activated.
Moreover the page template structure must be configured. Again we select our only data structure several_columns1 in the field Page Template Structure:. In the arising field Use Template Design: we choose the element several_columns1 [Template].
As we now want to add a subpage to this page we also insert the element several_columns1 to the field Subpages - Page Template Structure:. The form is now rebuilt. The arising field Subpages - Use Template Design: might be set automatically. If not we add again several_columns1 [Template]. We save the form with the floppy button as already done.
We now create the subpage. In the module Page, we again choose New in the symbol beneath the page name One Column, but this time we use Page (in). That generates a subpage for this page. Again we deactivate Hide page and choose Subpage as page title. We do not need to provide the template structure because we applied this for all subpages in One Column. Again we save with the floppy button.
Finally we just have to provide some content for the two new pages. In the module Page, we select the pate One Column. On the right column, there is a field One of one. There the button Create new element is pushed. As with the Home page, we push the button Lipsum for creating a header and some text. Save again by the floppy button.
We do the same for the page Subpage.
When we now review the frontend (module Page, symbol show at Home) we see that the navigation menu increased by the new pages. All pages within the navigation menu can now be selcted by pushing.
The content is enlarged by two, three, four, and five columns. For each of these numbers, a new HTML draft must be created. From these, new TemplaVoilà data structures will be created and the TypoScript template has to be made suitable for each. The CSS file can be enlarged for all columns at once. In the chapter, we create all these things for all columns at once.
We want to divide the content by several columns of the same width. All columns are separated by the same distance.
For example, if we take 2 columns there is only 1 distance, being in the middle of both columns. With 3 columns, we have 2 distances. With n columns, we n-1 distances. The whole width w consists of n columns s and n-1 distances a.
|
w = n * s + (n – 1) * a |
From this formula, we can calculate the width of 1 column s.
|
s = (w – (n – 1) * a) / n |
The width has the unit pixels. We choose just integers to represent it. So we are forced to round the calculated values for s. This rounding lost is not too big; for each column, the distance might be enlarged by at most 1 pixel.
For example, if the whole width w is 600 pixels and the distance a is 10 pixels we get from the formula the following rounded column width s for the different column numbers n,
|
n |
1 |
2 |
3 |
4 |
5 |
|
s |
600 |
295 |
193 |
142 |
112 |
For the division of a page into columns, we use the CSS tool float. With that, we can only use two subwindows at the same time, one used as left column (with float left), the other as right column (with float right). The column division is done by additional div tags that group several column elements pairwise.
Till now, we used the HTML draft for content with one column. There the navigation menu was built as left column and the content as right column. We want to keep this scheme and just split the content further. This division is handled by additional embedded div tags.
In this process, there arise two different kinds of div tags. The div tags for the float handling contain only the properties float and width, while the div tags for the content columns carry all other configuration properties. The division occurs by using different float with the div tags. Only when this approach has been finished completely the div tags for the content columns will be integrated as subtags into all div tags with float handling.
With 2 content columns, we split the div tag for the content into 2 further div tags for the float handling, one div is inserted for each content column.
3 content columns are divieded into 2 + 1, i.e. a pair of div tags (with 2 subtags) and a single div. Into each of these 3 div tags, one div for the content column is embedded.
For 4 content columns, we need two pairs of div tags.
5 content columns are divided into 4 + 1, i.e. one div tag for 4 subelements and a single div tag. Next the 4 are further divided into 2 pairs of v tags.
From that, there results the following general algorithm. We start with n as the number of columns, w as the complete width in pixels, and a as the distance between the content columns. The width s of a single columns calculates by the formula s = (w – (n – 1) * a)) / n from the former chapter. With these prerequisites, the algoritm consists of the following conditions.
If n == 1, add 1 singular div tag with width s and float right, therein insert the div tag for the content column. Terminate the algorithm.
If n == 2, add 2 div tags of the width s with float left and float right; within each of these insert 1 div for 1 content column. Terminate the algorithm.
If n > 2 and odd, generate 1 div tag for n := n – 1 (even) with w := w – a – s and float left; run the algorithm for these values; moreover run the algorithm for n := 1.
If n > 2 and even, generate 2 div tags of the width w := (w – a) / 2 (rounded) with float left and float right and run the algorithm on both values for n := n / 2 (rounded).
We will control all div tags with class; only the div tags for the content columns are supplied with additional id, because they handled by TemplaVoilà as elements of the data structure.
We now examine the algorithm for examples of column number 1 to 5. We assume a whole width w of 600 pixels and a column distance a of 10 pixels, such that we can rely on the calculations with the formula of the previous section.
At the example with one column, the column number n is 1, such that we are at point (1) in the algorithm. So we generate a single div using the whole width (i.e. column width s equals the whole width w according to the formula).
At the example with two columns. the column number n is 2 and the width of a single column s is 295 pixels according to the table of the previous section 3.1. In the algorithm, we come to point (2). So we generate two div tags with the width s. We call them by the class parameter left_one_of_two and right_one_of_two, because each one contains only one column. In each one, we generate a div tag with the content column. By id, we give them the names first_of_two and second_of_two.
At the example with three columns, the column number n is 3 and the column width s is 193 pixels according to the table in section 3.1. In the algorithm, we are located at point (3), because 3 is odd. So we generate a div for n = 3 – 1 = 2 and w = 600 – 193 – 10 = 393 pixels and call it class left_two_of_three, because it contains two columns and float left is executed. Moreover the algorithm is carried on with n = 2 and is also called for n = 1. By this concept, further div tags are created, to which we give the class parameters left_one_of_three and right_one_of_three at n = 2 and right_one_of_three at n = 2, because each one contains only one column. In each of these div tags, we generate a content column using the id parameters first_of_three, second_of_three, and third_of_three.
With 4 columns, the column number n equals 4 and the column width s is 142 pixels according to the table of section 3.1. As 4 is an even number we are at point (4) in the algorithm. So we generate two div tags of the width w = (600 – 10) / 2 = 295 pixels that are called class left_two_of_four and right_two_of_four. In all of these arising div tags, add the content columns with the id names first_of_four, second_of_four, third_of_four, and fourth_of_four.
In the example with five columns, the column number n equals 5 and the column width s is 112 pixels according the table in 3.1. As 5 is an odd number we are at point (3) within the algorithm. So we call the algorithm for 5 – 1 = 4 with float left (left_four_of_five) and w = 600 – 10 – 112 = 478 pixels and for 1 with float right (right_one_of_five). With the even number n being 4, we come to algorithm point (4). There two further div tags are generated with w = (478 – 10) / 2 = 234 pixels(left_two_of_five and right_two_of_five). In both, n now equals 2, such that point (2) is now executed with w = (234 – 10) / 2 = 112 pixels. By this process, 5 div tags were created; in these, we build the content columns with the id names first_of_five, second_of_five, third_of_five, fourth_of_five, and fifth_of_five.
We now create the HTML files that count as draft for 2, 3, 4, and 5 content columns. 1 column was already handled in the previous chapters. With few effort, we enlarge the 1 column file fileadmin/templates/several_columns1.html to the requirements for the higher column numbers. Again we will store the new HTML files in the order fileadmin/templates/ using the names several_columns2.html, several_columns3.html, several_columns4.html, and several_columns5.html.
In each case, the following line of several_columns1.html is deleted and replaced by a new content:
|
<div id="first_of_one" class="content_one">[FIRST_OF_ONE]</div> |
The file several_columns2.html replaces this line by the following content:
|
<div class="left_one_of_two"> <div id="first_of_two" class="content_two">[FIRST_OF_TWO]</div> </div> <div class="right_one_of_two"> <div id="second_of_two" class="content_two">[SECOND_OF_TWO]</div> </div> |
In [SECOND_OF_TWO], we use both id and class; id is applied by TemplaVoilà while CSS uses class for structuring.
The file several_columns3.html replaces this line by the following content:
|
<div class="left_two_of_three"> <div class="left_one_of_three"> <div id="first_of_three" class="content_three">[FIRST_OF_THREE]</div> </div> <div class="right_one_of_three"> <div id="second_of_three" class="content_three">[SECOND_OF_THREE]</div> </div> </div> <div class="right_one_of_three"> <div id="third_of_three" class="content_three">[THIRD_OF_THREE]</div> </div> |
The file several_columns4.html replaces this line by the following content:
|
<div class="left_two_of_four"> <div class="left_one_of_four"> <div id="first_of_four" class="content_four">[FIRST_OF_FOUR]</div> </div> <div class="right_one_of_four"> <div id="second_of_four" class="content_four">[SECOND_OF_FOUR]</div> </div> </div> <div class="right_two_of_four"> <div class="left_one_of_four"> <div id="third_of_four" class="content_four">[THIRD_OF_FOUR]</div> </div> <div class="right_one_of_four"> <div id="fourth_of_four" class="content_four">[FOURTH_OF_FOUR]</div> </div> </div> |
The file several_columns5.html replaces this line by the following content:
|
<div class="left_four_of_five"> <div class="left_two_of_five"> <div class="left_one_of_five"> <div id="first_of_five" class="content_five">[FIRST_OF_FIVE]</div> </div> <div class="right_one_of_five"> <div id="second_of_five" class="content_five">[SECOND_OF_FIVE]</div> </div> </div> <div class="right_two_of_five"> <div class="left_one_of_five"> <div id="third_of_five" class="content_five">[THIRD_OF_FIVE]</div> </div> <div class="right_one_of_five"> <div id="fourth_of_five" class="content_five">[FOUTH_OF_FIVE]</div> </div> </div> </div> <div class="right_one_of_five"> <div id="fifth_of_five" class="content_five">[FIFTH_OF_FIVE]</div> </div> |
The presented code is completely contained in the example files templates/several_columns2.html, templates/several_columns3.html, templates/several_columns4.html, and templates/several_columns5.html.
The following content with the complete code for 2, 3, 4, and 5 columns is appended at the end of the CSS file ../css/several_columns.css:
|
.left_one_of_two { float: left; width: 295px; }
.right_one_of_two { float: right; width: 295px; }
.content_two { border: blue 1px solid; background-color: #fcf; font-size: 90%; }
.content_two h1 { font-size: 200%; }
.left_two_of_three { float: left; width: 397px; }
.left_one_of_three { float: left; width: 193px; }
.right_one_of_three { float: right; width: 193px; }
.content_three { border: blue 1px solid; background-color: #cff; font-size: 80%; }
.content_three h1 { font-size: 200%; }
.left_two_of_four { float: left; width: 295px; }
.right_two_of_four { float: right; width: 295px; }
.left_one_of_four { float: left; width: 142px; }
.right_one_of_four { float: right; width: 142px; }
.content_four { border: blue 1px solid; background-color: #ccc; font-size: 70%; }
.content_four h1 { font-size: 200%; }
.left_four_of_five { float: left; width: 478px; }
.left_two_of_five { float: left; width: 234px; }
.right_two_of_five { float: right; width: 234px; }
.left_one_of_five { float: left; width: 112px; }
.right_one_of_five { float: right; width: 112px; }
.content_five { border: blue 1px solid; background-color: #ccf; font-size: 60%; }
.content_five h1 { font-size: 200%; } |
It should be noted that only classes are here configured (starting with a dot „.“). It is not necessary to specify id tags because the HTML code reveals that all calls with id have an additional class parameter.
The h1 calls with font-size: 200% are needed because Microsoft Internet Explorer is not able to carry over the font diminishment to the heading.
The complete CSS code is contained in the example file css/several_columns.css.
Next we have to build a new TemplaVoilà data structure for each of the new HTML files. Analogously to the proceeding in chapter 2.4, we move over the module Filelist to the folder fileadmin/templates. We start with the HTML file several_columns2.html. Again we push the symbol beneath the file name and choose the entry TemplaVoilà in the menu
Again a form for the construction of the data structure arises. To spare some work, we reload the already built data structure several_columns1. To achieve this, we push the button Load. In the arising form we click on the menu button under the text Select a Template Object record to load a Data Structure/Mapping information from:. There you choose the entry Storage Folder/several_columns1 [Template]. Push the button Load Data Structure to overtake this.
You return to the previous form that is now enlarged by the loaded data structure. The elements Root, Head, and Menu Left are checked at the column HTML Path. Thereby they are fully usable. Only the element First of one carries an error because its corresponding entry in the Map is no longer available in the file several_columns2.html. There exist only id and class tags of the form ..._two. Hence we delete the erroneous field First of one by pushing the delete Button DELETE entry in the columns on the right hand side Edit:.
We now create the elements field_one_of_two and field_two_of_two in the same way as we proceeded with several_columns1. In both fields we take as Editing Type: the value Content Element. After that, our data structure is complete. We only need to save it, again by the button Save as. As name in Title of DS/TO, we choose several_columns2. We leave the fields Template Type at Page Template and Store in PID at the file Storage Folder. Finally we push the button Create TO and DS. That saves our data structure under the name several_columns2.
Now we can move to the next HTML file. We apply the same procedure for the files several_columns3.html, several_columns4.html, and several_columns5.html. The amount of work increases with the number of columns. Thereafter we have the complete data structures for 1 to 5 content columns.
As we use only elements that change with each page, and thus did not create any new structures of the kind lib_..., no adaption of the TypoScript templates must be applied.
Next we generate for each column number a page that contains this exact number of columns. In the module Page, we create a new page by choosing New within the menu by the symbol beneath the name One Column; this page is created as Page (after). As Pagetitle we specify Two Columns and choose as Page Template Structure: several_columns2. We acknowledge the question; by that the new field Use Template Design: arises. There we select the suitable entry several_columns2 [Template]. Now we save the form (by the floppy button), whereby the new page is created and structured for two columns.
If we now push on the file name Two Columns we return to the module Page on the clicked page. We noe see that there are two fields available for this page, First of two and Second of two. So the specification of Page Template Structure: payed off.
To add content, we push the button Create new element under First of two. In the arising big selection menu, we choose Regular text element. As with the single column example, we create header and text by the button Lipsum. We save again, for that we can use the floppy button Save and close document, by which we return to the module Page. Next we apply the same for the element Second of two.
This page is now completely configured. We now generate further pages Three Columns, Four Columns, and Five Columns. We assgin to each page the suitable Page Template Structure:, namely several_columns2, several_columns3, several_columns4, and several_columns5. Finally these pages are filled with Lipsum.
Now we can proudly view the result in the frontend. The navigation contains already 7 entries. Every column number presents the columns in a different size and color, just like configured in the CSS.
Next we want to create a new page that has two structures of three columns and two structures with five columns at the same time. For this, a new HTML draft and a new TemplaVoilà data strucure must be constructed. But we get around without changements in the CSS file generated in the chapters 2,2 and 3,4. Moreover the TypoScript template is kept without changing.
As HTML draft we create the file several_columns3_3_5_5.html. The structure for the presentation of 3 columns can be overtaken from several_columns3.html, and for the 5 columns from several_columns5.html. We just add the digits _1 and _2 to the id values, in order to point out to the first and second tasks within the 3 and 5 columns presentation.
The file several_columns3_3_5_5.html looks like the following.
|
<html> <head> <title>several_columns3_3_5_5</title> <link rel="stylesheet" type="text/css" href="../css/several_columns.css"> </head> <body> <div id="project"> <div id="head">[HEAD]</div> <div id="columns"> <div id="column_left"> <div id="menu_left">[MENU_LEFT]</div> </div> <div id="column_right" class="content"> <div class="left_two_of_three"> <div class="left_one_of_three"> <div id="first_of_three_1" class="content_three">[FIRST_OF_THREE_1]</div> </div> <div class="right_one_of_three"> <div id="second_of_three_1" class="content_three">[SECOND_OF_THREE_1]</div> </div> </div> <div class="right_one_of_three"> <div id="third_of_three_1" class="content_three">[THIRD_OF_THREE_1]</div> </div>
<div class="left_two_of_three"> <div class="left_one_of_three"> <div id="first_of_three_2" class="content_three">[FIRST_OF_THREE_2]</div> </div> <div class="right_one_of_three"> <div id="second_of_three_2" class="content_three">[SECOND_OF_THREE_2]</div> </div> </div> <div class="right_one_of_three"> <div id="third_of_three_2" class="content_three">[THIRD_OF_THREE_2]</div> </div> <div class="left_four_of_five"> <div class="left_two_of_five"> <div class="left_one_of_five"> <div id="first_of_five_1" class="content_five">[FIRST_OF_FIVE_1]</div> </div> <div class="right_one_of_five"> <div id="second_of_five_1" class="content_five">[SECOND_OF_FIVE_1]</div> </div> </div> <div class="right_two_of_five"> <div class="left_one_of_five"> <div id="third_of_five_1" class="content_five">[THIRD_OF_FIVE_1]</div> </div> <div class="right_one_of_five"> <div id="fourth_of_five_1" class="content_five">[FOURTH_OF_FIVE_1]</div> </div> </div> </div> <div class="right_one_of_five"> <div id="fifth_of_five_1" class="content_five">[FIFTH_OF_FIVE_1]</div> </div>
<div class="left_four_of_five"> <div class="left_two_of_five"> <div class="left_one_of_five"> <div id="first_of_five_2" class="content_five">[FIRST_OF_FIVE_2]</div> </div> <div class="right_one_of_five"> <div id="second_of_five_2" class="content_five">[SECOND_OF_FIVE_2]</div> </div> </div> <div class="right_two_of_five"> <div class="left_one_of_five"> <div id="third_of_five_2" class="content_five">[THIRD_OF_FIVE_2]</div> </div> <div class="right_one_of_five"> <div id="fourth_of_five_2" class="content_five">[FOURTH_OF_FIVE_2]</div> </div> </div> </div> <div class="right_one_of_five"> <div id="fifth_of_five_2" class="content_five">[FIFTH_OF_FIVE_2]</div> </div> </div> </div> </div> </body> </html> |
You find this code also in the example file templates/several_columns3_3_5_5.html.
From this draft, we again generate a TemplaVoilà data structure according to the same method used with the other HTML drafts. As this draft has a whole of 3 + 3 + 5 + 5 = 16 colums the generation takes more time than with the other drafts. We call the TemplaVoilà data structure several_columns3_3_5_5.
To apply the new data structure we create a new standard page with New after the last page. We call it 3+3+5+5 Columns by Pagetitle. In the configuration of this page, we add the new data structures several_columns3_3_5_5 in Page Template Structure: and several_columns3_3_5_5 [Template] in Use Template Design:.
Thereby all columns are now presented in the module Page and can be filled by example content. We restrict the content to a single sentence in each content element, in order to gain a suitable size of this page. The presentation of this page and the whole project should work with all internet browsers.
If needed you can next enhance the graphical appearance of the many columns. For example, it would make sense to increase the distance of the columns below. For this you need to add some margin-bottom elements to the CSS file. But this is left as an exercise.