RSS 2.0
RSS 0.91
ATOM 0.3
February 28, 2007

Getting Rid of Extra Markup in TYPO3

Category: Ron Hall

By: Ron Hall

How to modify or eliminate extra CSS and HTML markup in TYPO3

In trying to make TYPO3 as flexible as possible, developers have included plenty of handles for styling a page in the HTML code output by TYPO3.

For example, if you put two content elements on a TYPO3 page, by default the source code looks like this:

<a id="c98"></a>
<div class="csc-header csc-header-n1">
    <h3 class="csc-firstHeader">This is the First Header</h3>
<p class="bodytext">This is the first paragraph</p>
<a id="c99"></a>
<div class="csc-header csc-header-n2">
    <h3>This is the Second Header</h3>
<p class="bodytext">This is the second paragraph.</p>

This is all fine and dandy, but maybe you don't need all of these classes and anchors. Fortunately, TYPO3 core team has accomodated for that as well. Try this code in your TypoScript template:

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.stdheader.stdWrap.dataWrap >
lib.stdheader.3.headerClass >
tt_content.stdWrap.dataWrap >

The resulting HTML code for the same content elements will now look like this.

<h3>This is the First Header</h3>
<p>This is the first paragraph</p>
<h3>This is the Second Header</h3>
<p>This is the second paragraph.</p>

Basically, you have eliminated the anchors, the div tags and the class styles. Of course, you can also use this code to simply modify the code instead of eliminating it. For instance,

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class = my-style

will change

<p class="bodytext">This is the first paragraph</p>

to this:

<p class="my-style">This is the first paragraph</p>

However, note that using

tt_content.stdWrap.dataWrap > 

to eliminate the anchor tag can be a problem if you are generating a sitemap. See this post on the TYPO3 mailing list.

Finally, thanks to Jeff Segars of WEC for putting me on the trail of the code to eliminate the anchors.


comment #1
Gravatar: Patrick Gaumond Patrick Gaumond February 28, 2007 14:58
There was a great thread on HTML cleaning in January on the english list. If you need more precise fine tuning, it could help.


comment #2
Gravatar: Fabian Fabian February 28, 2007 18:56
Thanks, this is handy info.

comment #3
Gravatar: Josh Josh March 10, 2007 20:25
Wow! That's great info....I have struggled with this in the past trying to style all those “not so friendly” looking markup. This is a great help.

Sorry, comments are closed for this post.