Typo3: Different CSS styles for internal and external links
It's often considered convenient to decorate external links in order to indicate the distinction between links that go to a page on the same site and links that leave the site. On one of my sites I use CSS to set a background bitmap for all links. Until today the bitmap was the same for internal as for external links. I used a little hack in order to set the class attribute of internal links to some value while leaving external links untouched.
Add the following line to the constants field of your root template:
styles.content.links.target = _self" class="int-link
This looks a bit strange at first. How does it work? When it finds links in content objects, Typo3 generates a <A> tag. The target attribute of this tag is set to whatever the value of styles.content.links.target is. Also, double quotes are added before and after this value. In our case the inserted value is _self" class="int-link. With quotes this becomes "_self" class="int-link". The complete A-tag that is sent to the browser is:
<A target="_self" class="int-link">Due to our little hack, the class attribute piggy-packs on the target attribute. For Typo3 it's still only one target attribute whereas to the browser it appears as two separate tags because of the space between them. The core of the hack is this: With target attributes, Typo3 distinguishes between internal and external links. There is two constants, styles.content.links.target for internal links and styles.content.links.extTarget for external ones. Because we didn't do anything to styles.content.links.extTarget, external links will not have a class attribute.
Use the int-link class in your CSS style sheets to give internal links a different visual appearence. For example,
#content A { color:red }
#content A.int-link { color:green }