CSS Classes

The following details all of the CSS classes you can override in a custom stylesheet to further control the look and feel of the help center.

.gladlyHC

The root element of the Help Center. All the content of the Help Center will be wrapped by this element. By default it has a max width of 80vw.

All elements within gladlyHC have been given box-sizing: border-box

<div class="gladlyHC">

Answer Detail

The Answer Detail section comprises the view of a specific answer in the Help Center. When a user clicks on a search result or an answer in a FAQ section, they navigate to this view.

.gladlyHC-answerDetail

The wrapper element for the Answer Detail view.

<div class="gladlyHC-answerDetail">

.gladlyHC-answerDetail-content

The output of the answer detail.

 <div class="gladlyHC-answerDetail-content">{answer body}</div>

.gladlyHC-answerDetail-name

The name of the answer. Rendered as an H2 tag.

 <h2 class="gladlyHC-answerDetail-name">Return Policy</h2>

Answers Index

The Answers Index page comprises of the view of all public answers. When a user clicks on the See more results link, they navigate to this view.

.gladlyHC-answersIndex-container

The main wrapper element encompassing all Answers Index components.

<div class="gladlyHC-answersIndex-container">

.gladlyHC-answersIndex-item

The individual answer in the list.

<li class="gladlyHC-answersIndex-item">

.gladlyHC-answersIndex-list

The full list of answers.

<ul class="gladlyHC-answersIndex-list">

.gladlyHC-answersIndex-section

Outermost element surrounding the list of answers on the Answers Index page.

<div class="gladlyHC-answersIndex-section">

FAQ

The FAQ section contains the categories and answers defined in configuration as sections.

.gladlyHC-faq

A div that wraps all the content of the FAQ section.

 <div class="gladlyHC-faq">

.gladlyHC-faqHeading

The heading at the top of the FAQ section. By default the heading is "Frequently Asked Questions". The heading is rendered as an H2 tag.

<h2 class="gladlyHC-faqHeading">Frequently Asked Questions</h2>

.gladlyHC-faqSections

Wraps all of the sections of the FAQ. This is where columns are also applied using column modifiers (see the modifiers section below).

<div class="gladlyHC-faqSections gladlyHC-faqSections-col2">
Modifiers:
  • .gladlyHC-faqSections-col2
    Applied when 2 column layout is configured
  • .gladlyHC-faqSections-col3
    Applied when 3 column layout is configured

.gladlyHC-faqSection-header

H3 header element that contains the title of the FAQ Section.

<h3 className="gladlyHC-faqSection-header">{header}</h3>

.gladlyHC-faqSection-list

UL containing all answers defined as a part of a specific FAQ section.

<ul className="gladlyHC-faqSection-list">

.gladlyHC-faqSection-listItem

LI containing the answer title and a link to the answer detail page for that answer. A specific class is also added for the answer Id to allow individual targeting of answers.

<li className="gladlyHC-faqSection-list-item gladlyHC-faqSection-list-item-{answerId}">
<a href="{link_to_answer"}>{Answer title}</a>
</li>
Modifiers:
  • .gladlyHC-faqSection-list-item-{answerId}
    Added to each answer list item to allow targeting of specific answers.
.gladlyHC-faqSection-listItem-more

LI containing the link to the answer section's "See more" page which shows all answers in that section

<li className="gladlyHC-faqSection-list-item gladlyHC-faqSection-list-item-more">
<Link to={`/answers/${sectionId}`}>See more </Link>
</li>

.gladlyHC-faqSection

Wrapper for each individual section. Each section also gets a specific class that reflects it's specific order.

<div class="gladlyHC-faqSection gladlyHC-faqSection-2">
Modifiers:
  • .gladlyHC-faqSection-*
    Class added to each section to represent its order in the sections configuration.

.gladlyHC-searchContainer

The main wrapper element encompassing all Search components.

<div className="gladlyHC-searchContainer">

.gladlyHC-searchInput

Text input where user enters search term. By default only a width of 100% is applied.

<input type="text" className="gladlyHC-searchInput" />

.gladlyHC-searchMenuContainer

Outermost element surrounding the search results menu. This element is mostly used to make the menu absolute positioned below the search input. In most cases you will not want to modify this, but target .gladlyHC-searchMenu instead. Modify with caution.

<div className="gladlyHC-searchMenuContainer">

.gladlyHC-searchResult

Search result item displayed in the menu. Multiple results will be displayed depending on the number of results returned. Search results are rendered as <a> elements and link to an answer detail. When a user mouses over or uses keyboard navigation to select a result, a highlight class (detailed in the modifiers section below) will be applied. A class specific to each results answer will also be applied to each result (see modifiers section).

<a className="gladlyHC-searchResult gladlyHC-searchResult-VsOSB_4wR8u-4ywVVjcFqA">Return Policy</a>
Modifiers:
  • .gladlyHC-searchResult-highlighted
    When a search result is selected via keyboard navigation or mouseover, this class will be applied.
  • .gladlyHC-searchResult-{answerId}
    A class that specifies the unique answer id.

.highlightedSearchTerm

note use the selector: .gladlyHC-searchResult .highlightedSearchTerm
When a part of a search result matches the specific search term, the portion that matches is wrapped in a <mark class="highlightedSearchTerm"> element. By default this class makes the matching phrase bold.

<a className="gladlyHC-searchResult"><mark class="highlightedSearchTerm">Retur</mark>n Policy</a>

Search Results

The Search Results section that appears as a separate page. It consists of the search term and search results. Each of these components has specific CSS classes detailed below.

.gladlyHC-searchResultsContainer

The main wrapper element encompassing all Search components.

<div className="gladlyHC-searchResultsContainer">

.gladlyHC-searchResultsSection-result

The individual search result.

<li className="gladlyHC-searchResultSection-result">

.highlightedSearchTerm

note use the selector: .gladlyHC-searchResultsSection-result .highlightedSearchTerm
When a part of a search result matches the specific search term, the portion that matches is wrapped in a <mark class="highlightedSearchTerm"> element. By default this class makes the matching phrase bold.

<a className="gladlyHC-searchResultsSection-result"><mark class="highlightedSearchTerm">Retur</mark>n Policy</a>

.gladlyHC-searchResultsSection-results

The full list of search results.

<ul className="gladlyHC-searchResultSection-results">

.gladlyHC-searchResultsSection

Outermost element surrounding the search term and results.

<div className="gladlyHC-searchResultsSection">