History

Understanding the CSS framework

This tutorial describes in detail how the built-in CSS framework works. The framework has been completely redone in version 2.3.2, which was released on 2007-05-04, and it is very important that you read this tutorial before upgrading your TYPOlight installation.

Why you should use it

The new framework supports even more browsers and especially liquid layout have been highly improved. The new engine allows you to use any type of unit (not only pixel and percent) and even to combine different measurements. In addition, it includes a lot of important Internet Explorer bug fixes and reduces the CSS code that is added to your page. Here is the CSS code that a static two column layout used before:

 1 #header {
 2   height:232px;
 3   width:880px;
 4   margin:0px auto;
 5   padding:0px;
 6   text-align:left;
 7 }
 8 #container {
 9   width:880px;
10   margin:0px auto;
11   text-align:left;
12 }
13 #left {
14   width:220px;
15   padding:0px;
16   text-align:left;
17   float:left;
18 }
19 #main {
20   width:660px;
21   padding:0px;
22   text-align:left;
23   float:left;
24 }
25 .clear {
26   clear:both;
27   height:0.1px;
28   line-height:0.1px;
29   font-size:0.1px;
30   overflow:hidden;
31 }
32 #footer {
33   height:96px;
34   width:880px;
35   margin:0px auto;
36   padding:0px;
37   text-align:left;
38 }
39 html>body #left {
40   margin-bottom:-1px;
41 }
42 html>body #main {
43   margin-bottom:-1px;
44 }
45 * html body {
46   text-align:center;
47 }
48 *:first-child+html #left {
49   margin-bottom:0px;
50 }
51 *:first-child+html #main {
52   margin-bottom:0px;
53 }

The new framework only adds these few lines to your page:

1 * html body { text-align:center; }
2 #wrapper { width:880px; margin:0 auto; }
3 #header { height:250px; }
4 #left { width:220px; }
5 #main {  margin-left:220px; }
6 #footer { height:96px; }

Expanding the main column

One of the major advantages of the new framework is that the main column (static third column) is always as high as the highest column - even if it is not the highest column itself! Thus, if you add a left and right border to the main column, you can visually separate your columns without having to use a background-image. This works for static layouts as well as for liquid layouts!

Cross-browser support

The new framework has been tested on Firefox 1.0+, Netscape 8+, Internet Explorer 5.5+, Opera 7+ and Safari 1.0+. The new TYPOlight project website already uses it, so please consider it a working example.

Inside the CSS framework

Ok, now let's take a deeper look at the framework.

XHTML structure

Here is a quick overview of the XHTML structure (fe_page.tpl):

 1 <body id="top">
 2 <div id="wrapper">
 3 
 4 <div id="header">
 5   <div class="inside">
 6   <!-- HEADER CONTENT -->
 7   </div>
 8 </div>
 9 
10 <div id="container">
11 
12 <div id="left">
13   <div class="inside">
14   <!-- LEFT COLUMN -->
15   </div>
16 </div>
17 
18 <div id="right">
19   <div class="inside">
20   <!-- RIGHT COLUMN -->
21   </div>
22 </div>
23 
24 <div id="main">
25   <div class="inside">
26   <!-- MAIN COLUMN -->
27   </div>
28   <div id="clear"></div>
29 </div>
30 
31 </div>
32 
33 <div id="footer">
34   <div class="inside">
35   <!-- FOOTER CONTENT -->
36   </div>
37 </div>
38 
39 </div>
40 </body>

As you can see, each column now has an additional wrapper called inside that is required to fix various bugs. You can also use it to apply margin values or borders that do not break the layout anymore.

CSS hacks

Let's take a look at the style sheet (system/typolight.css).

1 /* Layout sections */
2 #left { float:left; }
3 #right { float:right; }
4 #main { width:auto; position:relative; }
5 .inside { position:relative; text-align:left; }

As you can see, the left and right column is floated. The main column, however, remains a static column that is automatically expanded. Additional style definitions inside the head section of each page complete those classes:

1 #left { width:220px; }
2 #right { width:18em; }
3 #main {  margin-left:220px; margin-right:18em; }

