This article will help TeamDynamix Administrators, Knowledge Base managers, and Service Catalog managers work with formatted content in TeamDynamix and customize it to their organization’s needs.
Overview
There are several places in TeamDynamix which allow the entry of formatted text, usually via a text editor called CKEditor. This article provides tips and tricks to effectively use formatted content.
All formatted content in the system is also subject to HTML sanitization, which is described here.
Where to Find This
Administrators, Service Catalog managers and Knowledge managers will use formatted content in a variety of places in TDAdmin and TDClient.
Navigate to HTML content following these paths:
- Client Portal login prompts, HTML headers and footers: TDAdmin > Applications > [Client Portal Application] > Settings > Site Settings
- TDNext login prompts: TDAdmin > Organization Settings > Site Settings
- HTML desktop modules: TDAdmin > Desktop Templates > HTML Modules
- Service Catalog Service content: TDClient > Services > New Service or Edit Service
- Service Catalog Service Offering content: TDClient > Services > [Service] > New Service Offering or Edit Service Offering
- Knowledge Base Article content: TDClient > Knowledge Base> New Article or Edit Article
- Question bodies and answers: TDClient > Questions > New Question or Edit Existing Question (or its Answers)
Image Size Restrictions and Resizing
Any images uploaded through the editor will be scaled down (with width as the constraint) if they exceed 900px in width. If you do not want your images to be scaled down, ensure that they are already 900px wide or smaller before uploading. After the image is uploaded, you may attempt to scale up the image for display using HTML width and height attributes and/or inline CSS styles for width and height.
Please note that the content viewing window in the client portal is restricted to 750px. While images at 900px and smaller will not be resized, they will appear to be squished into a 750px window. For best results, ensure that your images are no more than 750px wide with proper aspect ratios for a 750px width. In addition, the CKEditor tool will only allow a maximum image size of ~4MB to be uploaded to the server.
Size restrictions are especially impactful for animated GIFs of any sort. If an animated GIF is resized automatically during upload, the resize process has to resave the image, which in turn removes all animations! Be sure that any animated GIFs you intend to use are 900px wide or smaller (and ideally 750px wide or smaller). This will prevent automatic image resizing and removal of animations.
Removing the Underline from Hyperlinks in Custom Content
As per WCAG 2.0 Guideline 1.4.1, hyperlinks in the client portal are underlined to make it clear to users that a hyperlink is present. If there were a compelling reason to remove this underline, this can be done using a CSS class.
However, note that because hyperlinks are underlined for accessibility purposes, TeamDynamix strongly encourages you to leave the underline styling in your content. 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 the Underline is Applied
The underline is applied to all anchor elements 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:
<a href="https://solutions.teamdynamix.com/TDClient/KB/ArticleDet?ID=12718">Client portal overview</a>
Removing the Underline from Hyperlinks
TeamDynamix has included a unique CSS class that can be applied to hyperlinks to remove this underline – just add the no-underline class to the anchor element. This must be done individually to each link in the content.
To apply the no-underline class:
- Open the editing page for the desired content.
- Click on the Source button in the upper left corner of the editor. Note that not every user has access to see the Source button.
- Locate the anchor element for the link and add the
no-underline class.
<a class="no-underline" href="https://www.teamdynamix.com/">Sample Link</a>
- Click Save
Linking to Other Sections of the Same Page
It is possible to make links which navigate to other sections further down on the same page. This is an especially useful technique for building an article which has a table of contents at the beginning.
These in-page links can be used in knowledge base articles, services, and Questions.
Example HTML Markup for In-Page Links
The following shows how to put a link at the top of a knowledge base article to jump to a Contact Us section in the middle of the article.
The anchor is the clickable starting point link. The markup is:
<a href="#ContactUs">Go to the Contact Us section</a>
The href attribute for the anchor should be in the format #ID-of-DestinationLink. In this case, since the destination link below will have an id and name value of ContactUs, the starting point link should have an href value of #ContactUs.
The destination link is hidden when viewing the page.
You should place markup like the following at the beginning of the Contact Us section in the article or in the area you’d like to end up after clicking the Contact Us link at the top of the page:
<a id="ContactUs" name="ContactUs" style="display: inline-block;"></a>