February 27, 2007

Getting Rid of Extra Markup in TYPO3

By: Ron Hall

Cat: TYP03, TypoScript

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>
</div>
<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>
</div>
<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.

 

Comments

Where specifically did you find these typoscript setup settings? Might I request [1] footnoting [2] your post with where you found the info... It would be very helpful to all [3].

Thanks! Andrew

[1] respectfully
[2] like this! TSREF (section title) page 123... etc.;
[3] OK, just me, but didnt I ask nicely?
Andrew Davis, 02/28/07
 
Found all of these by digging around. The line for taking out the "bodytext" class on paragraphs was originally found in the "Mastering Typoscript" book I referenced a couple of posts ago. It was on page 76.

By the way, if you buy that book, buy it in combination with the ebook. That way you can search it. I wish I had done that.

Anyway, learning about taking care of the "bodytext" class got me to poking around the TypoScript Object Browser and figuring out the code for getting rid of the divs and "csc-firstHeader" class. That was pure experimentation.

Finally, on the code for the anchors. I eventually found that on the mailing list entry I mentioned in the post.
Ron Hall, 02/28/07
 
I just purchased the .pdf...
Andrew Davis, 03/22/07
 
Very usefull, thank you!

Is it possible to remove all default extension classes?
for example: |

cheers,
Bas van der Togt, 05/14/07
 
I believe that for most extensions you would need to edit the extension's template file to change or eliminate the extension classes.

These are often found in the "pi" directory of the extension. Usually with a file extension of ".tmpl" This would be the case with guestbook and tt_news.

If there is no template file for a particular extension, you might look at the Typoscript Object Browser. You can find it by clicking on your template module, then click on your page containing your typoscript template and select "Typoscript Object Browser" from the pop-up on the right. Browse through the settings for your extension and see if there is anything there.

Hope this helps.
Ron Hall, 05/15/07
 
Sorry, comments are closed for this post.