How to Remove the Underline from Hyperlinks in Custom Content

Overview

As of version 10.0, TeamDynamix took a large step toward WCAG 2.0 AA compliance, which intends to make web content more accessible to people with disabilities. As per WCAG 2.0 Guideline 1.4.1, hyperlinks in the Client Portal are now underlined to make it clear to people who suffer from colorblindness that a hyperlink is present. The unfortunate downside to this is that the addition of this underline styling can have a significant impact on the appearance of your custom content.

This article outlines how the hyperlink underline styling is applied and what you can do to remove it within your custom content. Please note that because hyperlinks are underlined for accessibility purposes, TeamDynamix strongly encourages you to leave the hyperlink underline styling in your content so that the content continues to be accessible to people with colorblindness. If you still want to remove the styling, please be sure to include additional markup beyond color to indicate that the hyperlink is clickable.

How is the Underline Applied?

The underline is applied to all anchor elements (<a>) in the Client Portal that are outside of the header or footer. This includes knowledge base articles, services, questions, and custom HTML desktop modules. This also means that any anchor elements you include in any of the above mentioned items will automatically receive the underline. See the example below for a snippet of code representing an anchor that will be automatically underlined.

How Can I Remove the Underline from Hyperlinks?

TeamDynamix has included a special CSS class that can be applied to hyperlinks to remove this underline. All you need to do is add the no-underline class to the anchor element, and everything else will be taken care of.

To do this, start by going to edit the desired content. You'll then need to click on the Source button in the upper left corner of the editor's toolbar (please note that not every user has access to see the Source button). This will allow you to see the source code for the content, which you can alter to add the no-underline class. At the present time, this is the only way to remove the underline styling from a hyperlink and must be done on a per-link basis.

As an example, the code from the previous section can be modified to remove the underline as follows.