The following are a list of classes and IDs used in the platform's web pages that serve as a CSS reference for customizing the display. You will use these classes and IDs when providing your custom CSS in the Override CSS or Custom CSS settings.

Note: In some cases you may have to add !important to the end of the CSS style, to override any defaults.

Article Content CSS

Main article content area

Article Title

.mainHead

This contains:

• article title heading (uses h1)
• edit icon
• actions menu icon
• text to speech button
• horizontal bottom border

Article Body

.mainText

Body content styling should be specified within this class, such as:

• section headings (uses h2)
• paragraph text formatting
• blockquotes
• lists
• links

Table of Contents

.swTOC

Will appear when an article has sub-articles but no text content itself. 

Checklists

.taskLink

Checklist task links

.clTaskform

Completed checklist task form results text

Footnotes

.footerpopup

Class specific to footnote link appearance

Navigator CSS

Left column navigation

Navigator Column

.sideNav

Container for the entire navigator.

Search Box

.searchInput

Search input field area.

List of Article Links

.dynNav

Container of listed articles.

Individual Articles

.navItem

Individual listed article links.

Article Alerts

.navAlert

Listed articles highlighted with user assignments or tasks.

Selected Article

.navSelected

Current article selected and viewing.

Articles with Sub-Articles

.hasChildren

Listed articles marked with sub-articles 

Expanded Articles with Sub-Articles

.navExpanded

Expanded listed articles with sub-articles, displaying listed sub-articles one level below it.

Secondary Navigator CSS

Articles with more than two headings (<h2>) and browser window width is ≥ (100vw - 320px) will display the secondary navigator box to the upper right of the main content.

The secondary navigator is effectively a list of anchor links of each article heading.

Secondary Navigator Box

#floatingHeaderNav

Container ID of secondary navigator

Article Top Link

.topLink

Article title which serves as an anchor link back to the top

Current Visible Heading

.headerVisible

Indicates current top most visible heading in the article on the secondary navigator list

Webchat CSS

Outer Webchat box

.chat-box

Define outer webchat box drop shadow styling, such as:

• box shadow
  • color
  • offset
• border radius (of box-shadow)

Open Webchat

.open

Define webchat box top bar styling, such as:

• background color
• top border radius
• font
  • size
  • color

Webchat Conversation

.chbox

Defines inner webchat box contents

Body Title

.fbox

Description text above #body user input text box

Inquiry Message

#body

ID of initial inquiry <textarea> user input text box.

Note: this is replaced by ID #replybox after a ticket is initialized

Reply Message

#replybox

ID of <textarea> user input replies to ticket conversation

Webchat Note

.convNote

Note message box above webchat conversation

Inquiry Message

.convOrig

Original user inquiry message box which started the webchat ticket.

Chat messages

.chatEntryStaff

All subsequent message box replies between user and staff after the initial inquiry.

Message Usernames

.userid

Usernames in message boxes (aside from original user inquiry message)

Ticket Link

.tickLink

Link to view inquiry ticket, located below #replybox

Alert & Info boxes

These are system message boxes which appear above the article heading.

Alert box

.alert

User actionable items and active assignments such as:

• approvals
• acknowledgements
• checklist progress
• task assignments

Info

.infopop

Info box which may specify:

• awaiting other users approval
• confirmation of action made