Note that the main column has a left and right margin that equals the width of those columns. It is not necessary to assign a width value to the main column anymore.

Static and liquid designs

To transform a liquid design into a static design, you only have to assign a width value to the surrounding container (#wrapper). You do not have to change anything else! Can it get any easier than that?

How to clear floats

Since the main column remains a static column, we cannot use clear:both; more than once at the very end of it. However, we want to use floating elements inside this column as well - just think about adding images to text elements. So we are using another CSS hack to clear floating without using clear:both.

1 .block { overflow:hidden; }

This simple command does exactly what we need. We only have to make sure that all modules and content elements use this class! Therefore, I have modified most of the template files and added this class to the surrounding container.

If you are using custom templates, make sure that you add this class to them as well! In addition, remove all clearing containers (<div class="clear"></div>) from your templates.

Custom layout sections

There have been a few changes to custom layout sections as well. Here is how the XHTML code looks:

 1 <div id="main">
 2   <div class="inside">
 3   <!-- MAIN COLUMN -->
 4   </div>
 5 
 6   <div class="custom">
 7     <div class="section_1"><!-- CUSTOM SECTION 1 --></div>
 8     <div class="section_2"><!-- CUSTOM SECTION 2 --></div>
 9   </div>
10 
11   <div id="clear"></div>
12 </div>

As you can see, custom layout sections are now wrapped in a surrounding container called custom. This container is used to clear floating and to apply a few Internet Explorer bug fixes.

Merging existing page layouts

The new approach of the CSS framework also affects the layout module. It is now even more intuitive and pretty much self-explaining. The downside is that your existing layouts are not compatible anymore.

Layout merger tool

Therefore, you have to run a new tool called layout merger after the next live update!

Layout merger

The layout merger updates your existing layouts to be used with the new framework. Once your layouts are up to date, you can remove the deprecated fields from your tables. It will not be done by the update script this time.

Opening the tool manually

If you are not being redirected by the update script, you can open the layout merger manually. First of all, make sure that you are logged in into the back end (otherwise you will only get a blank page). Then open

http://www.yourdomain.com/typolight/layout.php

and follow the instructions provided.

The new navigation menu

Due to some changes in the accessibility guidelines, it is now possible to nest lists in a more "logical" way. There have been some request in the forum as well (see this thread).

Nesting sub menu items

Here's how the navigation menu looks prior to version 2.3.2:

 1 <ul class="level_1">
 2   <li><a href="xxx">Home</a></li>
 3   <li class="parent trail"><a href="xxx">Portfolio</a></li>
 4   <li class="submenu">
 5     <ul class="level_2">
 6     <li><a href="xxx">Project 1</a></li>
 7     <li class="parent trail"><a href="xxx">Project 2</a></li>
 8     <li class="submenu">
 9       <ul class="level_3">
10       <li class="active"><p class="active">Information</p></li>
11       <li><a href="xxx">Screenshots</a></li>
12       </ul>
13     </li>
14     </ul>
15   </li>
16 </ul>

From version 2.3.2, the navigation menu will be rendered as:

 1 <ul class="level_1">
 2   <li><a href="xxx">Home</a></li>
 3   <li class="submenu trail"><a href="xxx">Portfolio</a>  <!-- no more closing tag here -->
 4     <ul class="level_2">
 5     <li><a href="xxx">Project 1</a></li>
 6     <li class="submenu trail"><a href="xxx">Project 2</a>  <!-- no more closing tag here -->
 7       <ul class="level_3">
 8       <li class="active"><p class="active">Information</p></li>
 9       <li><a href="xxx">Screenshots</a></li>
10       </ul>
11     </li>
12     </ul>
13   </li>
14 </ul>

Advantages of the new menu

One of the major advantages is that the navigation menu is now rendered properly in all browsers and that you can now use scripts like "son of suckerfish" (see this thread).

--- Article created by Leo

layout_merger.jpg - Layout merger (29.9 KB) leo, 08/15/2008 05:35 pm

Also available in: HTML TXT