Help document
Key point: Use this document type for help articles that are displayed in PageSeeder's built-in help panel.

The help document type is a built-in document type to create help articles.

Help articles appear in the help panel. They can be associated to one or more pages or document types.

PageSeeder automatically indexes the help articles so that they can be searched from the header bar or the search option of the help panel.

There are three levels of help documentation:

  • PageSeeder – default available anywhere.
  • Custom global help – available anywhere when created in the global template project.
  • Custom project-specific help – when created in a project.

To reach a help article, users can do the following:

  • Search the header bar using the /h parameter at the start of the search.
  • Click the icon in the header bar of any page to display contextual help.
  • Search articles in the help panel.
  • Use the different navigation options in the help panel.

Creating help documents

Help group

PageSeeder indexes and displays documents with type of Help article in the help group of a project. 

Title and description

If the topic of the article corresponds to something in the user interface, for example, the search page, make title of the document “Search”.

On the “Create document” dialog, click “Show more details” to display the Description field. Type in a sentence for display as the Key Point at the top of the article. 

Organization

There are no constraints for organizing the help articles but careful naming and linking helps users to navigate and writers to update. 

Context-sensitive

Associating a help article with either a page or a document type is how to manage what is displayed to the user when they click the icon.

When in the Help article, click the Metadata tab of the Document Info & metadata panel to see either the Page ID or Document type as options for binding the help to content. 

Authoring help documents

Because the help panel is limited in width, take care when making decisions on images and tabular data.

General elements

Headings

Ensure the document heading and title match.

Do not use auto-numbering on headings, and don’t skip heading levels.

Tables

Avoid wide tables and fixed width values to ensure that the table formats can flex with the available space.

Labels

By default, the help article document type supports the following block labels that PageSeeder supports.

Keypoint

Summarize the key point of the article in a single paragraph wrapped in a keypoint block label. The key point content is displayed as a special block in the help and is prefixed by “Key point:”.

Do not use lists, tables or any block elements in the content.

Warnings, tips, and notes

Use the warning, tip, and note block labels to display them in a corresponding callout box with an icon.

  • Warnings – are displayed in orange with a icon.
  • Tips – are displayed in yellow with a icon.
  • Notes – are displayed in blue with icon.

Avoid using headings, block labels or tables inside.

Administrator, manager, and developer

Use the administrator, manager and developer block labels for content specifically targeted at these roles.

They appear in a callout box formatted specifically for them, with the corresponding icon that PageSeeder uses in the user interface.

There is no need to use these block labels if the entire article is specific to them. For example, don’t use the administrator block label in a page in the system administration section.

It’s OK to use warnings, tips and notes or other block level elements inside.

Location

Use the location block label to provide information to help users locate user interface elements. Only add the location block at the bottom of the document.

You can use breadcrumbs or include instructions. Icons are OK, but don’t link to the page help article.

For example:

Account menu > Personal details

System administration > Server status > Caching

Icons

Use the svg-icon inline label to insert an icon from the PageSeeder user interface.

The content of the svg-icon label is the name of the label followed optionally by its color. The content of the inline label is replaced by an icon in the help panel, so in some cases, it might be useful to describe the shape of icon to the user as well.

Available colors are:

  • Basic colors: blue, purple, red, orange, yellow, green, grey.

  • Primary shades (change with theme): lightest-primary, lighter-primary, light-primary, default-primary, dark-primary, darker-primary, darkest-primary

  • Secondary shades (change with theme): lightest-accent, lighter-accent, light-accent, default-accent, dark-accent, darker-accent darkest-accent,

  • Shades of grey: lightest-grey, lighter-grey, light-grey, default-grey, dark-grey, darker-grey, darkest-grey,

  • Rainbow colors: rainbow-red, rainbow-orange, rainbow-yellow, rainbow-green, rainbow-blue

The primary and accent color automatically changes depending on your theme.

Example:

The <inline label="svg-icon">warning orange</inline> warning icon...