CSS Styling Reference
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