Question

My typo3 websites has a menu with the follwing typoscript definition:

lib.footernav = HMENU
lib.footernav.special = directory
lib.footernav.special.value = 38
lib.footernav.entryLevel = 0
lib.footernav.1 = TMENU
lib.footernav.1.NO {
  ATagParams = class = "footer-link"
}

The menue works just fine. What I want to do is, change the link text into an image, like this:

<a class="footer-link" href="index.php?id=43&L=1">Facebook</a>

to

<a class="footer-link" href="index.php?id=43&L=1"><img src="facebook.gif"/></a>

How can I do that?

If it helps I could also create a new menu for this facebook link.

Answer 1

Another solution is to define a custom class for each link, then change the background image only for according links. This way you can fully control the menu’s appearance by css:

lib.footernav.1.NO {
  ATagParams = class="footer-link {field:title}"
  ATagParams.insertData = 1
}

Results in following html:

<a class="footer-link Facebook" href="index.php?id=43&L=1">Facebook</a>

css:

.Facebook {
  background: transparent url(facebook.gif) no-repeat;
  text-indent:9999px;
}

EDIT: I recommend the above solution, because it’s a quick and fairly clean setup to address a single menu item. However, if you like a clean example from the typoscript textbook:

lib.footernav = COA
lib.footernav.10 = HMENU
lib.footernav.10 {
    special = directory
    special.value = 38
    excludeUidList  = 99
    1 = TMENU
    1.NO {
      ATagParams = class = "footer-link"
    }
}

lib.footernav.20 = TEXT
lib.footernav.20  {
    field = title
    typolink.parameter = 99
    typolink.ATagParams = class = "footer-link"
    }

Assuming that your facebook menu item is page ID 99