The Help Center theme is a bundled theme included in Scroll Viewport. The Help Center theme provides a professional look and feel to content authored in Confluence and is ideal for publishing product documentation or a knowledge base. In this section you'll learn more about the structure of the Help Center theme as well as how to customize it.

How the Help Center theme is optimized

The Help Center theme is optimized for whatever device your users view your help center on. Whether it’s desktop, a tablet or mobile, your help content will be displayed optimally.

Users will be able to access your support widget and menu bar even on the smallest of screens.

Structure

Sites using the Help Center theme have up to three hierarchy levels:

  • Portal page: If multiple content sources are added, the portal page unifies all of them with an overview as well as a search bar that searches all of the site's content.

  • Content source home: This page provides search and navigation within a single content source.

  • Article pages: These correspond to Confluence pages and represent their hierarchy and content.

Customization

To make sure the published site fits into your online presence, you can customize its appearance using the theme editor, specifically under the tab named Templates.

Global elements

Elements under this category appear in all pages of the Scroll Viewport site. 

Header

These settings affect the top navigation bar:

  • Logo: Select a logo from a list of attachments.

  • Navbar color: Select the color of the top navigation bar.

  • Text color: Select a color for text in the navigation bar.

  • Navigation links: Add up to five custom links in the top navigation. Make sure to paste full URLs starting with "https://". Drag and drop the links to determine their order in the navigation bar.

  • Content source name: If checked, the name of the current content source appears next to the logo.

These settings affect the footer on the bottom:

  • Logo: Select a logo from a list of attachments.

  • Footer color: Select a color for the footer.

  • Text color: Select a color for text in the footer.

  • Navigation links: Add up to five custom links in the top navigation. Make sure to paste full URLs starting with "https://". Drag and drop the links to determine their order in the navigation bar.

  • Copyright text: Input your custom text to be part of the copyright line.

Pages

Please note: individual pages can’t be customized with unique settings. The settings that you apply at a page level will be applied to all pages of that type, across all content sources within that help center.

Portal

These settings only affect the design of the portal page:

  • Title & description: Input the text to be displayed above the main search bar.

  • Banner text color: Select a color for the title and description.

  • Banner image: Select an image for the banner background.

  • Tiles ordering: Drag and drop the items to change the order of the tiles.

  • Shown row of tiles: Select how many rows are shown upon loading the page. Remaining tiles will be accessible via a Show more button.

  • Heading: Input a heading to be displayed above the tiles.

Content source home

These settings affect the home page of every content source:

  • Layout: Choose one of three layouts

    • Hero layout features a large banner area that mimics the portal page layout. 

    • Detail layout features a smaller banner without text and had a dedicated area highlighting more details about the content source and a call to action button.

    • Article layout treats the home page as an article page.

  • Topic type: Choose how the article pages are navigated to:

    • Tiles: Top-level pages are represented with a clickable tile featuring its title and description.

    • List: Top-level pages are represented as a list with their child pages being the list items.

    • Accordion: Top-level pages are represented as sections in an accordion menu, which can be expanded to show the child pages.

Article

These settings affect how articles are displayed:

  • Article layout: Select how your articles should be displayed on large screens.

    • Narrow view keeps the content in the middle and adds whitespace on the sides, helping the content's readability.

    • Wide view makes use of the entire width of the screen, allowing to display large images or tables.

  • Breadcrumbs: Toggle a hierarchical list of pages to display above the article title.

  • Table of contents: Toggle an interactive table of contents in the top right of the article.

Site settings

These settings affect the behavior of the entire site, like the cookie policy.

Cookie notice

  • Display cookie notice: Toggle if visitors of the site are notified about the cookie policy with a pop-up.

  • Cookie notice text: Input your text informing the visitor about the cookie policy.

  • Link: Input a link text and link target, for example your privacy policy.

  • Tracking behavior: Select if cookies are set after the visitor accepts them or immediately upon opening the page.