Custom css class for each typo3 page and menu item

Sometimes you want to target a html element only on a single page and need a unique class for that page. A simple solution is to overwrite the bodytag and add the uid of the current page

# clear body Tag
page.bodyTag >

# set new bodytag with uid in the class-name
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = uid
page.bodyTagCObject.wrap = <body id="page-|">

If you want to style a single menu item in a special way, then you might need a unique class for that item as well. = HMENU{
  1 = TMENU
  1.wrap = <ul>|</ul>
  1.NO {
    allWrap = <li id="menu-item-{field:uid}">|
    wrapItemAndSub = |</li>

Of course you can use other fields of the page like the title or the subtile for your css class.

comments powered by Disqus