RSS 2.0
RSS 0.91
ATOM 0.3
October 4, 2007

Producing HTML / CSS for TYPO3 templates

Category: Zachary Davis

By: Zach Davis

We often get clients who want to deliver HTML/CSS templates to us, which we then implement in TYPO3. I'm pretty sure this sort of workflow is common among TYPO3 developers, as it's been reflected in the documentation as far back as Modern Template Building, which does a good job explaining how TYPO3 can separate the HTML/CSS production from the typoscript implementation of the templates. Nonetheless, we often find that if the person putting together the HTML and the styleesheets were more familiar with the CSS classes that are output by core TYPO3 content elements, they could deliver templates that were more complete and easier (read: less expensive) to bring into TYPO3.

To address this problem, Gabe Blair, an employee at Cast Iron Coding, recently wrote up a set of guidelines for our clients and staff producing HTML templates. I'm cross-posting it here with the hope that it can reach a wider audience and, perhaps, prove helpful to someone. Please let me know if you can think of anything that could be added to this, or if you see any mistakes!

Gabe's article is as follows (It's still a work in progress, so please forgive any errors on our part):

Here are some guidelines and best practices for developing HTML/CSS site templates for use in a Cast Iron Coding TYPO3 environment.  At the end of the this document, I'll provide a basic slug of empty CSS so you can easily style some of the basic default content elements used by TYPO3.



It should go without saying that separating presentation from structure as much as possible is good practice for any web development project.  There specific items that can be especially useful for developers implementing a TYPO3 site, such as: 

  • Keeping markup as static as possible, implementing presentational variation using styles.
  • Using classes on the <body> tag to implement presentational variation/branching

Static Content

"Static content" means the areas of a site where content will be static, for example a company logo at the top of every page, or a header that doesn’t change, copyright notices at the bottom, etc.  No special considerations need to be made for the static parts of a template when using TYPO3.

Dynamic Content

"Dynamic content" means the sections of the HTML where the CMS will insert content.  The container element for each dynamic content section should have an id attribute.

General TYPO3 Content Types

TYPO3 has a handful of classes and conventions it uses when creating various content types available to the CMS user by default.  While these conventions may be somewhat outdated and inconsistent - having been developed by many people over a long period of time in the early stages of TYPO3 development - and don’t always adhere to the naming guidelines outlined above, they remain part of the functionality of the TYPO3 core.  Using the standard class names and structures when possible allows for speedy and smooth implementation.  This section describes a number of the more common conventions used by TYPO3.  Some of these may not be useful and can of course be ignored.  When developing a template for a TYPO3 site, the minimum markup needed to be styled can be taken from our Content Elements Demo page.

Body Text

TYPO3 outputs paragraph tags with a specific class on them, in case it’s useful: .bodytext.


It’s a good idea to declare styles for all header tags (h1-h6), because it is possible for the CMS to output all of these.  If less than six variations of header are needed in the design, make the remaining tags identical to the last variation.  Typo3 will output the first header in a dynamic content area with a special class, whether it’s h1 or h6 or anything in between.  Using this class, specific control is afforded over the presentation of the first header in each dynamic content area: .csc-firstheader.

Text with image

There are a handful of classes used by TYPO3 to allow for user control of some presentational aspects of a section of text with an accompanying image.  There are examples of two variations of this on our Content Elements Demo page. 
These are wrapped with div tags having a basic class of .csc-textpic.  An additional two class are added at this level to specify the position of the image in relation to the text: .csc-textpic-[x], and .csc-textpic-[y], where [x] can be one of left, center, or right, and [y] can be one of above or below.  The image itself is wrapped in a div with class .csc-textpic-imagewrap.


Generic unordered lists are output by default with the class .csc-bulletlist.  To style variations of lists, use .csc-bulletlist-0, .csc-bulletlist-1, .csc-bulletlist-2, and .csc-bulletlist-3.  The TYPO3 CMS user has the choice of creating a list with one of these four classes added to it.


Tables are also configurable by the TYPO3 user to have various classes on them.  The basic class on table tags is .contenttable.  As with lists, tables have four variations that can be added: .contenttable-0, .contenttable-1, .contenttable-2, and .contenttable-3.  Table row tags also have enumerated classes added to them: .tr-0, .tr-1, etc.  The last table row will have the class .tr-last on it.  In addition, table rows have the following alternating classes on them: .tr-even, .tr-odd.  Table cells have similar classes: .td-0, td-1, …  A class of .td-last is added to the last cell in a row, regardless of how many columns are in the table.

Variation on Tables: Filelinks

"Filelinks" is the name of a type of content element available in TYPO3 to display a tabular list of files with thumbnail images.  This is basically a variation on the .contenttable structure discussed above, though "file links" tables have no more than three columns.  The table tag has the class .csc-uploads.  Table rows have the same .tr-even and .tr-odd classes on them, but do not have enumerated classes in addition.  The three columns of cells (td tags) have the following classes: .csc-uploads-icon, .csc-uploads-fileName, and .csc-uploads-fileSize.



comment #1
Gravatar: Henjo Hoeksma Henjo Hoeksma October 5, 2007 08:32
This is handy for people who do not work with Typo3 themselves - but do build the CSS / HTML.
Posting this here makes it easy to point out to. Thank you!

comment #2
Gravatar: Zach Zach October 6, 2007 18:38
You bet, Henjo! Happy to help.

I just realized that we promised to provide a set of empty CSS declarations that can be a good starting point, but forgot to do so. I'll update this later today with a link to the CSS.

comment #3
Gravatar: Sebastian Fischer Sebastian Fischer October 10, 2007 09:13
As we do most of the templates on ourown we normaly have complete control of this step, but most times we miss some contentelements and have to reedit the style over and over again. With the demopage in mind, this step could be shortcutted in future.


comment #4
Gravatar: bernd bernd October 10, 2007 10:20


veröffentlichter Link:
ist nicht w3c valide.


comment #5
Gravatar: gterez gterez October 12, 2007 16:41
bernd: the content elements demo page is actually an XHTML 1.0 Transitional document with the wrong headers... if you use the correct headers there's only one small attribute error (), but that's in the textarea element that's only meant to be used by you for getting the code, it's not in the code produced by typo3 elements ;-)

Sorry, comments are closed for this post.