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.

Using css_styled_content

We already saw that we can write the definitions for the different content elements of TYPO3, ourselves. But css_styled_content relieves us of having to write them ourselves; it comes with more than 2000 lines of TypoScript code containing definitions for each type of content element.

It is rewarding - even if it doesn't seem to make sense in the beginning - to have a good look at TypoScript. In TYPO3, we have to be at the page, which has the TypoScript template with the TypoScript code in the Setup field. Then, in the module "Template", we choose "Template Analyzer" from the selector box on top of the window.

A list with active and integrated TypoScript templates appears. These are evaluated by TYPO3 from top to bottom, and joined together into one configuration array.

With a click on "EXT:css_styled_content/static/", the contents of that template will be displayed. First, the constants will appear, and then the setup TypoScript.

The extension css_styled_content will add HTML elements with many classes to the rendering of a page. They are used by TYPO3 to display things in a structured way, e.g. images at their selected position like next to text, the link to top, etc. This also has the advantage that it is not necessary to enter different classes by hand, if you want to modify the styling. It suffices to find out which HTML element has which class, and to add CSS styles for that class.

<div class="csc-textpic-imagewrap">...

The descriptions of the classes are simple and - once you got familiar with the TYPO3 internals - intuitive. All classes start with "csc"; this stands for "css_styled_content". In the example, this is followed by "textpic", which stands for the TypoScript element "textpic" (which is used to render content elements of the type "text & images"). "imagewrap" suggests that the DIV container wraps around an image.

What is happening in detail can be understood by making an empty page with only one element, and then checking out the generated source code of that page.

For example, headlines are normally enumerated so that the first headline can be handled specifically. For HTML tables, the classes "odd" and "even" are inserted so that it is easy to color table rows differently. In the same manner, the table columns can be handled individually.

For HTML purists, it means that many CSS classes will be inserted, which possibly are not needed for a certain site at all. One could get rid of those by overwriting the unneeded definitions of the css_styled_content extension. However, for beginners that is not recommended.