HTML and HTML5 Styling

142 min read

HTML5 Help Center Styling

You can create HTML5 help center layouts that produce a stylish, modern help center. With the default settings in place, the help center has a "hub" homepage that provides links to topics.

You can also use Multi-Publication Portal which is a help center that contains several other publications. For example, you could have a main "hub" homepage that provides links to user guides for several different products.

To customize and style a help center, you can edit the settings in the Layout Editor, Style with CSS and Style with JavaScript.

HTML5 Layout Editor Options

The tree of items you can choose to style in the Layout Editor is divided into several sections. Each section is described below, with the items you can style and the options available for them.

Many of the items and options are self-explanatory and have explanations right in the Layout Editor. So only the items that may not be immediately transparent are explained below.

Tip

Learn how to set the footnote appearance for HTML, HTML5 and SCORM output, see Footnote Settings (HTML).

General (HTML5)

Category

Description

Use titleabbrev in breadcrumb titles

Use to control whether Paligo uses the full title in the breadcrumb links or an abbreviated title. The abbreviated title comes from the text in a titleabbrev element which you need to add to your topics. For details, see Use Title Abbreviations.

SEO-friendly Output Filenames

Enable if you want SEO-friendly link names based on the names of the topics in your output, instead of unique ids.

The link will also stay permanent if the topic name stays the same (the topic title is irrelevant).

You can change the name of a topic without changing the filename that is produced in the output. This is useful if you need to keep the existing URL for a page. To change the topic name but keep the existing filename, add the xinfo:outname attribute to the section element of the topic. Set the value of the xinfo:outname to the name of the file (not the full URL path) and do not include the .html file extension.

If the title used to be "Introduction to ACME", the auto-generated output file name would be "introduction-to-acme.html". If you now change the title to "Introducing ACME", that would change the output file name to "introducing-acme.html". You can then add xinfo:outname with a value of "introduction-to-acme" (no extension) to keep the previous output file name.

Use a short and flat URL structure for output files

If you have SEO-friendly Output Filenames enabled, output paths will have a nested folder structure, by default.

Enabling this option will instead create a flat URL structure, generating shorter URL paths. (Always enabled automatically if you select Ajax loading below)

Default: Disabled

Use output file names made from id and SEO name

When flat URL structure or Ajax loading is enabled, the output file name is based on the title. If you enable this setting, the output file name will be a combination of the topic id and the title instead, for example, '123-my-topic.html'.

Default: Disabled

Allow reserved characters in output file names

Some characters, such as commas and semicolons are classed as "reserved" characters. Use this setting to control whether reserved characters can be used in output file names. Set it to Enabled to allow reserved characters or Disabled to prevent them being used.

Default: Disabled

Reader-friendly fragment identifiers (hash links)

Enable this feature if you want links to subsections to use reader-friendly names instead of unique id names (UUIDs). For example, www.acme.com/docs/introduction.html#getting-started. Note that you also need to have the SEO-friendly Output File Names feature enabled,

Disable this feature if you want the output to use unique id names.

Default: Disabled

To find out more, see Reader-Friendly URLs for Subsections.

Preserve legacy anchors if using reader-friendly fragment identifiers

Enable this feature if you are using reader-friendly hash links and you want to support:

  • Existing links to subsections, where the links use the UUID of the subsection not the new reader-friendly URL

  • New links to subsections, where the links use the new reader-friendly URL.

Disable this feature if you are using reader-friendly hash links and you do not want to support existing links that use the UUID. If there are links that use the UUID, they will no longer work.

Default: Disabled

To find out more, see Reader-Friendly URLs for Subsections.

Multiple publication portal prefix

Enable this setting if you:

  • Publish multiple publications in one help center portal

and

  • Have publications that reuse other publications (i.e. have reused subpublications).

When this setting is enabled, the output names for the sub-publications are unique, as Paligo adds the publication id to the output file name.

Disable this setting if the two points we have described do not apply to your content.

Default: Disabled

Use resource name instead of title for HTML output filename

Use to control whether Paligo uses the topic name (resource name) or the title name when it creates the output file name for topics. Set to Enabled to use the topic name or Disabled to use the title.

Note that this setting applies to all topics. If you only want certain topics to use the topic name, you can give those topics the xinfo:outname attribute instead. Then set the attribute value to the name of the topic.

Default: Disabled

Keep the letter case of the title for the HTML output file name

Use this setting to control whether output names are all lower case or can use upper case letters too. By default, the output file names only use lower case letters, for example, my-topic.html.

Set to Disabled for lower case only or Enabled to allow upper case letters. We recommend that you only set this to Enabled if you have a specific reason for using upper case letters.

Default: Disabled

Ajax load content

When enabled, the HTML content will be dynamically loaded for each page, making the page switching very fast.

Note that you have to publish the output on a server for this to work.

Default: disabled.

Enable local context-sensitive help

You do not have to enable this to get context-sensitive help. It is by default enabled, but the default requires the content to be published on a web server, which is the most common.

If, however, you have a requirement to have the context-sensitivity work on a local help package without a web server, you can enable this option.

Default: Disabled

Custom meta tags

Enter global custom meta tags as key-value pairs (name/content) here.

E.g to add a 'noindex' tag, to exclude web site from search engine indexing, you would enter 'robots:noindex, follow;' End each key-value pair with a semi colon.

Note

Only for global tags. Specific meta tags can be added directly in your topic. Meta keyword tags can be added through a keywordset element with keyword elements in your topics. And meta description tags can be added by using an abstract element (inside an info element after the title).

If you use the abstract to output meta description tags, you may also want to add custom CSS to not display it, unless you want that abstract to appear also in the content page itself. Use filtering by outputformat if you don't want it to appear in other output, such as PDF.

Default: Disabled

Custom meta tag separator

Use to change the meta tag separator character from a colon to a different character.

Paligo uses the colon character as the meta tag separator by default. If your meta tag pairs use the colon character in their names or values, you will need to change the separator character.

Custom meta tag pair terminator

Use to change the meta tag terminator character from a semi-colon to a different character.

Paligo uses the semi-colon character as the meta tag terminator by default. If your meta tag pairs use the semi-colon character in their names or values, you will need to change the terminator character.

Output info elements

This setting only applies to HTML5 Help Center Layouts.

If enabled, this sets all info elements to be hidden in the output. If disabled, all info elements are visible in the output.

Info elements are elements that, in Paligo, are children of the info element, such as copyright, edition, and author. To learn more about the info element and its children, see Supported Info Elements.

Output info elements filter

This setting only applies to HTML5 Help Center Layouts.

If you have enabled Output info elements, Paligo will include all "info" elements when you publish. By using the Output info elements filter, you can tell Paligo to hide specific elements, but include the rest.

Enter the names of the elements you want Paligo to hide. Separate the names with a semi-colon, for example:

authorgroup;releaseinfo

Create a title topic for reused publications

If you reuse publications within another publication, you can select whether that publication should be treated as a top-level topic, or if only its child topics should be reused, see Layout Settings for Parent Publications and Choose Publication Topic Behavior.

This setting needs to be enabled for the filtering to work for the parent publication.

Default: Enabled.

Only create topic for reused publications if no top-level topic

With this option enabled, you can mix reused publications where there is a top-level topic in some (in which case no title topic will be created for the publication), together with publications that have no top-level topic (in which case a title topic will be created for the publication).

Default: Disabled

Sort glossary automatically

Use to control whether Paligo automatically sorts your glossary entries alphabetically.

For details, see Sort Glossary Alphabetically.

Bibliography style

Use to control whether bibliographies use the normal structure or the ISO-690 structure, see Set Up an ISO 690 Bibliography.

Bibliography auto numbering

Use to control whether Paligo applies automatic numbering to bibliography entries, see Bibliography Auto-Numbering.

Bibliography auto-title

Use to control whether Paligo adds a "Bibliography" title for your bibliographies.

If you have a bibliography in a separate topic and it has two "Bibliography" titles, you should disable this feature. (The two titles are because one title is for the topic and the other title is auto-generated for the bibliography).

For details, see Deactivate Bibliography Auto-Titles.

Format output

Usually not required, but if desired, HTML Tidy will be applied on the output to ensure strict XHTML format.

Note

Since using this setting for correctly formatted content can lead to unexpected results, it is highly recommended to set this to Default or Disabled.

Copy anchor URL on click

When enabled, a link icon appears when you hover over a heading in the middle of a page. Clicking it copies the anchor url to the clipboard for easy sharing of a section.

Default: Disabled

Update URL on scroll

When enabled, the url in the browser address field will update as you scroll down a page to sub sections. This makes it easy to copy the url for any part of the content and improves usability.

This is normally a good idea, and the default is only disabled for backward compatibility. Default: disabled.

Company name

This setting only applies to HTML5 Help Center Layouts.

Enter the company name that Paligo will use in copyright information. For example, Acme Products.

Copyright year

This setting only applies to HTML5 Help Center Layouts.

If your publication topic contains the copyright element, Paligo will automatically use the current year as the copyright date. To use a different year, enter the year in the Copyright year field on the Layout.

Note

You can manually enter a year inside the copyright element in your publication. Your manual entry will override any Copyright year that you set in the Layout.

Last modified date

If you add a date format here, the last modified date for each topic will be output in the page footer.

E.g 'm/d/Y' (no quotes) for '03/25/2018', 'Y-m-d' for '2018-03-25', or 'F j, Y' for 'March 25, 2018'.

Leave empty to exclude the date.

Today's date for publication date

Use to set the date format for the publication (pubdate element in a publication topic). Leave empty to exclude the date.

For details, see Change Publication Date and Time Format (HTML5).

Use translatable publication date

If the publication date is set to use a full text format, Paligo can automatically translate the date into other languages. For example, Wednesday in English is replaced by Mittwoch in German and Mercredi in French.

For details, see Change Publication Date and Time Format (HTML5).

Use leading zero padding

Use to control whether single digit dates have a leading zero, for example, 03 instead of 3. For details, see Change Publication Date and Time Format (HTML5).

Color-mark non-approved translations

If the source language has changed since last translation, you can have this indicated with blue highlighting in the output (for draft publishing).

Analytics and Other Integrations (HTML5)

Category

Description

Use cookie consent popup

If you are using any of the integrations below you should enable this popup to comply with global regulations regarding cookies, see Enable or Disable Cookie Consent Popup.

Privacy policy link

If you use the cookie consent popup, you must enter the URL to your privacy policy, see Enable or Disable Cookie Consent Popup.

Google Analytics

Add your property id (or "tracking id") to connect Google Analytics to your HTML5 output. Also select whether you want to use the analytics.js tag or the global site tag (default), see Connect Google Analytics.

Mixpanel tracking

If you want to integrate with Mixpanel analytics, see Connect Paligo to Mixpanel.

Disqus comments

To get a section at the bottom of each topic with discussion threads, where users can add feedback, enable this with your Disqus domain.

Intercom chat

If you use Intercom, you can add the chat widget here to communicate live with your customers as they browse your help site, see Connect Paligo to Intercom.

Use Lightbox for images

If enabled, clicking images in the HTML5 output will enlarge them to full size. Default: disabled for legacy HTML5, enabled for the Help Center output, see Lightbox for Images.

Use thumbnails for all mediaobject (block) images

If enabled, every image in the HTML5 output will be rendered as a small thumbnail (for content where you want to reduce the space images take up), see Thumbnail Images.

Classes and Attributes HTML5

Category

Description

Output taxonomies

When enabled, taxonomies will be part of the output, and is automatically propagated as class names. If this option is enabled, taxonomies can also be used for filtering and more below.

Default: Disabled

Value structure for taxonomy class names

You can set whether class names from taxonomies should output the value and all its descendant values in a taxonomy tree, just the value itself, or the value and its parent.

Default: Value and descendants

Underscore delimiter for taxonomy class names

When enabled, an underscore ('_') will be used to separate the parts of a taxonomy value output for class names in HTML5, instead of a dash ('-').

For most common purposes this is not necessary, but can be useful if you need to further process the separate parts of the value.

Default: Disabled

Taxonomy filtering strategy

You can set whether taxonomies should be used for filtering, and whether to output the value and all its descendant values in a taxonomy tree, or just the value itself.

If you want to enable taxonomies for filtering, the most recommended value is to select "Descendants" to take advantage of the hierarchy of a taxonomy.

Default: Disabled

Relationship taxonomy

Select any taxonomy to create relationship links.

Enter the exact name of the taxonomy node (usually the root of a sub tree right under Taxonomies). Separate multiple names with a semicolon. Leave empty if you don't want to use taxonomies for relationship links.

See TOC and Chunking for options how to output the related topic links in your output.

Default: none (empty)

Create HTML meta tags from taxonomies

Creates meta tags with the root (name) of the taxonomy tree as the name attribute, and the value as the content attribute. Multiple values will be separated by a comma. The 'Output taxonomies' option must also be enabled.

Default: Disabled

Output role attribute as class names

If enabled, you can get your role attributes into your output as class names for further processing (e.g by css and javascript).

Output profile/filtering attributes as class names

If enabled, you can get your profile/filtering attributes into your output as class names for further processing (e.g by css and javascript), such as creating "on-the-fly" filtering.

Use xml:lang as profiling attribute

If enabled, the language attribute xml:lang can be used for filtering on language (natural languages like Swedish, Japanese, etc)

Glossary popovers

When enabled, glossary terms will display the definition in a pop over in HTML5 Help Center output, when the user hovers over it.

Note: This currently has no effect on legacy HTML5.

Default: enabled for Help Center output.

Cross-references

Category

Description

Enable cross-reference auto-title customization

When enabled, the cross-reference auto-title customizations below can be used. Otherwise legacy cross-reference auto-text is used, or any stylesheet customization you may have.

Default: Disabled

Cross-reference auto-title

Determines the format of the generated text for cross-references.

See Cross-Reference Settings for options available.

Default: 'title page', which produces a format like 'My Topic Title (page x)'.

Cross-reference auto-title for formal elements

Determines the format of the generated text for cross-references for formal elements (like tables, figures, examples).

See Cross-Reference Settings for options available.

Default: 'default', which produces a format like 'Example 5, "My Title"'.

Cross-reference label/title separator

Punctuation or space separating label (if used) from title in cross-references, when the auto-title parameter above is set.

Note

For a space, use 's' (without the quotes).

Default: ':s', which produces a format like 'Example 5: "My Title"'.

CSS, JS, Logos and Other Assets

Category

Description

Logotype

Add your logotype to replace the Paligo logo in the output. Use CSS to style it.

For the Help Center output this is only used in the content pages. Set the portal page logo below.

Help Center portal page logotype

Set the logo to use for the portal page.

This can be different than the one used on the main content pages to match the theme.

Logo link

By default, the logo in your HTML5 output will go to the main home page of the help itself. If you want it to go somewhere else, such as to your company home page, enter a URL here.

Note

This option should only be used if you are not using the portal page, or have another (customized) home link, as there will otherwise be no way to get back to that page.

Leave empty to use the default.

Open external logo link in the same tab

If you have selected a logo link (see Logo link setting), the link will open in a new tab by default. But you can change that behavior by using the Open external logo link in the same tab setting. Choose enable to open the link in the same tab or disable or default to open the link in a new tab.

CSS

Upload your own CSS to modify the default layout.

Persistent custom CSS filename

By default, your custom CSS file will get a unique name, everytime you upload a new update. The unique name is generated when you publish.

To keep the same CSS file name and prevent it from changing, set Persistent custom CSS filename to Enabled. The CSS file name will then be set to 'layout-custom-style.css' and it will not change.

Default: disabled.

Help Center portal page background image

This image will be used for the header banner (or "hero") section of the portal page.

Custom javascript

You can upload your own javascript to add functionality to your HTML5 output

Global custom javascript

Use this option to add a reference to a file called 'user-custom-script.js' to every HTML file in the output. You can then add the 'user-custom-script.js' file to the output after it is published.

In most cases, it is more convenient to upload your custom JavaScript file to the layout (using the Custom javascript option. But if you want to use the same javascript with a number of different layouts, you may prefer to use the Global custom javascript feature instead, so that you do not have to upload and update it separately for every layout.

Select jQuery version

Use to choose the version of jQuery that Paligo should use for the output.

The default is 3.4.1 but you can change to another version if you need:

  • javascript plugins that need a specific version

  • special browsers or browser configurations

  • security features that are only available in specific versions.

Place scripts at the end of the body tag

Use to control where scripts are added in the HTML output. Typically, you would only change this setting if you are using javascript that has to be run after the body of the page has loaded.

For details, see Position the JavaScript References.

Avoid cached JS and CSS on republishing

Choose Enabled if you have made changes to the CSS or JS for your help center and you need these changes to apply immediately when you publish. Note that the CSS and JS files will be given different filenames to those used previously.

Set to Disabled or Default if you do not want the browser to reload the assets and apply the recent changes. For example, if you have a custom webserver configuration that handles caching.

Add a Favicon

Upload an .ico or .png file here to use as your favicon. Even if you use .png, make sure to name your file 'favicon.ico' for it to be recognized. The favicon will only be visible when published on a web server.

Enable Subresource Integrity (SRI) checks for external scripts and styles

Choose Enabled to prevent compromised external resources from loading.

When enabled, an integrity attribute is added to links that reference certain external resources in the output. The value of that attribute is used to perform a checksum of the referenced resource to check its integrity. If the checksum fails, the resource will not be loaded in the user's browser.

Set to Disabled or Default to not perform thsi check and load resources regardless.

Custom favicon path

If you publish your help to a subfolder on a domain, enter the path to the folder of your help here. Use either an absolute web URL or a slash to specify the root of the server.

Leave this field blank if you publish your help to the root of the web domain.

Add a robots.txt file

Upload a robots.txt file here to give instructions about your published site to web robots. The file will be placed in the root folder of your published output.

For details, see Upload a Robots.txt File.

Create sitemap

Use to set Paligo to generate a sitemap.xml file for SEO and search engine crawling. When using this feature, you also need to provide the Publishing destination path. For details, see Create a Sitemap for your Help Center.

Publishing destination path

If you want to publish a sitemap.xml file, you also need to add the final destination domain where you will publish your content. Paligo will use this to provide the full absolute path of each topic in the sitemap.xml file.

For example: http://www.acme.com/acme1000/onlinehelp/

Add canonical URL link

Use this option if you need to:

  • Consolidate duplicate URLs with a canonical URL link

  • Drop "index.html" from the URL on the landing page (for HTML5 help centers)

For details, see Set Canonical URL Links for your Help Center.

Feedback Section

Category

Description

Use voting panel

Note

This option is currently only available for the Help Center output (Only for the main Help Center output, not available for the 'Preloaded' variant).

If this is enabled, your users will see a panel asking if they found a help page useful or not, with a 'Yes' and 'No' button to respond, like this:

Default: Disabled

Allow users to submit feedback (suggest edits)

If this is enabled, your users will be allowed to submit feedback to you or suggest edits to a help page. By default the feedback will be by email. Other types of feedback can be purchased as a customization.

Default: Disabled

Toggle feedback with voting panel

Note

This option is currently only available for the Help Center output (Only for the main Help Center output, not available for the 'Preloaded' variant).

If using the voting panel, choose whether the link to provide feedback should be toggled on 'No', both 'Yes' and 'No', or always visible.

Default: Toggle on the 'No' button.

Email for feedback

Enter an email address here if you want your users to email you feedback.

Formal Elements

The term Formal elements comes from the content model. It basically is an umbrella term for elements like lists, figures, tables, equations, examples. In this section you can make general settings applying to all such elements consistently if desired.

Note that any settings you make on a higher level (General) can be overridden if you set another value on a lower level (like "informalexample")

Most options are self-explanatory and not described here.

Category

Description

Use separate styling for label, number, and title in formal elements

If enabled, each part of the title for a formal elements, like a table, example, or figure, will get a span element with a specific class name, so they can be styled differently or excluded, using CSS.

Default: Disabled

Restart auto-label numbering

If enabled, tables, figures, and examples will restart their numbering for each topic, section (including internal sections inside topics), or chunk.

Default: continuous numbering throughout the publication.

Exclude label for abstract

If enabled, the label for an abstract is excluded from output. This is useful if you do not need it, and if publishing to multiple formats where hiding it with CSS does not work.

Default: Disabled

Help Center Theme Options

Category

Description

Base theme

There are a number of base themes to choose from for the Help Center output. Choose the one you want to base your own layout on.

Content theme

Besides the main base theme, you can also choose between different content themes, affecting mainly the body content, such as the styling of admonitions, lists, etc.

Sticky header

For the Help Center themes, you can enable a sticky header that is always visible when you scroll. Default: disabled

Full width header

For the Help Center themes, you can make the header in the main content pages full width. Default: disabled

Graphical lists

For the "Help Center" output only: When enabled, graphical numbers are used for procedures, etc (can be further customized by CSS). Default: enabled

Add print icon to header

For the "Help Center" output only: When enabled, a print icon is included at the top right of the page. This print function will make use of the style-print.css file included in the output. Default: disabled.

Versions for version dropdown

To get a dropdown menu for users to choose between versions of your content. Add the display text and URL, e.g: 'text:v6.0, url:/6.1/index.html;' (no quotes). Separate text and url with a comma, and end each link with a semicolon. 

Global versions path

When using the version dropdown, here you can set a central location for the versions.html file that all of your versions can access. This makes it so that you do not have to republish old versions when a new version is published.

Highlight Untranslated Content

If you have a multi-language output, Paligo will by default highlight untranslated content in red and prefix it with the Source Language within square brackets.

You can choose to suppress this feature by deactivating the setting Highlight non-translated content. This setting is available in the Layout Editor for HTML output (such as HTML5, Zendesk, Salesforce, Freshdesk and ServiceNow).

The following instruction shows how to edit this setting for HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General in the sidebar.

  4. Scroll down to Highlight non-translated content in HTML5 output.

  5. Use this setting to control whether untranslated content should be highlighted or not. Select:

    • Enable to highlight untranslated content in red and prefix it with the Source Language (for example [en]). Default

    • Disable to suppress the visualization of untranslated content.

  6. Select Save.

Images (HTML5)

Category

Description

Image title attribute

Use to output a title attribute on the image in your output. The title appears in a tooltip when you hover over the image (in the output).

Default: Disabled

To find out more, see Hover Text using the Image Title.

Use lightbox for images

Use to enable or disable the lightbox feature for images in your output. When Lightbox is enabled, you can select an image in the published output and the image will display at full size. If Lightbox is disabled, selecting the image has no effect.

Default: Enabled for HTML5 help center. Disabled for legacy HTML layouts.

To find out more, see Lightbox for Images.

Use thumbnails for all mediaobject (block) images

Use to control whether every image in the HTML5 output appears as a small "thumbnail" image. Enabling this feature is useful if you want to reduce the amount of space that images use on the page. But note that this setting applies to all images.

Note

If you want to use thumbnails on all images, you should also make sure you have the Use lightbox for images option enabled.

You may find it more useful to apply thumbnails to only certain images, rather than all of them. To do this, leave this setting disabled and then add a role attribute to the images you want to have thumbnails. Set the role attribute on the mediaobject element and give it the value: img-thumbnail.

Default width for thumbnails is 250px. You can change that in your custom CSS if you want.

Default: Disabled

To find out more, see Thumbnail Images.

Image size

To find out more, see Adjust Image Resolution.

Search Engine

Category

Description

Use Algolia search

If you want to use the high-end Algolia search engine in your help output, enable this. (Requires separate Algolia subscription).

Elastic Search (Swiftype)

If you prefer a crawler-based indexing search engine, Elastic Search (Swiftype) is another powerful option.

To enable Swiftype, add the key (only) from the code snippet in the Swiftype control panel.

Use fuzzy search

If you do not want to use Algolia, and the default search is not your preference, the fuzzy search is another built-in option.

Use multilingual support for default search

If using the default search, but you need support for multiple languages, enable this. Disabled by default since it adds unnecessary files if you don't have the need for multilingual publishing.

Include excerpt snippets

Applies to default search or fuzzy search, if you use one of them you should normally enable it. Disabled by default only for backward compatibility. Algolia search always has snippets by default.

Use breadcrumbs path in search results

If you use the snippets option (required for this option), you will also get a path for the result topic. This can be the exact path with the HTML file name, or a more user-friendly breadcrumbs path with the titles of the topics.

Default: Breadcrumbs made from titles enabled.

Note

Single page outputs do not have a search.

Table Styles

Category

Description

Output classes for styling of tables

It is recommended to enable this setting. The only reason it is not enabled by default is for backward compatibility.

Enabling it will make the publish process output class names and these will be used for e.g borders, rather than obsolete attributes for borders and rules.

Frame options

For either table or informaltable, set the frame (the border around the entire table) default.

For no frame, set "void". For frame around the entire table, set "border" or "box".

See this page for more on the options: Table options

Rules options

For either table or informaltable, set the rules (the border between cells) default.

For no border, set "none". For borders between all cells, set "all".

See this page for more on the options: Table options

Re-sort sorted tables automatically on publish

Even if you have sorted a table in the editor, re-sorting them on publish can be useful for example if you publish to multiple languages (in which case the sort order may be different), or if you have missed updating the sort before you publish.

Note

This will only affect tables that you have sorted with the sort commands in the editor first. 

Default: enabled.

Extra responsive table features

Use to give tables extra responsive features. These include a column filter button so that readers can control which table columns are shown and a sticky table header.

You can use the features for all tables, selected tables only, or turn the extra responsive features off. To find out more, see Enable Column Filter and Sticky Header.

Default: Disabled

TOC and Chunking

TOC settings are for controlling options for the Table of Contents in your HTML output.

Chunking settings are for controlling the size of your topics in the HTML output. They define whether a topic appears on a page on its own, or can be a subsection of another page. To find out more about using chunking, see Use Chunking to Control Subsections.

Category

Description

Standalone TOC

If enabled, the Table of Contents will not be created inside each HTML file, but rather as a standalone file, inserted by javascript when rendering the page. This makes HTML files smaller and so they will load faster in the browser. Faster page loading times are better for SEO.

For details, see Include TOC or Load Standalone TOC.

Default: Disabled

TOC section depth

Use to define the number of levels in your table of contents. For example, if you set it to 4, the table of contents will show links for topics that are at level 1, 2, 3, and 4 in your publication. The levels are nested in your table of contents to reflect the publication structure. Any topics that are at a lower level than that are not shown in the table of contents, but still exist in your output.

Default: 3.

Only include chunks in TOC

If enabled, only those topics which become chunks (according to your settings) will be included in the TOC. Chunks are topics that are on their own web page and cannot be subsections of other topics.

If you enable this setting, any internal section elements in a topic will not be included in the TOC.

Default: Disabled

Chunk section depth

A chunk is a topic that is always on its own web page in the output. With the Chunk section depth setting, you can set all topics to be a chunk up to a certain level in the publication. For example, if you set the chunk section depth to 4, all topics from levels 1 to 4 in your publication will be on their own page.

Once the chunk section level is reached, any lower-level topics will be added as subsections of their immediate parent topic.

Each section element can have an xinfo:chunk attribute that controls whether that section is a chunk. It can be set to yes, no, or default. This takes priority over the Chunk section depth setting in your layout.

Note

If you have publications nested inside other publications (sub-publications), each level of publication also counts as a chunking level. For example, let's say you have a publication, a sub-publication, and four levels of topics in the sub-publication. You want the topics to be chunked at two levels. For this, you would set the Chunk section depth to 4 (1 for the publication, 1 for the sub-publication, 1 for the top-level topics in the sub-publication, 1 for the second-level topics).

Default: 3.

Chunk first sections

If enabled, a chunk will be created for the first top-level section elements in each component. Otherwise, that section will be part of the chunk for its parent.

Default: Enabled.

Use legacy section chunking

This should in most cases be disabled. But if you want to enable legacy chunking, where any section element, whether an internal element in a topic or not, would be treated just like a topic, you can enable this.

Default: Disabled

Collapsible TOC

Use to control whether the TOC is collapsible. This option is designed for use with Theme 2 and may need additional JS to work with other themes.

Focus on current section on click

Use this setting to control the behavior of the table of contents (TOC) in the published output.

If you set this to enabled or default, and then select a sub-level topic, the TOC will collapse all "sibling" topics (topics at the same level as the topic you have selected). For example, let's say you have a TOC with 5 levels of topics. If you navigate down to the 5th level and select a topic, the TOC will update and show Levels 1-4 open, but level 5 closed.

If you set Focus on current section on click to disabled, it creates a "sticky menu". This is where all levels of the TOC, from the top level to the topic you select, are opened. The TOC does not collapse the "sibling" topics.

Note

If you want to disable this setting, you will also need to enable Ajax load content in the General settings.

Ajax loading only works on a web server. If you want to test locally, you will need to start a local server on your computer.

Collapse section in TOC when clicking on the link title

Use to control the collapse behavior of the table of contents. You can set it to collapse and expand when a user: selects an entry's chevron or the title. Alternatively, you can set it to only or only when they select the chevron.

  • Selects an entry's chevron or title

  • Select an entry's chevron.

For details, see Control the TOC Collapse Behavior.

Use H1 headings for topic chunks

Use to control whether topic headings:

  • Follow the structure of the publication, so most topics will start with a heading lower than H1

  • Must start with an H1 heading, irrespective of the topic's position in the publication structure.

For details, see Use H1 Headings (HTML).

Default: Publication hierarchy.

Use section TOC

Use to enable or disable section TOCs. These are tables of contents that appear at the top of topics that contain subsections. The TOC contains an entry for each subsection. For details, see Enable Section TOC (HTML5).

Use a separate list of related topics

If you want the list of separate topics to be separate from the "Section TOC" (list of child topics), this should be enabled.

See for selecting a taxonomy to use for selecting related topics.

Default: Enabled.

Include child topics in related topics section

If you are categorizing topics as related, and some of these topics happen to also be child topics of a related topic, you can choose to exclude such child topics here. Otherwise, if you also use the "Section TOC", which by default lists all child topics, you might get duplicate topics.

See for selecting a taxonomy to use for selecting related topics.

Default: Disabled

Use page TOC

Add a small page navigation (Table of Contents) for only the headings in the current page that highlights when you scroll, see Enable Page TOC.

Note

If you enable this, you should normally also enable 'Only include chunks in TOC', so headings in a single page are not displayed in the main navigation.

This is currently only available for HTML5 Help Center theme 1 and 2 (not the "Preloaded" version).

Default: Disabled

Top navigation

If you want to use a top navigation menu in your Help Center theme, enable this. You can select topics by using role attribute set to 'top-nav-link' or a taxonomy value named top-nav-link or Top nav link.

For this to work, you have to Enable Output Role Attribute as Class Names or Enable'Output taxonomies. If you only want external links, you set them below. Both types of top nav links can also be combined

Default: Disabled

Hide Top navigation links from Category Panel

Use to control whether links that appear in your top-navigation menu can also appear in the Category Panel section of your Help Center's portal page. For details, see Hide Top-Navigation Links.

Hide Top navigation link from TOC

Use to control whether links that appear in your top-navigation menu can also appear in the table of contents. For details, see Hide Top-Navigation Links.

Top navigation depth

If top navigation is enabled, and topics have been selected as top nav links, select the depth of links here. If a topic has child topics that are chunked, the child topics will become a dropdown menu.

Default: 2

External top navigation links

If you have enabled top navigation and want to use links to external sites, add them here in the format text:MyLinkText, url:https://www.myurl.com;. (Make sure you don't use extra spaces, and note the separators).

Separate text and url with a comma, and end each link with a semicolon. These characters are special characters and must not be used in the text or url themselves.

Default: none (empty)

Use translation strings for external top navigation link text

For external top navigation links, it is possible to have some such strings translated automatically.

These strings need to be available in the default translation strings configuration, or added to a customization (on applicable plans).

For example, if this option is enabled, using the string contact.support will generate the text "Contact support" in the language currently being published. Not all languages are supported for all available strings. Contact support to request if a string translation can be added.

Default: Disabled

Section numbering

If you want section numbering in your HTML5 output, enable this option.

Default: Disabled

Appendix section labeling

Use to control whether appendix labels appear on all sections in your appendices. The section labels only apply if the Section numbering setting is also enabled. For details, see Appendix Labels on Subsections.

Section numbering max depth

When section numbering is enabled, you can select the depth for which numbering is applied.

Default: level 8

TOC sidebar placement (single page HTML5 only)

For the single page HTML5 output, the TOC sidebar is place on the right by default. Select whether to place the Table of Contents sidebar on the left or right here.

Default: Right

Note

The chunking options have no effect on single-page HTML5 outputs, as the output is all one large chunk in that case.

Chunking

Use chunking to control which sections will become a separate web page in an HTML / HTML5 output. The term "chunk" means that a topic has to be on its own and will always appear on a separate web page. By using the Layout editor, you can set the:

  • TOC section depth that defines the topic levels shown in the table of contents (TOC).

  • Chunk section depth that defines the topic levels that will appear on a separate web page in the HTML / HTML5 output. This is by default set to 3, which means that all sections from level 1 to 3 will appear on their own web page. Any lower level topics will appear as subsections of their immediate parent topic. To learn more, see TOC and Chunking.

Tip

You can override the Chunk section depth by adding the element attribute xinfo:chunk to a topic. The topic will then appear on a separate web page, even if it is on a lower level than defined in the Chunk section depth, see Use Chunking to Control Subsections.

Caution

If you set the Chunk section depth higher than the TOC section depth, the topics on the lowest level will not be included in the TOC and will be harder to find.

Rules of Chunking

The following will explain the possible settings when adding the element attribute xinfo:chunk to a section.

Note

Only topics are counted in the Chunk section depth. Subsections or components (reused sections) in a topic are not counted. They are always considered as subsections in the parent topic.

Value

Description

xinfo:chunk="yes"

Means that the section starts a new HTML page and merges child sections as subsections on the same page.

xinfo:chunk="yes"

If above the Chunk section depth, a page is created for the chunk section, but not for the subsection at Chunk section depth.

xinfo:chunk="yes"

If below the Chunk section depth, a page is created for the chunk section and it will not be part of the page at Chunk section depth.

xinfo:chunk="yes"

You can add it on a subsection or reused section in a topic to create a new page.

xinfo:chunk="no"

Means that the section will be a subsection on the previous page.

xinfo:chunk="no"

If above the Chunk section depth, a page will not be created and the section will be a subsection in the parent page.

xinfo:chunk="no"

is below the Chunk section depth, it will have no effect, as all sections below Chunk section depth are already subsections of the previous page.

xinfo:chunk="default"

Means that the chunking will follow the defined Chunk section depth for the HTML / HTML5 layout. Same as for value No.

Verbatim (code and software) HTML5

Category

Description

Highlight verbatim elements

Enable syntax highlighting for code elements.

Highlight theme

Select the theme for your syntax highlighting (many different background colors and highlighting themes)

Use Font Awesome glyphs for code callouts

If you use calloutlist for annotating code samples, you can use Font Awesome for the "callout bugs". This is the default for HTML5.

Use graphics for code callouts

If you'd prefer, you can use a graphic for the code callout, an svg image will then be used. Max 30 callouts with this option.

Use unicode symbol for code callouts

Another option is to use a unicode symbol for callouts. If this is set a symbol similar to the graphic and Font Awesome version will be used. Max 20 callouts with this option.

Note

If all of the above code callout options are disabled, a simple plain text output will be used for the callouts. By default a number within parentheses like this (1), but this can be modified in your CSS.

Use code switcher for API style layout

Enabled by default. Only disable e.g if you need to mix programming languages in the same output and always show all samples without the user switching.

Graphical rendering of keycap

Use this if you want the keycap elements to render as a keyboard key, like so: AltShiftV.

Add your Own Class Names

When you publish to an HTML-based output, Paligo automatically adds class names or IDs to many of the HTML elements in the output. This is so that they can be styled using CSS.

But you can also add your own class names if needed. This is especially useful if you want some elements to be styled differently. For example, you can add it to:

  • a table element to create different-looking tables (such as information tables and parameter definition tables).

  • a mediaobject element if you want different types of images to behave differently.

There are two ways to add class names:

Note

You do not add class names directly to the HTML. Instead, you add class names to the Paligo XML that becomes the HTML when you publish. Paligo then includes your class name when it generates the HTML output.

Warning

Only add your own class names if there is no other way. Otherwise, you might end up with unstructured content as every topic can have unique roles.

To style elements with your own class name:

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Select the element that you want to style in the Element Structure Menu.

    For example, to style a table differently from other tables, select its table element.

  3. Add the role attribute in Element Attributes Panel and enter the class name as the value.

    Note

    Use a role class name that does not clash with any of the other names already used by Paligo, see Role Attribute Values.

    We recommend that you create unique names that are easy to understand and are specific to your organization, for example, "acme-leadtable". This will help to avoid clashes with existing or future class names.

  4. Select Save.

  5. Repeat this process for any other elements that you want to style differently.

  6. Publish your content to generate an output with your custom class name(s) included.

When you publish, Paligo will add the class name to the HTML element. You can then use CSS to style that class, see Style with CSS.

Change Publication Date and Time Format (HTML5)

Use the HTML5 Layout Editor to control the format of the publication date for HTML5 Help Center outputs.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General in the sidebar.

  4. Define the date format for the pubdate element in the Today's date for publication date field.

    Which date format to select depends on whether the setting Use translatable publication date is enabled or not.

    Note

    Be aware that:

    • If you add an empty pubdate element to your publication topic, Paligo will automatically insert the date when you publish. It will use the date format you set in the Layout.

    • If Today's date for publication date is left empty, the publication date will not appear in the output.

    • If you have a pubdate element and it contains content inside it, such as a text date or a variable, that content takes priority. Paligo will ignore the Today's date for publication date value.

    • If the format you define in Today's date for publication date is not supported, Paligo will include the format value in the output.

  5. Use translatable publication date to control whether a full-text date format for the pubdate element should automatically be converted into other languages.

    For example, you could have 28 March 2024 in English. For a Swedish output, Paligo would translate the date to 28 mars 2024.

    Select one of the following options:

    • Enabled to activate the auto-translation. Use EXSLT Date Format in Today's date for publication date.

    • Disabled to deactivate the auto-translation. Use PHP Date Format in Today's date for publication date.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  6. Use leading zero padding to control whether the date should have a leading zero for single-digit dates (when using EXSLT Date Format).

    Select one of the following options:

    • Enabled to use a leading zero (for example 03).

    • Disabled to use a single digit (for example 3).

      Use the PHP Date Format. It supports leading zeros by the use of different codes.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  7. Select Save.

When you publish with this Layout, the output will use the publication date settings you have chosen.

EXSLT Date Format

Use the following codes in settings where you need to specify a date and time format in the EXSLT date format:

Code

Description

Example of output

a

Day abbreviation

Mon

A

Day name

Monday

b

Month abbreviation

Aug

B

Month name

August

c

ISO data and time, including UTC offset

2024-02-27T10:01:40-05:00

Where T is a delimiter between the date and time.-05:00 is the offset from UTC, in this example, 5 hours behind UTC.

d

Day in month

12

H

Hour in day

10

j

Day in year

164

m

Month in year

08

M

Minute in hour

29

S

Second in minute

18

U

Week in year

33

w

Day in week

(Sunday = 1)

2

Y

Year

2024

PHP Date Format

Use the following codes when you need to specify a date and time format in a setting that requires the PHP date format:

Character

Description

Example of output

d

Day of the month, 2 digits with leading zeros

01 to 31

D

Three letter representation of the day

Mon to Sun

j

Day of month without leading zeros

1 to 31

l

Full text of day of the week

Monday to Sunday

N

ISO 8601 numeric representation of the day of the week

1 for Monday through 7 for Sunday

S

English ordinal suffix of the day of the month, shown as 2 characters

st, nd, rd, or th

w

Numeric representation of the day of the week

0 for Sunday to 6 for Saturday

z

Day of the year, starting from 0

0 to 365

W

1SO 8601 week number of the year, with weeks starting on Monday

42

For 42nd week in the year

F

Full text of month

January

m

Numeric representation of month, with leading zeros

01 to 12

M

Short text for month, three letters

Jan through Dec

n

Numeric representation of a month, without leading zeros

1 through 12

t

Number of days in the month

28 through 31

L

Leap year

1 if leap year, 0 if not a leap year

o

ISO 8601 week-numbering year.

This has the same value as Y, except that if the ISO week number (W) belongs to the previous or next year, that year is used instead.

2024

X

Not supported in Paligo

N/A

x

Not supported in Paligo

N/A

Y

Full numeric representation of a year. Has at least 4 digits or - for years BCE

-0055, 1999, 2024

y

Two digit representation of a year

03 or 24

a

Lowercase Ante meridiem (am) and Post meridiem (pm)

am or pm

A

Uppercase Ante meridiem (am) and Post meridiem (pm)

AM or PM

B

Swatch Internet time

000 through 999

g

12-hour format of an hour, no leading zeros

1 through 12

G

24-hour format of an hour, no leading zeros

0 through 23

h

12-hour format of an hour with leading zeros

01 through 12

H

24-hour format of an hour with leading zeros

00 through 23

i

Minutes with leading zeros

00 to 59

s

Seconds with leading zeros

00 to 59

u

Microseconds

Note that date() will always generate 000000 since it takes an int parameter.

DateTime::format() does support microseconds if DateTime was created with microseconds.

654321

v

Milliseconds.

Note that date() will always generate 000000 since it takes an int parameter.

DateTime::format() does support microseconds if DateTime was created with microseconds.

654

e

Timezone identifier

UTV, GMT, Atlantic/Azores

I

Indicates if date is in daylight saving time

1 for Daylight Saving Time

0 for not Daylight Saving Time

O

Difference to Greenwich Meantime (GMT). No colon between hours and minutes.

+0200

P

Difference to Greenwich Meantime (GMT). Colon between hours and minutes.

+02:00

p

Difference to Greenwich Meantime (GMT) but returns z instead of +00:00. Colon between hours and minutes.

z or +02:00

T

Timezone abbreviation, if known, otherwise GMT offset.

EST, MDT, or +05

Z

Timezone offset in seconds. Timezone offsets west of UTC is always negative. East of UTC is always positive.

-43200 through 50400

c

ISO 8601 date

2024-02-12T15:17:21+00:00

r

» RFC 2822/» RFC 5322 formatted date

Thu, 21 Dec 2024 16:01:07 +0200

U

Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

1769548800

This table is based on information on php.net.

Connect Google Analytics

To connect Google Analytics to your HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Analytics and other integrations in the left menu.

  4. Add your property id in Google Analytics property id (tracking id) or container id.

  5. Select a tracking code in Google tracking code type from the menu.

    • Google Tag Manager

    • Global Site Tag (gtag.js) Default

    • Analytics.js

  6. Select Save.

Context-Sensitive Help

With Context-Sensitive Help (CSH), your users can select a part of your product interface to display the relevant help page. For example, with a software product, you could have an "Info" icon next to a "Balance" option. When the user selects the "info" icon, the help page about the "Balance" feature is opened automatically, so they are taken directly to the relevant information.

Traditionally, context-sensitive help is made by creating a mapping file. The mapping file, sometimes known as a header file, is used to match an id in your product to the id of a page in your documentation. Paligo uses this type of approach for HTML5 outputs and creates the mapping file automatically, as long as you have certain attributes in place.

To set up context-sensitive help, we recommend that you first Create a Mapping File for CSH and then Create a Fallback Page for CSH.

Note

If you need to publish any other type of context-sensitive help, please contact support for assistance.

Create a Mapping File for CSH

To get Paligo to automatically create the mapping file for context-sensitive help:

  1. Get the ids for the application components in your product.

  2. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  3. Select the section element in the Element Structure Menu.

  4. Select Go to element.

  5. Add xinfo:appid attribute in Element Attributes Panel and enter the id of the relevant application component in your product.

    If there are multiple components calling the same topic, separate them with semicolons. For example: imagedialog_123;imagebrowser_234

    Tip

    Adding the xinfo:appid attribute to the top section element is the typical use case. It is also possible to put xinfo:appid on a sub section inside a topic. The only requirement is that the sub section also has an xml:id, which it would normally have by default.

    If you mark up a sub section, the context sensitive help will open the topic at that location on the page, rather than at the top.

  6. Select Save.

  7. Publish your publication. This creates a JSON file that automatically maps any url requests to the relevant topic.

  8. In your product, your developers can call the context-sensitive help using the internal application id's as a string parameter. For example:

    www.youronlinehelp.com/en/index-en.html?contextId=imagedialog_123

    where:

    • www.youronlinehelp.com is the domain where you host your published documentation. In reality, you will have something different, such as your organization's website URL.

    • en/index-en.html is the folder and index file for an English version of your documentation.

    • ?contextId=imagedialog_123 is the context-sensitive help reference.

    The call needs to specify the language folder and the help's index file before the context-sensitive help reference.

Note

To test the context-sensitive help, either:

  • Publish it to your server or a test server (local or web server). This is because the function of fetching data from JSON requires the content to be on a server for browser security requirements.

  • Select to enable local context-sensitive help in the Layout Editor (under General). You can enable this temporarily while testing, and then disable it again when you are ready to publish to your server.

Create a Fallback Page for CSH

We recommend that you create a fallback page, in case there is a problem with one of your context-sensitive help links or pages. The fallback page will be shown if the target page of the context-sensitive link cannot be found.

To create a fallback page for context-sensitive help:

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Select the section element in the Element Structure Menu.

  3. Select Go to element.

  4. Add the attribute xinfo:appid in the Element Attributes Panel and set the value to not_found.

  5. Add the attribute role in the Element Attributes Panel and set the value to notintoc.

    This role will prevent the fallback page from appearing in the table of contents.

    Note

    This is an optional, but recommended step.

  6. Select Save.

  7. Publish your publication.

    When you publish your publication, the topic will be used as the fallback page. If the browser cannot find the topic for a context-sensitive help link, it will display the fallback page instead.

Cross-Reference Settings

In the Layout Editor there are some layout options for cross-references for both HTML5 and PDF output. You can customize the information included in auto-titles, make external links open in a separate tab and more. An auto-title is the text that appears when a cross-reference is added.

To customize cross-references for HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Cross-references in the sidebar.

  4. In Enable cross-reference auto-title customization select:

    • Enable to activate auto-title customization.

    • Disable to deactivate the possibility to customize auto-titles. Default

  5. Add keywords in Cross-reference auto-title to customize cross-references for topics.

    Default is title page.

  6. Add keywords in Cross-reference auto-title for formal elements to customize the cross-references for lists, figures, tables, equations and examples.

    Default is label quotedtitle nopage.

  7. Add keywords in Cross-reference auto-title for appendices to customize the cross-references for appendices.

    Default is label title page.

  8. Enter a character (or a combination of characters) in Cross-reference label / title separator to customize the separator.

    Default is :s which adds a colon and a space between the label and title.

    The separator is the character between the label and title.

    Tip

    Examples of characters that can be used:

    • Hyphen -

    • Space s

    • Colon :

  9. Choose how to open external links in Open external website links in new tab or window.

    • _blank - The link will open in a new tab (or on older browsers a new window). Default

    • _self - The link will be opened in current tab or window.

    • _parent - The link will be opened in the parent frame. Frames are deprecated in HTML5.

    • _top - The link breaks out of all frames and opens in the current tab or window. Frames are deprecated in HTML5.

  10. Set Add rel = noopener to external links that open in new tab or window to:

    • Enable to force external links to open in a new tab. Default.

    • Disable to stop external links to open a new tab and instead open the link in current tab.

    Warning

    Due to security reasons this option is always enabled when "Open external website links in new tab or window" is set to _blank .

  11. Set Use angle bracket delimiters around email to:

    • Enable to use delimiters around email addresses. Default

    • Disable if delimiters are not be used.

  12. Select Save.

Keywords for Auto-title Customization

By using the keywords below, you can customize the auto-titles for cross-references. As with all auto-text, the keywords will be translated automatically when you publish to another language.

An auto-title can consist of one or more keywords. Add a space between each keyword. The order of the keywords does not matter. Paligo will automatically rearrange the components as follows (depending on which you use):

  1. label

  2. title

  3. page (only for PDF output)

Example 94. Quoted text with page number and label

labelname quotedtitle page

Result: Section "My Topic Title" (page 15).

Tip

You can override the format for individual cross-references by using the xrefstyle attribute. In that case, use the same values, but start with "select: ". For example, select: quotedtitle nopage.

Component

Keyword

Example

Description

label

label

Table 3

Complete label name and number.

labelname

Table

Only the label name.

labelnumber

3

Only the label number.

title

title

My Topic Title

Title without quotes.

quotedtitle

"My Topic Title"

Title in quotes.

page

unspecified

[12]

Standard page citation if no value is given for the page component.

page

(page 12)

Page number in parentheses.

pagecomma

, page 12

Page number after a comma.

Note that this format may be unsuitable for some languages. Some languages use commas in a different way.

Page

Page 12

Capitalized page label.

pageabbrev

(p. 12)

Abbreviated label in parentheses.

pageabbrevcomma

, p. 12

Page number after a comma and page abbreviated.

This option does not work with all languages. Make sure you check for languages you translate to.

In many cases, languages can be added with a request to support.

pagenumber

12

Only the page number.

nopage

 Turn off the page number for the cross-reference.

Enable Column Filter and Sticky Header

All tables in Paligo's HTML5 outputs are responsive by default and will adapt to the available space on the reader's device.

Even so, large tables can be difficult to use on smaller screens, especially wide tables with lots of columns. To prevent this, you can enable Paligo's extra responsive table features for HTML5 layout. When enabled, you get:

  • Column filter - This adds a Filter button above the table. Readers can select it to display a list of the columns, and can then choose which columns the table shows. They can make the table smaller by setting it to only show those columns that they need at that particular time.

  • Sticky header - The header of the table will be shown at the top, even when the reader scrolls down. This is especially useful with very long tables where the reader wants to scroll down the table, but still needs the header visible so that they can understand the context of each column. As they scroll down, the table header "sticks" in place at the top, so only the table rows scroll up and down.

To enable "extra responsive table" features:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Table Styles in the sidebar.

  4. Use the Extra Responsive Table Features setting to control the table column filter and the table sticky header.

    Choose:

    • Disable (or Default) to turn off the table column filter and table sticky header for all tables.

    • Select a number from 3 to 15 (the number of columns) to turn the extra responsive features on and define when they will appear.

      For example, if you set it to 5, the table column filter and table sticky header will only be used for tables that have 5 columns or more.

    • Only selected if you only want to use the table column filter and table sticky header on certain tables.

      You will need to use the role attribute to specify which tables should use the extra responsive features, see Apply Column Filter and Sticky Header.

  5. Select Save.

Apply Column Filter and Sticky Header
Important

This only applies if you have chosen Only selected in Enable Column Filter and Sticky Header.

To apply column filter and sticky header to specific topics:

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Position the cursor inside the table.

  3. Select the table element in the Element Structure Menu and choose Go to element.

  4. Add the role attribute in the Element Attributes Panel and set the value to extra-responsive.

    Important

    If there are images in your table, select the imagedata element for each image and make sure that it does not have a width attribute in the Element Attributes Panel.

    If there is a width attribute, delete it. This is because some extra-responsive table features cannot work correctly if images have a fixed width.

  5. Select Save.

Enable WCAG Settings

Web Content Accessibility Guidelines (WCAG) are recommendations for making the web more accessible for everyone, see WCAG. In Paligo, you can enable WCAG settings for the HTML5 output in the Layout Editor.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Universal Access in the sidebar.

  4. The following WCAG settings are available:

    • Include WCAG CSS file - Makes the text darker to improve the contrast. Disabled by default.

    • Admonitions use strong instead of h3 - Replaces the default HTML h3 element for admonition titles with the strong element, which is recommended for accessibility. Disabled by default.

    • Include inline styles for Skip Navigation - This option adds an inline style element for this to reduce the Total Content Shift (any time something on the page visibly changes position within the frame). A hidden element links to the main body content for keyboard navigation and screen readers. Enabled by default.

    • Use class rather than ID for features - Makes elements use class instead of element IDs. Certain IDs are duplicated in default HTML5. This option will replace those IDs with class values to avoid validation problems affecting accessibility tools. Disabled by default.

      The ID values that will be replaced by class values are:

      • logotype-pageheader

      • navbar

      • navbar-collapse

      • header-navigation-next

      • header-navigation-prev

      • aa-search-input

      • content-wrapper

      Important

      If this setting is enabled, custom CSS and / or JavaScript referencing the removed ID values must be updated to reference class values instead.

  5. Select Save.

Extended Language Switcher

When you publish a multi-language publication to your HTML5 help center, a language switcher appears in the bottom-right corner of the start page.

If you want to be able to switch languages without returning to the start page, you can activate the setting Add Page Language Switch in the Layout Editor. It makes the language switcher appear on all pages.

Note

This feature only works on publications. It does not work if you publish a stand-alone topic.

Activate Extended Language Switcher

If you want the language switcher to appear on all pages, you have to activate the setting Add Page Language Switch in the Layout Editor.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select CSS, JS, logos and other assets in the sidebar.

  4. Enable Add Page Language Switch.

  5. Select Save.

Faster Page Loading with Ajax

You can significantly improve the page loading times for HTML5 help centers by enabling Ajax loading. With this feature enabled, when you open a new topic in the published output, the browser will load only the content of the new topic, rather than every part of the web page (header, navigation features and more).

Ajax loading is available for HTML5 help centers only and you can enable it on an HTML5 help center layout. But note that if you enable Ajax loading, links in your content will not work when you view the content locally. But they will work as expected when you host your content on a web server.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Search Engine in the sidebar.

  4. Select General in the sidebar.

  5. Select Enable to activate Ajax load content.

  6. Select Save.

Note

There is a HTML5 Help Center Preloaded layout template that also provides fast page loading times. This layout also uses an Ajax variant, but it works offline without publishing to a web server. This type of layout can be useful for smaller outputs, where you provide your help center on a local computer. But it does not support all of the help center features.

If you have larger publications, with hundreds or thousands of pages, use the main HTML5 Help Center layout and enable ajax instead.

Footnote Settings (HTML)

You can set the footnote appearance for HTML, HTML5 and SCORM output in the Layout Editor.

This instruction shows how this is done for HTML5 output.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Footnote formatting in the sidebar.

  4. Choose a number format for General footnotes from the menu.

    Default value is 1.

  5. Choose a number format for Table footnotes from the menu.

    Default value is a.

  6. Select if the footnotes are to be Enclosed in square brackets.

    Default value is Yes.

  7. Select Save.

Include or Exclude Info Elements (HTML5)
Note

In this article, we use the term "info elements" to refer to all elements possible to insert inside an info element. These include copyright, edition, volumenum, author, and abstract, see Supported Info Elements.

By default, Paligo only includes some info elements in your Publication Topic for HTML5 output.

If you need other info elements, you can add them as hidden content in a footer. You can then use your CSS to control whether they are visible and to style them. This is useful if there are specific info elements that you want to display, such as edition or volumenum.

If you choose to include the info elements, Paligo adds them inside <div class="info-elements"> in the footer-content div and they are set to be hidden by default.

Note

Info elements added at the article/info level of a publication will only appear on the index page of that publication. If you want to output info elements on other pages in your publications, you have to add them to every topic where you want them to appear.

Paligo creates a div for each info element and include a class name that matches the element name in Paligo XML. For example, the copyright element in Paligo XML becomes <div aria-hidden="true" class="copyright"> in the HTML. Paligo will also create <span> elements in the HTML, where appropriate.

Note

The info elements are limited to the title pages of the publication.

To be able to add the info elements on other pages, a customization will be needed. Please contact Paligo customer support.

To include info elements as hidden elements in the HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General in the sidebar.

  4. Set Output info elements to:

    • Enable - To set Paligo to include the info elements as hidden content in the HTML5. By default, it will include all info elements.

    • Disable - To prevent Paligo from including the info elements in the HTML.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

    Note

    This setting only works with HTML5 Help Center Layouts.

  5. To exclude certain info elements, enter their names in the Output info elements filter field. This field is empty by default.

    Use a semi-colon to separate each info element, for example:

    authorgroup;releaseinfo;

    Paligo will exclude any info element that you have listed in the field.

  6. Select Save.

When you publish with this Layout, Paligo will generate an HTML5 output that includes the info elements that you have selected.

You can then use CSS to display the info elements and to style them, see Browser Inspection Tool and Upload Customized CSS. You could also use JavaScript to manipulate them, see Upload Customized JavaScript.

Note

When using CSS or JavaScript with info elements, note that some pages in your HTML may include the elements in the main body as well as the footer. For example, copyright may be shown in the body as well as the footer. They will have the same class name, and so you may need to use more specific CSS selectors to tell the browser exactly which element to target.

Minify CSS and JavaScript

For HTML outputs, Paligo has a Minify assets feature that will remove any unnecessary characters from Paligo's CSS and JavaScript files. The minification process makes the script files more efficient, and can improve load times by reducing the traffic between the server and clients.

The minification process can change the names of variables used in the Paligo scripts. So if you have created custom CSS or JS files that reference the variables in a Paligo script, you may need to disable the Minify Assets feature.

Note

The minification does not apply to any custom CSS or JavaScript files that you upload to the HTML5 layout.

Deletion of unused scripts

When Minify CSS and Javascript is enabled, unused files will automatically be removed from the output. This helps with security by not including potentially outdated files.

The Minify assets feature is disabled by default, but you can enable it on the HTML layout.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select CSS, JS, logos and other assets in the sidebar.

  4. Scroll down to Minify assets and set it to:

    • Enable to activate minification that makes the script files more efficient and improves page load speeds (and SEO).

    • Disable to turn it off. Default

  5. Select Save.

Offline Help Center

The HTML help center output is designed to reference some external services via the Internet. These services include MathJax and advanced search engines such as Algolia and Elastic / Swiftype. But if you need to use a help center without an Internet connection, that is possible too, although you will not be able to use Internet-dependent services.

For an "offline" help center, you should:

  • Disable the Internet-dependent services in the layout for your publication

  • Store videos and other external files on a static network address that is the same for all users.

To set up an "offline" HTML help center output that calls no external resources:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Search Engine in the sidebar.

  4. Disable Use Algolia Search, see Enable Algolia Search.

  5. Make sure that the Use Elastic Site Search field is empty (blank):

  6. Select Analytics and other integrations in the sidebar.

  7. Disable Use cookie consent popup.

  8. Disable Enable MathJax equation rendering.

  9. Select Verbatim (code and software) in the sidebar.

  10. Disable Highlight verbatim elements.

  11. Select Save.

When you use this layout to publish your HTML help center, the output will not use any features that require an Internet connection. The output will use Paligo's built-in search feature and is suitable for use offline.

Tip

If you want to use videos in your topics, store the video files in a folder that has a static address on your network.

It needs to be the same address for all users. Then, when you edit a topic, insert a video and enter the address of the video on your network. The same principle applies if you want to add links to external files - put the files in a folder with a static address and link to them there.

Use a Common Image Folder

The default layout setting for how images are stored in Paligo HTML outputs, makes one separate image folder per language. If you are using some images for all languages, it is possible to reduce the size of the publication by using one common folder instead. This option is set in the layout configuration for HTML or HTML5.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Images in the sidebar.

  4. Scroll down to Per-language image folders.

  5. Select Common from the menu.

  6. Select Save.

Upload a Robots.txt File

A robots.txt is a plain text file that consists of one or more rules that block or allow access. It follows the Robots Exclusion Standard.

Webmasters can create a robots.txt file and upload it to a Paligo HTML5 layout. When the layout is used for publishing, Paligo will include the robots.txt file in the output. The entire output can then be placed on a web server, so there is no need to add the file manually after publishing.

To upload a robots.txt file:

  1. Create a robots.txt file in a third-party application. You must name the file robots.txt.

    Note

    Take care when creating your robots.txt file as it is possible to hide parts of your documentation site if you configure it incorrectly. We recommend that these files are only created by experienced web designers or developers.

  2. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  3. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  4. Select CSS, JS, logos and other assets in the sidebar.

  5. Select Upload in the Add a robots.txt file section.

  6. Drag and drop your robots.txt file onto the upload dialog.

  7. Select Save.

When you use this layout to publish content, Paligo includes the robots.file in the output .zip file.

Create a Sitemap for your Help Center

Paligo can generate a sitemap XML file as part of your HTML5 Help Center output. The sitemap lists the pages in your help center and helps search engines to navigate and index the site.

To get Paligo to include a sitemap file in the output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the HTML5 Help Center Layout you are going to use for publishing. Alternatively, create a new one (see Create a Layout).

  3. Select CSS, JS, logos and other assets in the sidebar.

  4. Set Create sitemap to:

    • Enable to get Paligo to generate a sitemap.xml file in the output.

      When you publish, the sitemap.xml file is in the Out folder.

    • Disable to prevent Paligo from generating a sitemap.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  5. In the Publishing destination path field, enter the URL of your help center.

    If you have not published your help center yet, this is the address where you intend to host your help center, for example:

    href="www.acme.com/customersupport/

    Paligo will use this as the absolute path for each topic in the sitemap.xml file.

  6. Select Save.

When you use this Layout to publish, Paligo will include a sitemap.xml in the output. When you upload your content to your domain, make sure to include the entire Out folder, including the sitemap.xml. The various Internet search engines will then be able to find your sitemap file.

Use H1 Headings (HTML)

HTML5 layouts have a Use H1 headings for topic chunks setting that you can use to control how <h1> headings are applied to your content. Typically, you will use this feature for SEO purposes, as it can be better to have <h1> for the main heading on each page in the output.

To change how Paligo applies <h1> headings to your HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Set Use H1 headings for topic chunks to either:

    • Publication hierarchy - Paligo will apply the heading levels based on where the topic appears in the publication structure. This means that the top-level publication will get <h1> and your top-level topics will get <h2> for their main headings. Default

    • Top-level - Paligo will apply <h1> headings to the top-level publication and the top-level topics.

    • Chunk - Paligo will apply <h1> headings to every topic that is a "chunk". A "chunk" is a topic that is set to appear on its own page, for details, see Chunking.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

    Typically, it is better to use the Top-level or Chunk options for SEO purposes.

  5. Select Save.

When you publish, Paligo will apply your choice to the output.

Note

To see how the Publication hierarchy, Top-level, and Chunk options affect the output, see the examples below.

Example 95. H1 headings based on publication hierarchy

Let's say you have a user guide and 4 topics at the top-level inside the publication. You have set your HTML5 layout to have Use H1 headings for topic chunks set to Publication hierarchy. When you publish, Paligo will apply <h1> headings based on the position of each topic in the publication structure.

The publication (1) has a topic too, so in the output, that is at the top level and it gets <h1> for its main heading. The topics (2) will get <h2> for their main heading, as they are at the second level in the publication structure.

Example 96. H1 headings for top-level topics

Let's say you have a user guide with 4 topics at the top-level inside it. There are also 2 topics at the next level down. You have set your HTML5 layout to have Use H1 headings for topic chunks set to Top-level. When you publish, Paligo will apply <h1> headings to every top-level topic in your publication.

The publication (1) has a topic too, so in the output, that is at the top level and it gets <h1> for its main heading. The top level of topics inside the publication (2) will also get <h1> for their main heading. The lower-level topics (3) will get <h2> as their main heading, as Use H1 headings for topic chunks is set to Top-level and the lower-level topics are second-level topics (third-level if you include the publication topic).

Example 97. H1 headings for chunks

Let's say you have a user guide with 4 topics at the top-level and 2 second-level topics, like this:

In this example, the publication "Acme User Guide" (1) is at the top. Inside the publication, the top-level topics (2) are "Introduction", "Quick start", "Troubleshooting" and "Reference material". The second-level topics (3) are "Cooling recommendations" and "Humidity recommendations".

Inside the "Cooling recommendations" topic, it has been set to chunk (it has an xinfo:chunk attribute with a value of Yes). So this topic will be on its own page in the output, even though it appears at a lower level in the publication structure.

Inside the "Humidity recommendations" topic, it has been set to not chunk (it has an xinfo: chunk attribute with a value of No).

In your HTML5 layout, you have set Use H1 headings for topic chunks set to Chunk.

When you publish, Paligo will apply <h1> headings like this:

  • Acme User Guide publication topic gets <h1> for its main heading

  • Introduction gets <h1> for its main heading

  • Quick start gets <h1> for its main heading

  • Troubleshooting gets <h1> for its main heading

  • Reference material gets <h1> for its main heading

  • Cooling recommendations gets <h1> for its main heading and it appears on its own page, even though it is a lower-level topic. It is not shown as subsection of "Reference material" as it is set to be a chunk.

  • Humidity recommendations gets <h2> for its main heading as it is set to not chunk. It appears as a subsection on the parent "Reference material" page.

HTML5 Search Engines

The search engine is an often overlooked part of a Help Center and yet it is vital to its success. After all, there's no point in having excellent articles if your customers can't find them!

For your Paligo HTML5 Help Centers, you have several possibilities for the search feature. There are two built-in search engines that you can use and these provide a basic search that can find relevant answers quickly on smaller projects. But for a more powerful and feature-rich search, you can also use a Third-Party search engine service and connect it to your Help Center. These services require a subscription, but are capable of searching large projects quickly and also support more advanced features such as synonyms, federated search, and faceted search.

To find out about the various search engines you can use, see What Search Engines does Paligo Support?. We also have a Search Engine Comparison to help you make the right choice for your Help Center.

Style the Portal Page

The HTML5 Help Center has a portal page, which is the first page you see when you launch the index.html file for the help center. You can use CSS, JavaScript and attributes in Paligo to change the appearance of the various elements on the portal page.

For many of the features of the portal page, you will use CSS to change the appearance. If you are unfamiliar with CSS style sheets and working with the browser's inspection tool, see Style with CSS.

To help you style your portal page, we have included sections that explain how to make the most commonly requested changes. These include changing the font colors, background images, and choosing which topics appear in the Category Panel Section and more.

The HTML5 Help Center page using the default CSS stylesheets.

Customize the Start Page

By dedicating a topic as a start page and activating the start page feature for the HTML5 configuration, you can choose a different start page for the HTML5 Help Center.

Note

This feature is primarily for single-language publications, since the language selection occurs on the index.html page. It can still be used for multi-language publications, but the redirect will occur to the default output language.

Create a Start Page

To be able to choose a different start page for the HTML5 Help Center, the topic (that is to be the start page) has to be updated with the start-page role. If there are several topics with this setting, it will be the topic with the topmost position that will be used.

Tip

You probably want to set this on a topic that will become a page of its own. But it will actually work on internal sections, reused components or sections that has been chunked to internal sections as long as it is part of the TOC.

  1. Create a new topic or open an existing topic.

  2. Select the top section in the Element Structure Menu and choose Go to element.

  3. Add the attribute Role in Element Attributes Panel.

  4. Add the value start-page.

  5. Select Save.

Activate HTML5 Start Page

The ability to choose a different start page for the HTML5 Help Center must be activated via the Layout tab. By enabling this setting, the topic that has a start-page role will become the start page.

Note

If this setting is enabled and no topic is found having the start-page role, the redirect will go to the so called "publication page". That is the en/index-en.html for an English publication or to sv/index-sv.html for a Swedish publication.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General.

  4. Scroll down to Choose start page by role for HTML5 Help Center.

  5. Select Enabled from the menu.

  6. Select Save.

Add a Logo

Your sample HTML5 Help Center still has the default Paligo logo. To swap it for your own logo, use the Logotype setting in the Layout you use for publishing.

In Paligo:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select CSS, JS, logos and other assets in the sidebar.

  4. In the Logotype setting, select the Upload button.

  5. Drag-and-drop your logo image file into the upload box.

    Paligo uploads your image. It is given a new name (a number) and a reference is added to the Logotype setting.

  6. Select Save.

You have now uploaded the logo image to the Layout. When you publish (next stage of tutorial), Paligo will use your logo instead of the Paligo logo.

Next: Upload your CSS and Republish.

Change Welcome Text

The HTML Help center's portal page has a welcome message at the top. By default, it is "How can we help you today?", but you can use javascript to change it to any text you like.

The following code shows the javascript you can use. We have included an example of a translation as well, in this case, Japanese, so that you can see how it can be handled for other languages. For each language you want to use, add another language line and text.

  1. Use a third-party code or text editor to create or update a JavaScript (JS) file.

    For example, mycustomscript.js.

  2. Add the following code to your JavaScript file:

    $(document).ready(function () {
        setWelcomeText();
        $(document).ajaxComplete(function () {
        setWelcomeText();
        });
    });
     
    function setWelcomeText(){
        for (var key in welcomeTextDict) {
            var element = $("header.portal-header[data-portal-language=" + key +"] h1");
            element.text(welcomeTextDict[key])
        }
    }
    var welcomeTextDict = { "en" : "Text displayed in English",
                            "ja" : "Text displayed in Japanese"};
  3. The only parts you need to change are at the end of the script:

    • The "en" : "Text displayed in English" part defines the language (en) and then the text that will be used for that langage. So change "Text displayed in English" to the text you want your English language version of the portal page to use, for example, "Welcome to ACME Help".

    • The "ja" : "Text displayed in Japanese" is an example of the code you need for translations. For each language, add the HTML language code and then the text you want to use. For example, if you wanted a French version, you would add "fr" : "Bienvenue à l'aide d'acme"

      Note

      Note that the }; goes after the last translation and is not needed for each line.

  4. Save your JS file.

  5. Upload Customized JavaScript.

Style Welcome Text

You can use CSS to change the styling of the main "How can we help you today?" heading on your HTML5 help center's portal page. For example, you can change the font, the font size, and the color.

Heading with different font, font size, and color.

Here, we will cover some of the main attributes that you can change for the heading. But there are many more, including margins. If you want to make changes that are not covered here, we recommend that you use the browser's inspection tools to find the heading classes and experiment with changing the attributes and values.

Portal Heading Color

To change the portal heading color:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-header h1 {
    color: #ff8c00;
    }

    Where #ff8c00 is the HTML code for the color you want to use. In this example, we have used the code for dark orange.

  3. Save your CSS file.

  4. Upload Customized CSS

Portal Heading Font

You can use CSS to change the font that is used for the "How can we help you today?" heading on the help center portal page.

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-header h1 {
    font-family:"Times New Roman", Times, serif;
    }

    Where "Times New Roman", Times, serif is the definition for the font you want to use. In this example, we have used Times New Roman, with Times used if Times New Roman is unavailable, and a serif font as a fallback option.

  3. Save your CSS file.

  4. Upload Customized CSS.

Portal Heading Font Size

You can use CSS to change the size of the "How can we help you today?" heading on the help center portal page.

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    @media (min-width: 768px).portal-header h1 {
    font-size: 60px;
    }
     
    .portal-header h1 {
    font-size: 30px;
    }

    The first CSS class uses a media query. In this case, if the content is viewed on a display that is 768 pixels or more, the portal-header h1 will use a font size of 60px.

    The second CSS class defines the size for the portal-header h1 class if the page is viewed on a display that is less than 768 pixels. In this case, it will use a font size of 30px.

    Replace the font size values with the sizes you want to use.

  3. Save your CSS file.

  4. Upload Customized CSS.

Style Background

The HTML5 help center has a background photo with a blue overlay by default. You can use CSS to change these by uploading a different image and applying a different overlay color.

You can change the image, change the overlay color, or both. If you prefer, you can remove the background image completely.

Tip

There are several images included in the theme and you can find them in the css/image folder of your published output. You can upload these images to the layout to try them out, or you can upload your own images.

Portal Background Image

You can use the HTML5 help center layout to change the background image that is shown in the top section of the HTML5 help center portal page.

To the left - The default HTML5 Help Center with a blue overlay color. To the right - A customize portal page with a gray overlay color.

To change the portal background image:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select CSS, JS, logos and other assets in the sidebar.

  4. Select Upload in Help Center Portal Page Background Image.

    Paligo will upload the image file and assign a filename.

  5. Drag and drop the image file that you want to use into the dialog.

  6. Select Save.

When you use this layout to publish your content, the help center will use the image you uploaded.

Portal Background Image Color

The HTML5 help center has a background image in the top section and there is also a semi-transparent colored overlay. The overlay is blue by default, but you can use CSS to change it to any color.

To change the portal overlay color:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-header::before {
      background-color: #555; 
    }
  3. Replace #555 with the HTML code for the color you want to use.

    If you want to use a gradient, that's possible too. But in that case, use "background" instead of "background-color":

    .portal-header::before {
       background: linear-gradient(to right , rgb(0, 104, 191) 8% , rgb(33, 150, 243) 50% , rgb(100, 66, 255) 95%);
    }

    You can easily generate the gradient code with an online generator, for example, this one.

  4. Save your CSS file.

  5. Upload Customized CSS.

Remove the Portal Background Image

If you want your help center portal to have no background image, you can remove it with CSS. The section will then use an overlay color only.

To change the portal overlay color:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-header::after{
      background: none;
    }
  3. Save your CSS file.

  4. Upload Customized CSS.

Style Search Box

You can use CSS to change the search bar colors on the HTML5 help center's portal page. By default, the search bar has a semi-transparent white background, with an orange search button and white search icon. But you can change them to any colors that you want.

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-header .search-field {
        background-color: rgba(195, 46, 46, 1);
    }
     
    .portal-header .portal-search button, .publication-contents h4 span {
        background-color: #00d3f5;
    }
     
    .portal-header .portal-search button {    
        color: #100000;
    }
  3. Replace the color values with the colors you want to use.

    • .portal-header .search-field is for the background of the search box.

    • .portal-header .portal-search button, .publication-contents h4 span is for the background color of the search box button (at the end of the search box)

    • .portal-header .portal-search button is for the color of the icon in the search box button.

    Note

    The background color for the search box button is also used for the number icons next to the topics that are listed in the bottom section of the portal page.

  4. Save your CSS file.

  5. Upload Customized CSS.

Disregard Portal Category and Promoted Content

By default, the HTML5 help center portal is divided in two sections:

  • Category Panels (1) generated for top-level topics or subpublications (publications nested inside a main publication) and topics with the role attribute set to category-panel, see Topics for Category Panels.

  • Featured Content (2) links generated for the first 4 top-level topics and topics with the role attribute set to promoted-content, see Topics for Featured Content.

By using the Disregard portal category and promoted content feature in the Layout Editor for HTML5 Help Center portals, you can make Paligo ignore topics set as category-panel or promoted-content with the role attribute. This can be useful if you reuse content with these attributes and find that you need these topics to show for one publication, but not for others.

1 = Category Panels, 2 = Featured Content links

Tip

It is possible to hide the Featured Content section from your portal page, see Remove Featured Content Section .

To make Paligo ignore topics set as category-panel or promoted-content:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Classes and attributes in the sidebar.

  4. Set Use the portal-category and promoted-content roles to:

    • Yes - Paligo will create extra category panels for topics with the role:portal-category attribute and value. It will also create extra links in the Featured Content section for any topics that have the role:promoted-content attribute and value.

    • No - Paligo will ignore role: portal-category and role: promoted-content attributes and values. When it generates a portal page, it will use the default settings for category panels and featured content.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  5. Select Save.

When you publish with this layout, Paligo will apply the settings you have chosen.

Breadcrumb Homepage Link

The HTML5 help center has a "breadcrumb" at the top of the page that shows the path from the home page to the currently displayed topic. Each part of the breadcrumb is a clickable link to that topic.

By default, the home link is named the same as your publication. If you select it, the Publication Topic is shown. You can make it display a different page of your choice (for example to return to the start page).

To change the breadcrumb homepage link:

  1. Use a third-party code or text editor to create or update a JavaScript (JS) file.

    For example, mycustomscript.js.

  2. Add the following code to your JavaScript file:

    $(document).ready(function () {
        $('.breadcrumb .breadcrumb-link:first-child a').attr('href', '/index.');
    });
    Note

    if you are editing a javascript file that you already use for Paligo publications, just add this line:

    $('.breadcrumb .breadcrumb-link:first-child a').attr('href', '/index.');

    It needs to be anywhere after the opening $(document).ready(function () { and before the }); in your script.

  3. Change the 'index.html' part to an absolute URL for the page that you want the breadcrumb link to go to. The URL needs to define the route from the server to the index.html file. As an example, the Paligo help center has this:

    $(document).ready(function () {
        $('.breadcrumb .breadcrumb-link:first-child a').attr('href', '/docs/index.html');
    });
  4. Save your JS file.

  5. Upload Customized JavaScript

When you publish with this layout, the custom javascript is included. In the published output, it will tell the browser to display the page you included in the javascript when the breadcrumb homepage link is selected.

Category Panel Section

The HTML5 help center portal page has "category panels" that link to topics or publications. By default, each category panel links to a top-level section or "subpublications" in your help center, and uses an icon from FontAwesome 4.6.3.

You can change the icons, change the color of the icons, and replace the icons with your own images. You can also choose which topics or "subpublications" have category panels.

Category panels links to subpublications or subsections.

Note

Paligo gives the first four category panels individual icons and any other panels are given the "document" icon. You can use CSS to change any of the icons.

Font Awesome Icons in Category Panel

Paligo adds individual icons to the first four category panels and then adds a "document" icon to any further panels.

You can use a CSS file to change the icons to any icons in Font Awesome 4.6.3. Icons that appear in later versions of FontAwesome may not work with Paligo content. If you want to change the color of the icons, see Color of Category Panels.

Tip

You can use javascript to replace the icons with your own images, see Replace Category Icons with Images.

  1. Use your Browser Inspection Tool to discover the class name of the category panel that you want to change.

    Each category panel has its own class name which Paligo designates based on the order of the panels. For example, the first category panel has the class name .cat-panel-1.

    Note

    If you are unfamiliar with CSS and using browser inspection tools, we recommend that you first look at Style with CSS.

    To learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

  2. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  3. Add the following code to your CSS file:

    .cat-panel-1:before{
        content: "\f29a"; 
    }
  4. Change .cat-panel-1 to the class name you discovered in step one, for example, .cat-panel-5:before.

  5. Replace "\f29a" with the icon code from Font Awesome 4.6.3.

    The "\f29a" is an icon code from Font Awesome.

    • The code must be inside quotation marks.

    • Remember to use a backslash as shown above.

    • Use a semi-colon ; after the closing quotation mark.

  6. Save your CSS file.

  7. Upload Customized CSS.

Font Awesome Icons Not Appearing in Category Panel

If your FontAwesome icons are not appearing in your Paligo output, make sure that:

  • You have followed the instructions for adding the icons carefully.

  • You have used icons that are included in FontAwesome 4.6.3. Icons from later versions of FontAwesome are not supported.

Note

If you are using icons from FontAwesome 4.6.3 and still have problems, contact customer support for assistance.

Color of Category Panels

By default, the background of the category panels is white, the icons are blue, and the text is dark gray.

You can use CSS to change the colors to suit your own requirements, for example, in the image shown, the panel backgrounds are gray, with red icons and text.

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-single-publication a {    
        color: #DC143C;
        background-color: #C0C0C0;
    }
     
    .portal-single-publication .publication-icon {
        background-color: #DC143C;
    }
  3. Replace the color values with the colors you want to use.

    • .portal-single-publication a is for styling the category panel .

      • color applies to the text. Replace #DC143C with the HTML color code to be used.

      • background-color applies to the panel background. Replace #C0C0C0 with the HTML color code to be used.

    • .portal-single-publication .publication-icon is for styling the icon. Replace #DC143C with the HTML color code to be used.

  4. Save your CSS file.

  5. Upload Customized CSS.

Replace Category Icons with Images

Paligo uses icons for each category panel shown on the HTML5 Help Center portal page. You can replace these icons with your own images available online (or on a local network if you publish offline). To find supported file formats, see the Mozilla website: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img.

There are no size limitations on the images. However, Paligo recommends that you:

  • Consider that larger files may result in longer page loading times.

  • Use images with the same dimensions.

Use JavaScript to instruct the browser to replace existing images with new ones:

  1. Use a third-party code or text editor to create or update a JavaScript (JS) file.

    For example, mycustomscript.js.

  2. Add the following code to your JavaScript file:

    $(document).ready(function() {
     
    var icon1 = "url of image 1";
    var icon2 = "url of image 2";
    var icon3 = "url of image 3";
     
    $(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");
    $(".cat-panel-2").closest("a").prepend("<img src='" + icon2 + "'></img>");
    $(".cat-panel-3").closest("a").prepend("<img src='" + icon3 + "'></img>");
     
    $(".publication-icon").remove();
     
    });
    Note

    The $(document).ready(function() {  at the start of the script and the }); at the end mark the start and end of the function.

    • If you are creating a new JS file, you need to include these.

    • If you are adding the script to an existing JS file, it will already have the ready function start and end in place, so do not include them. But make sure you add the rest of the code above the closing ]); in the script file.

  3. Replace the text inside the quotation marks with the URL of your image.

    The script declares variables called icon1, icon2, and icon3. Each variable is a reference to the image URL.

    If you want to include more, add a new line using the same syntax. For example, if you wanted four images, you would add var icon4 = "url of image 4"; where the URL is the actual address of the image file.

  4. If you added more image variables, you also need to add extra "cat-panel" references. There should be one for each variable, and they look like this:

     $(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");

    In the HTML structure of the help center's "portal" page, each category image is contained in a "cat-panel" section and these are numbered. So the line above works by telling the browser to find the "cat-panel" for category 1, and then find the anchor that comes before it.

    When the anchor is found, the browser adds an image element that references the icon1 variable that defines the location of the image.

    For each variable that you added to the script, add a new instruction line. For example, if you have four variables, add this line for the fourth variable:

     $(".cat-panel-4").closest("a").prepend("<img src='" + icon4 + "'></img>");
  5. Save your JavaScript file.

  6. Upload Customized JavaScript.

Topics for Category Panels

By default, the HTML5 help center has category panels for all top-level topics (or sub-publications if you publish a parent portal). But you can choose different topics if you prefer.

The HTML5 help center portal page can show up to 4 category panels when it first loads. There is a "Show All" link to reveal any further category panels.

To choose your own topics for the category panels:

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Select the section element in the Element Structure Menu.

  3. Select Go to element.

  4. Add the role attribute and give it the value: portal-category in the Element Attributes Panel

  5. Select Save.

  6. Repeat steps 1 to 4 inclusive for each topic that you want to be included as a category panel.

Remove the Category Panel Section

You can use CSS to remove the category section from the HTML5 help center portal page.

Note

This topic covers the category panel section only. For the featured content section, see Remove Featured Content Section.

To remove the Category Panel section from the portal page:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .portal-publications .inner-row {    
        display:none;
    }
     
    .show-all-category {
        display:none;
    }
    • .portal-publications .inner-row is the category panels section.

    • .show-all-category is the "show all" link that reveals category panels 5 and upwards.

  3. Save your CSS file.

  4. Upload Customized CSS.

Add External Link as Category Panel

It is possible to add a link to an external source (like API docs or a support page) and make it a category panel in the Category Panel Section.

There are two ways of doing this, you can add a topic to the publication and redirect via a server, or by using JavaScript to clone a category panel.

Tip

To change the tile icons, see Font Awesome Icons in Category Panel.

To use JavaScript to clone a category panel:

  1. Add this to your JavaScript file:

    $(document).ready(function(){
    // Panel position
    var position = 0;
    // Icon/image url
    var cloneIcon = "";
    // Link url
    var cloneLink = "";
    // Title text
    var cloneTitle = "";
     
     
    var $original = $('.portal-single-publication').eq(position);
    var $clone = $original.clone();
     
     
    $clone.children('a').first().attr('href', cloneLink);
    $clone.find('.cat-panel').first()
    .removeClass()
    .addClass('fa cat-panel')
    .closest('a')
    .prepend("<img src='" + cloneIcon + "'></img>")
    .find('.publication-icon')
    .remove();
     
     
    $clone.find('h3').text(cloneTitle);
    $original.after($clone);
    });
  2. Modify the following variables in the first couple lines of code: position=””, cloneIcon=””, cloneLine=”” and cloneTitle=”” .

    For example:

    var position = "3";
    var cloneIcon = "https://mycustomsite.com/icon.png";
    var cloneLink = "https://google.com";
    var cloneTitle = "Google Link";
  3. If you want the new category panel to always be last in the list, you can remove the position variable line (line 3) and change line 11 to:

    var $original = $('.portal-single-publication').last();
  4. Save your JavaScript file.

  5. Upload Customized JavaScript.

Disable Language Selection Page

For some HTML5 outputs, including classic and API, the first page users will see (the landing page) is a language selection page. This applies even if you only publish in one language. If you prefer, you can disable this feature so that the browser shows the documentation's "home" page instead.

To set your output to show the documentation "home" page instead of the language selection page:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General in the sidebar.

  4. Use the Skip Language selection page for Classic HTML5, Single Page, and API style outputs setting to control the language page.

    Set it to:

    • Enable - To set the browser to show the documentation "home" page instead of the language selection page.

    • Disable - To set the browser to show the language selection page.

  5. Select Save.

When you publish content using this layout, it is set up to use the landing page you have chosen. Depending on your choice in the layout, the first page the user sees will be either the language selection page or the documentation "home" page.

Enable or Disable Cookie Consent Popup

To make your website comply with global regulations regarding cookies, you should enable the Cookie consent popup in the Layout Editor. Your website visitors will then be welcomed with a cookie banner.

The are two different cookie banners to choose between:

  • Opt-out - This option offers the possibility to Decline or Allow cookies.

  • Info - This option only informs that the website use cookies.

Important

Paligo disclaims any responsibility for your output complying with cookie regulations, and it is up to you to ascertain that the output does not violate any cookie regulations or similar, with or without this popup enabled.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Analytics and other integrations in the sidebar.

  4. Select the cookie banner behavior in Use cookie consent popup:

    • Opt-out - This option offers the possibility to Decline or Allow cookies.

    • Info - This option only informs that the website use cookies.

    • Disable - Website visitors will not be informed about cookies. Default

  5. If you use the cookie consent popup, you must enter the URL to your Cookie policy.

  6. Select Save.

Override Cookie Consent Popup Configuration

To edit the Cookie Consent Popup message or translations, you have to override its configuration with a customized JavaScript file.

If adding translations, make sure to use the correct language code suffix. To learn more, see Create Additional Languages.

Important

If the HTML5 layout already uses a customized JavaScript file, you should add your changes to that file instead of creating a new one.

If you upload a new JavaScript file, the existing one will be replaced and you will lose the functionality in the old JavaScript file.

An example on how to edit the Cookie Consent Popup message and its translations:

  1. Use a text editor or code editor for creating (or updating) the JavaScript file.

  2. Use the following script as a starting point:

    const consentTranslations = new Map([
        ["en-GB", "Here, have some cookies"],
        ["en-US", "Howdy, have some cookies"],
        ["de-DE", "Hier, nimm einige Kekse"]
      ]);
     
    let $consentLang = portalLanguage || $('html').attr('xml:lang')
     
    var consentOverride = {
        content : {
            message: consentTranslations.get($consentLang)
        }
    }
    Tip

    For more configuration options, see JavaScript API.

  3. Edit the message and translations as needed.

  4. Save your JavaScript file making sure it has a .js filename extension.

  5. Upload Customized JavaScript.

Featured Content Section

The HTML help center has a "Featured Content" section that contains a list of links to important topics. By default, the listed topics are top-level and second-level topics in the structure of the publication, but if you prefer, you can select which topics to be included, see Topics for Featured Content.

With customized CSS you can change the fonts, colors and more, see Use Google Fonts, Color Featured Content Section, Topics for Featured Content and Remove Featured Content Section.

Color Featured Content Section

Add the color code for the changes you want to make. Note that in each case, you should replace the color code with the HTML color code to be used. We have used #DC143C as an example color. Also, remember to add the semi-colon after the code.

To change the colors used in the Featured Content Section:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. To change the color of the "Featured Content" heading, add:

    h5.featured-content-label {    
        color: #DC143C;
    }
  3. To change the color of the numbered topic headings and the listed topics, add:

    .publication-contents a {
        background-color: #DC143C;
    }
  4. To change the color of the icon next to the listed topics, add:

    .publication-contents li::before {
        color: #DC143C;
    }
    Note

    You can also set an opacity to make the colors more transparent. For example, opacity:0.15;

  5. Save your CSS file.

  6. Upload Customized CSS.

Remove Featured Content Section

You can use CSS to remove the Featured Content section of the help center portal page.

If you want to remove the featured content heading and list:

  1. Use a third-party code or text editor to create or update a CSS file.

    For example, mystyles.css.

  2. Add the following code to your CSS file:

    .featured-content-label {
        display:none;
    }
     
    .portal-contents featured-content {
        display:none;
    }
     
    .portal-contents .inner {
        display:none;
    }
    • .featured-content-label is the "Featured Content" heading.

    • .portal-contents featured-content is the section containing the list of topics.

    • .portal-contents .inner is the list of topics.

  3. Save your CSS file.

  4. Upload Customized CSS.

When you publish your help center and use this layout, your help center will not have the featured content section.

Feedback Section

For the HTML help center you can activate a "Feedback section" that shows a panel asking if they found the help page useful or not. The users vote with a Yes or No button. The buttons have unique ids so you can collect the data through an analytics tool.

To track the number of clicks on Yes or No, you can use the analytics tool of your choice. As an example, see this page for how to do this in Google Analytics Tag Manager: Google Analytics events.

Enable or Disable Feedback Section

For HTML5 Help Center outputs, you can add a feedback section at the bottom of each published topic. It is designed to encourage readers to score your content (positive or negative) and provide constructive criticism. This is valuable information as it lets you know which topics are successful and which ones are not meeting your users' needs.

Tip

To customize the feedback section, see Customize the Feedback Section.

To enable or disable the feedback section:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Feedback in the sidebar.

  4. Choose to include or exclude the voting panel (Yes and No buttons) in Use voting panel.

    • Enable - To include the voting panel at the bottom of your help pages.

    • Disable - To exclude the voting panel (or its title).

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  5. Choose whether you want to Allow users to submit feedback (suggest edits).

    • Enable - To include an email feedback link at the bottom of your help pages.

    • Disable - To exclude the email link.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  6. Use Toggle feedback with voting panel to control when the email feedback link is shown.

    • 'No' button only - The email feedback link is shown after the reader selects the No button.

    • Both 'Yes' and 'No' button - The email feedback link is shown after the reader selects the Yes or No button.

    • No toggle - always visible - The email feedback link is shown and is not dependent on the user selecting the Yes or No button.

    Note

    This setting only applies if you have set Allow users to submit feedback (suggest edits) to Enable.

  7. Enter the email address that will receive the feedback email from your readers in Email for feedback.

  8. Select Save.

When you publish your HTML5 help center using this layout, Paligo will apply the feedback panel settings you have chosen.

Customize the Feedback Section

You can Enable or Disable Feedback Section at the bottom of your HTML5 Help Center. It is designed to encourage your readers to rate your content and provide improvement suggestions.

By using JavaScript you can edit both the title (Was this helpful) and the feedback text (Would you like to provide feedback? Just click here to suggest edits). To be able to change both the text above and below the buttons at the same time, add both scripts to a single JavaScript file and upload it to your layout with the Layout Editor.

Note

Do not change the buttons text as these are translated into other languages automatically.

Edit the Feedback Title

You can customize the feedback section title (Was this helpful?) with JavaScript.

To change the feedback title:

  1. Use a third-party code or text editor to create or update a JavaScript (JS) file.

    For example, mycustomscript.js.

  2. Add the following code to your JavaScript file:

    /* Voting comment */
    $(document).ready(function () {
        var lang = $(document.documentElement).attr("lang");
        if (lang in voteDict) {
          var text = voteDict[lang];
          setVotingText(text);
          $(document).ajaxComplete(function () {
            setVotingText(text);
              });
          }
      });
      function setVotingText(text) {
        var element = $(".voting-title").text(text);
      }
      /* Change text here */
      var voteDict = {"en" : "Did you like this article?"};
  3. Replace "Did you like this article?" with the text you want.

    var voteDict = {"en" : "Did you like this article?"}; 

    For example, below we changed the text string to "Did you find this article helpful?"

    var voteDict = {"en" : "Did you find this article helpful?"};
  4. For each additional language, add the language code within quotes and the translated text also within quotes. Separate the languages with a comma.

    For example, below we added "de" for German and set the text to "Fanden Sie diesen Artikel hilfreich?".

    var voteDict = {"en" : "Did you find this article helpful?",
                            "de" : "Fanden Sie diesen Artikel hilfreich?"};
  5. Save your JS file.

  6. Upload Customized JavaScript

When you publish with the updated layout, Paligo will generate an HTML5 help center that uses your custom text for the feedback panel.

Edit the Feedback Text

The feedback text consists of a text (Would you like to provide and a email hyperlink with the text Would you like to provide feedback? Just click here to suggest editsbelow the feedback buttons:

  1. Use a third-party code or text editor to create or update a JavaScript (JS) file.

    For example, mycustomscript.js.

  2. Add the following code to your JavaScript file:

    /* FeedBack comment */
     
     $(document).ready(function () {
      var lang = $(document.documentElement).attr("lang");
      if (lang in feedbackLinkDict) {
        var text = feedbackLinkDict[lang];
        setLinkText(text);
        $(document).ajaxComplete(function () {
          setLinkText(text);
            });
        }
    });
     
    function setLinkText(text) {
      var element = $("div.toggle-feedback a").text(text);
    }
    /* Change text here */
    var feedbackLinkDict = {"en" : "Email your feedback"}; 
  3. Replace " Email your feedback" with the with the text you want.

    var feedbackLinkDict = {"en" : "Email your feedback"}; 

    For example, below we changed the text string to "Email suggestions to Paligo"

    var feedbackLinkDict = {"en" : "Email suggestions to Paligo"};
  4. For each additional language, add the language code within quotes and the translated text also within quotes. Separate the languages with a comma.

    For example, below we added "de" for German and set the text to "E-Mail-Vorschläge an Paligo?".

    var feedbackLinkDict = {"en" : "Email suggestions to Paligo",
                            "de" : "E-Mail-Vorschläge an Paligo"};
  5. Save your JS file.

  6. Upload Customized JavaScript

When you publish with the updated layout, Paligo will generate an HTML5 help center that uses your custom text for the feedback panel.

Note

Depending on how you set up your layout, the link text may only become visible after the reader has selected the Yes or No button, see Enable or Disable Feedback Section.

Themes for HTML5 Help Centers

The built-in help center templates give you a stylish, modern design that works straight out of the box. Each theme provides a different look and feel, and you can use your own custom CSS to change them to meet your requirements, see Upload Customized CSS.

These templates are based on the latest frameworks and are compatible with the popular Material Design framework, bootstrap and more. Ask Paligo support if you are interested in more extensive customizations, or modifying the HTML framework.

HTML5 Help Center theme 1

HTML5 Help Center theme 2

HTML5 Help Center theme 3

HTML5 Help Center theme 3b

In the Layout Editor you edit your HTML5 help center layout by selecting:

  • The theme from the sidebar option Help center theme options in the Layout Editor. To learn about layouts and how they are used when publishing content, see Layouts. It is divided in two parts:

    • Base theme for the style of the HTML5 help center. You can use themes 1, 2, 3, and 3b as they are or you can use your own custom CSS to change them.

      • Theme 0 - A "bare bones" theme that you can use as a template. With this theme, you will need to use a custom CSS stylesheet to define the positioning of the various sections, color schemes, etc.

      • Theme 1 - This has a blue and orange color scheme by default (can be overridden in CSS with any colors you choose). This theme has a typical help center look, and the inner content pages has the search field in the navigation sidebar.

      • Theme 2 - This has a gray and purple color scheme (can be overridden in CSS with any colors you choose). Is similar to theme 1, but with some variations on the portal page, and the inner content pages have the search field in the top banner instead of the navigation sidebar.

      • Theme 3 - This has a pink and light blue color scheme (can be overridden in CSS with any colors you choose). This theme has a body content panel with a box shadow look. This variant uses a pink and blue color scheme by default (completely customizable as all themes).

        Note

        Theme 3 has been deprecated. We recommend using Theme 3c instead.

      • Theme 3b - This has a green and turquoise color scheme (can be overridden in CSS with any colors you choose). The same as theme 3, with a slight color theme variation. If you like theme 3, and intend to customize the color scheme it does not matter if you choose theme 3 or 3b.

        Note

        Theme 3b has been deprecated. We recommend using Theme 3d instead.

    • Content theme provides the base styling for the main body content, such as the style for notes, text, and other elements, you have two themes to choose between.

  • Choose a different logo on the portal page than the main content pages in the sidebar option General in the Layout Editor.

  • Make the header "sticky" (always visible when you scroll down) in the sidebar option General in the Layout Editor.

  • Make the header full-width in the sidebar option General in the Layout Editor.

Table of Contents (HTML5)

For HTML5 output there are three types of table of contents (TOC) that you can combine:

  1. TOC sidebar - Positioned on the left side of the portal page is the main navigation and shows the publication content.

  2. Section TOC - Positioned at the bottom of each topic (called In this section) showing the subtopics outside the topic, see Enable Section TOC (HTML5).

    Another option is Automatic Links to Related Topics ("See also" sections) which appear in a "See also" section at the bottom of a topic.

  3. Page TOC - Positioned on the right side of each topic showing the subtopics inside the topic, see Enable Page TOC. It highlights the titles when you scroll through the topic.

Tip

The titleabbrev element is useful if you have long titles, but would prefer a shorter title in the table of contents (PDF), TOC sidebar (HTML5) and for cross-references, see Use Title Abbreviations.

Add External Link to TOC Sidebar

By adding a script to your JavaScript file, you can add an external link to the TOC Sidebar. In this instruction, a link pointing to "https://www.google.com" is added at the bottom of the TOC Sidebar.

Important

If the HTML5 layout already uses a customized JavaScript file, you should add your changes to that file instead of creating a new one.

If you upload a new JavaScript file, the existing one will be replaced and you will lose the functionality in the old JavaScript file.

To add an external link to your TOC sidebar:

  1. Use a text editor or code editor for creating (or updating) the JavaScript file.

  2. Use the following script as a starting point:

    $(document).ready(function () {
        /* Insert link in sidebar toc */
        var linktoGoogle = document.createElement("li")
        linktoGoogle.innerHTML = '<a href="https://www.google.com">Google</a>'
        var toclist = document.getElementsByClassName("nav-site-sidebar");
        toclist[0].appendChild(linktoGoogle)
     });
    Note

    If you have Ajax activated, use this script as starting point instead:

        $(document).ready(() => {
          dropdownText();
          $(document).ajaxComplete(() => {
            dropdownText();
          });
        });
     
        function dropdownText() {
          const dropdownPortal = document.getElementsByClassName('has-submenu')[0];
          dropdownPortal.innerHTML = '<span class="caret"></span>your text here<span class="sub-arrow"></span>';
          const dropdownTopic = document.getElementsByClassName('has-submenu')[1];
          dropdownTopic.innerHTML = '<span class="caret"></span>your text here<span class="sub-arrow"></span>';
        }
  3. Edit the link.

  4. Save your JavaScript file making sure it has a .js filename extension.

  5. Upload Customized JavaScript.

Collapsible TOC Sidebar (HTML5)

The HTML5 Help Center Layout has a Collapsible TOC feature that allows you to create an output with a collapsible TOC sidebar.

When this setting is enabled, Paligo produces a Help Center that has a "hamburger" menu. Users can select the menu to collapse and expand the left-side panel that contains the table of contents.

The Collapsible TOC feature is designed for HTML5 Help Centers that are set to use Theme 2 (see Themes for HTML5 Help Centers). If you are using a different theme, you may need to use custom CSS to change the styling, see Style with CSS.

"Hamburger" menu

Select the hamburger menu icon to collapse and expand the TOC sidebar.

To set up a collapsible TOC sidebar for HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Set Collapsible TOC to:

    • Enable to activate the Collapsible TOC feature

    • Disable to deactivate the Collapsible TOC feature

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  5. Select Save.

When you publish with this layout, Paligo will apply your selection to the output.

Control the TOC Collapse Behavior

Use the HTML5 Help Center Layout to control how the upper-level entries in your table of contents can be:

  • Expanded to reveal lower-level entries

  • Collapsed to hide the lower-level entries

By default, higher-level entries will expand when a user clicks on the chevron for the entry or the title of the entry. But it will only collapse again if the user selects the chevron.

If you prefer, you can set the higher-level entries to expand and collapse when a user selects the chevron or the title.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Use Collapse section in TOC when clicking on the link title to control the collapse behavior. Choose from:

    • Enable to set the TOC to expand and collapse when the user selects an entry title or chevron.

    • Disable to set the TOC to expand when the user selects a chevron or title, but collapse only when the chevron is selected. Selecting the title again will not collapse the TOC.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

  5. Select Save.

When you publish with this Layout, Paligo will apply the settings you chose.

Enable Page TOC

Add a page TOC (table of contents) to show each page's subheadings. It will highlight the headings when you scroll the topic. This feature is only available for HTML5 Help Center themes 1 and 2 (not the "Preloaded" version).

To avoid headings being repeated in both the TOC Sidebar and Page TOC, you should also enable 'Only include chunks in TOC' together with the Page TOC. This means that only topics that become chunks (according to your settings) will be included in the TOC sidebar. For example, internal section elements in a topic will not be included in the TOC sidebar, only in the Page TOC.

To enable Page TOC for HTML5:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Select Enable to activate Only include chunks in TOC.

    The nested topics or topic's subsections will be excluded from the TOC Sidebar. These will instead be included in the Page TOC.

    Default is disabled.

  5. Select Enable to activate Use page TOC.

    Default is disabled.

  6. Select Save.

Enable Section TOC (HTML5)

Paligo has a Section TOC feature for adding a table of contents (TOC) inside each topic. In HTML5 outputs, the TOC has a heading called "In this section" containing links to each subsection in the topic. The links are created and managed automatically by Paligo.

The following steps explain how to set up section TOCs for HTML5 outputs. They also explain how to hide the section TOC for specific topics, see Hide Section TOC Individually.

For instructions for PDF, see Set Up a Section TOC with Links to Subsections (PDF).

To set up section TOCS for HTML5:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Enable or disable the Section TOC feature:

    1. Select TOC and chunking in the sidebar.

    2. Set Use section TOC to:

      • After - Generates a hierarchical list of subtopics below the topic. Default

      • Before - Generates a hierarchical list of subtopics between the topic title and its first paragraph.

      • None - To turn off the section TOC.

  4. Select Save.

Hide Section TOC Individually

If you want to be able to hide the section TOC in certain topics, you can add a script to your CSS and add the role attribute with the value no-section-toc to those topics.

When you publish, the section TOC for the topics with the value no-section-toc is hidden, but shown for the rest of the topics.

  1. Add the following to your custom CSS file:

    .no-section-toc ~ .footer-content .section-toc
     {display: none;}
  2. Upload your custom CSS file to your Paligo layout, see Upload Customized CSS.

  3. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  4. Select the section in the Element Structure Menu and choose Go to element.

  5. Add the role attribute in the Element Attributes Panel.

  6. Set the value to no-section-toc.

  7. Select Save.

  8. Repeat step 3 to 7 for all topics that is to hide the section TOC.

Prevent Numbering (HTML5)

You can choose to have numbered headings, such as "1.2 Power up the device" in your HTML5 output.

Typically, you apply numbering to all sections (by enabling General > TOC and Chunking > Section Numbering in the Layout Editor) or not using numbered headings at all.

But there may be times when you need a mix of numbered headings and headings without numbering and for that, you can use the element attribute label with its value set to 0.

When you publish topics that use this element attribute, Paligo will not apply numbering to its heading, even if the publication is set to use numbered headings. The heading will appear as text-only, both in the topic itself and in the table of contents.

To prevent a topic from being auto-numbered:

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Select the section element in the Element Structure Menu.

  3. Select Go to element.

  4. Add the label attribute in the Element Attributes Panel.

    The 0 value instructs Paligo to avoid using numbering for this section.

  5. Set the value to 0.

  6. Select Save.

Note

To enable numbering again, remove the label attribute.

Include TOC or Load Standalone TOC

For your HTML and HTML5 outputs, the HTML files need to reference the publication's table of contents (TOC). There are two ways to handle this:

  • Include the TOC in each HTML file. This minimizes the use of JavaScript, but results in larger HTML files.

  • Have the TOC separated from the HTML files and use JavaScript to insert the TOC when each HTML page is displayed. This is more efficient, as the HTML files are smaller and so load more quickly, which is better for SEO (Search Engine Optimization).

To control how Paligo includes the TOC, use the Standalone TOC setting on HTML and HTML5 layouts:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Set Standalone TOC to either:

    • Enable - To use JavaScript to insert the TOC from a separate file. This is more efficient, as the HTML files are smaller and so load more quickly, which is better for SEO. Recommended

    • Disable - To include the TOC in each HTML in the HTML/HTML5 output. This minimizes the use of JavaScript, but results in larger HTML files.

    • Default to inherit the value for this setting from the base Layout. The base Layout is either a built-in Layout provided by Paligo or another custom Layout, see Layout Relationships - Base, New, Duplicate.

    Typically, it is better to enable the Standalone TOC feature, but in some cases, it can have undesired results. For example, if your help portal is configured to minimize the use of Javascript. It can also make your help port less "crawlable" by older search engine bots.

  5. Select Save.

When you publish, Paligo will apply your choice to the output.

Multi-Publication Portal

If you have many related publications, you might want to make them all available in the same HTML5 help center. With this approach, there is a home page (a portal) that provides links to each of your publications.

We call these portals "parent publications" and there are two ways to do it:

  • Manually create a portal page and then link your published Paligo outputs to it, with the search provided by a third-party system, such as SwiftType. Then to update the content, you publish each manual separately and set up the portal so that it has links going to each publication. The way to achieve this can vary, depending on what search engine you use and how you create the portal page. For example you can publish once, use the portal page created and then manually modify it to fit. We also offer professional services if you need help with this, contact support for more information.

  • Create a parent publication in Paligo, with the search being provided by Paligo's built-in search. Apply the layout settings and prerequisites for parent publications. Build the parent publication and then follow the steps for one of the publishing methods (Single Publish or Multiple Publish) that best suits your requirements. There are pros and cons to both methods. To decide which method is best for you, consider what you need from your content.

    Note

    The Paligo parent publication work well for a small number of publications. For more complex use cases, a manually created portal page might work better.

    If you find that your use case does not fit the Paligo parent publication, ask support about professional services for a custom solution.

Prerequisites for Parent Publications

When you create a parent publication, you use a layout to publish to HTML5. The layout needs to have certain settings in place, otherwise the parent publication portal will not work correctly.

Note

Algolia faceted search is not supported by the parent publication portals.

System Settings for Parent Publications

For parent publications, you need to have the Persistent image file names setting enabled in the system settings. This setting means that the image files will use a persistent ID for the file name which is better for consistency.

Note

To make changes to the system settings, use an Admin user account. Users with an Author user account can change the layout settings and complete all of the other steps needed to create a parent publication.

  1. Select the arrow to the right of your avatar in the top menu.

  2. Select Settings.

  3. Select the System Settings tab.

  4. Make sure you have Persistent image file names enabled.

Layout Settings for Parent Publications

To get Paligo to publish content for parent publication portals, you need an HTML5 layout that has certain settings enabled. Before you can adjust the layout settings, you have to Create a Layout.

Important

If you enable the layout option Only create topic for reused publications if no top-level topic (located under General) you must remember to link to a topic in the subpublication, not to the subpublication itself.

Apply the following settings to the layout:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select General.

  4. Select Enable for SEO-friendly output filenames.

    Important

    This setting must be enabled.

  5. Select Enable for Use a short and flat URL structure for output files (or Ajax-enabled if you use that).

  6. Select Enable for Use output filenames made from id and SEO name (a particular file naming for the HTML files).

  7. Select Enable for Multiple publication portal prefix if your subpublications contain further nested subpublications, reusing the same sub topics.

    When enabled, this setting adds the publication id to the start of the output filename. This means that each topic has a unique filename for the different subpublications, no matter how many levels of subpublications there are.

    Note

    Only enable Multiple publication portal prefix if you have multiple levels of nested subpublications.

    If you only have one level of subpublications (under the parent publication), make sure the setting is disabled.

  8. Select Enable for Use resource name instead of title for the HTML output file name if you use variables in your topic titles.

    This is because the parent publication depends on the file names being the same when you publish both the parent publication and the subpublications. With variables in the titles, the file names will be different, unless you enable Use resource name instead of title for the HTML output file name. When enabled, the topic names are used for the filenames instead of the titles.

  9. Select Enable for Create a title topic for reused publications.

    Important

    This setting needs to be enabled for the filtering to work for the parent publication.

  10. Select Help center theme options.

  11. Select Enable for Open portal category on first topic for nested publications.

  12. Select Enable for Treat nested subpublications as topicheads.

  13. Select Toc and Chunking.

  14. Select Disable for Standalone TOC if you are using the Multiple Publish method.

  15. Select Save.

Topic Requirements for Parent Publications

Before you publish your content to a parent publication portal, make sure that:

  • Subpublication topics do not use the element attribute role with the value portal-category. It is incompatible with parent publications that use the subpublications for categories.

  • The first topic in each subpublication does not use a variable in the title element. You can use variables in your subpublication topics, but not in the title of the first topic. This only applies if you are using the Multiple Publish method to create your help center portal.

Create a Parent Publication

If you have a series of publications that you want to release as one output, you can create a parent publication. This means that publications are added to a main publication. The reused publications become subpublications that appear as sections in the output (such as PDF or HTML5 help center). For the HTML5 help center output, the parent publication will become the portal that contains all subpublications.

Before you build the parent publication, you have to consider whether to use Single Publish or Multiple Publish.

Tip

There are layout settings that you can use to control how the top-level of a publication is presented in HTML5 outputs, see HTML5 Layout Editor Options.

You can use filters to hide a reused publication's topics in the output. For example, you may want to filter out introduction topics. To find out more about filtering topics, see Filtering / Profiling.

  1. Make sure that the Prerequisites for Parent Publications are in place.

  2. Create a Publication that will become the parent publication

  3. Select the publication in the Content Manager.

  4. Drag and drop the subpublications from Content Manager into the publication structure.

    Reused publications get a reuse symbol. To remove a subpublication, select the X to the right of it.

  5. Rearrange the topic position with the arrows or drag and drop it in the structure.

  6. Select Save to confirm the publication changes.

  7. Select the Dotted menu (...) for the parent publication in the Content Manager.

  8. Select Edit and choose Open in Editor.

  9. Select the article element in the Element Structure Menu and choose Go to element.

  10. Add the role attribute and set its value to multi-publication-portal in the Element Attributes Panel.

    Important

    You should only use the multi-publication-portal role on the the parent publication article element. Do not add it to the subpublications.

  11. Select Save.

Publish a Parent Publication

A parent publication is a main publication that consists of subpublications or a mix of topics and subpublications. This is used when wanting to have multiple publications in the same portal. There are two ways to publish a parent publication:

Single Publish

  • Publish once to create or update the entire help center.

  • Use cross-references between the subpublications.

  • Use the same Variables in Paligo and Filtering / Profiling.

    However, you can use Scoped Filtering to apply different filter values to the subpublication content.

  • Navigation menus include all subpublications, not just the one you are viewing.

Multiple Publish

  • Update each subpublication individually. First, you publish the parent publication without variables. Then publish each subpublication with individual settings.

  • Use different Variables in Paligo and Filtering / Profiling for each subpublication.

  • Navigation menus only include the subpublication you are viewing.

Note

With multiple publish you cannot use cross-references between the subpublications.

However, there is a workaround for cross-references that makes it possible, but it is only suitable if you have a low amount of cross-references.

The workaround is to publish the help center and make a note of the urls for the pages that will be linked to. Then, in Paligo, add external links to those urls instead of cross-references, and then re-publish.

Single Publish

The single publish method means that you publish the entire parent publication with all its subpublications at the same time. This means that you only publish once to create the finished help center.

If you instead want to publish the subpublications separately, see Multiple Publish.

To publish the entire parent publication with the same Variables in Paligo and Filtering / Profiling:

  1. Select the Dotted menu ( ... ) for the parent publication in the Content Manager.

  2. Select Publish.

  3. Select HTML5 and choose the layout that contains the appropriate settings for a help center portal.

    Note

    If you set any variables or profiling (filters) for the publication, they will apply to all topics in all of the subpublications. If you need to apply different filters to the subpublications, you can use scoped filtering or use the Multiple Publish to create the parent publication.

  4. Select Publish document.

    Your browser will download the zipped publication. It is stored in the folder your browser uses for downloads. Typically, this is the "Downloads" folder on your computer.

  5. Unzip the parent publication download and store it on the server or network that will host your help center.

  6. Open the index.html file in the output to launch your parent publication portal.

    Your parent publication now has a "portal" page with Category Panel Section for each subpublication. Users can select the panels to access the subpublications.

Tip

To find out about how to upload the content, see Upload Manually to Your Web Server and Upload Directly to a Web Server or Portal.

Multiple Publish

The multiple publish method is used if you want to use separate Variables in Paligo and Filtering / Profiling for each subpublication.

  • The parent publication is published without variables and filtering, see Publish without Variables and Filters. It will only be updated if topics are removed or added in the subpublications.

  • The subpublications are published with individual settings, see Publish Subpublications. The HTML files for each subpublication must be manually replaced in the parent publication output to complete your help center.

Tip

If you instead want to publish the entire parent publication with the same Variables in Paligo and Filtering / Profiling, see Single Publish.

Publish without Variables and Filters

To be able to use different Variables in Paligo and Filtering / Profiling for the subpublications, the parent publication must be published without Variables in Paligo and Filtering / Profiling.

Note

Once the parent publication is published, the only time you have to update it, is if topics have been added or removed from one of the subpublications.

Changes to existing topics only require an update of the affected subpublication.

To publish the entire parent publication without Variables in Paligo and Filtering / Profiling:

  1. Select the dotted menu (...) for the parent publication in the Content Manager.

  2. Select Publish.

  3. Select HTML5 and choose the layout that contains the appropriate settings for a help center portal.

    Important

    Do not set any Profiling attributes (filters) or variables.

  4. Select Publish document. Your browser will download the zipped publication.

    It is stored in the folder your browser uses for downloads. Typically, this is the "Downloads" folder on your computer.

Note

Now the subpublications are to be published with Variables in Paligo and Filtering / Profiling.

Publish Subpublications

Once the parent publication has been published without Variables in Paligo and Filtering / Profiling, each subpublication is published separately with individual settings.

To complete the update of your help center, the HTML files for each subpublication must be manually replaced in the parent publication output.

To publish a subpublication with Variables in Paligo and Filtering / Profiling:

  1. Expand the parent publication to reveal its Forks in the Content Manager.

    Forks are references between a publication and the content included in the publication.

  2. Select the dotted menu (... ) for one of the subpublication forks and choose Publish.

  3. Select HTML5 and choose the same layout that you used for the parent publication.

  4. Apply any Profiling attributes (filters) and variables that you want the subpublication to use.

    The filters and attributes will only apply to the selected subpublication. They will not affect the other subpublications in the help center.

  5. Select Publish document.

    Your browser will download the zipped publication. It is stored in the folder your browser uses for downloads. Typically, this is the "Downloads" folder on your computer.

  6. Move the downloaded zip files for the parent publication and the subpublication to a folder on the network or web server that will host your help center content.

    Note

    When you have moved the files, unzip them.

  7. Browse to the out > en folder in the subpublication output.

  8. Copy the HTML files with the subpublication's number.

    Important

    Do not copy toc-en.html, index-en.html or params.manifest.

  9. Browse to the out > en folder in the parent publication output.

  10. Manually remove the corresponding old HTML files for that subpublication to avoid getting stray HTML pages.

    Note

    The files that belong to the subpublication can be identified by the prefix in the filenames.

    For example 6081-6097-troubleshooting.html where 6081 is the subpublication prefix for ACME 100 User Guide.

  11. Paste the copied HTML files into the parent publication's out > en folder.

    Note

    The en folder is for English outputs.

    For outputs in other languages, there is a two character folder for that language instead, for example, "de" for German. To learn more, see Language Management.

  12. If the subpublication uses variable images:

    1. Browse to the out > en > Image folder.

    2. Copy the images.

    3. Paste them into the parent publication's out > en > Images folder.

  13. Repeat this procedure for each subpublication in the parent publication.

Top-Navigation for Help Centers

You can use the top-navigation feature to add a header to the top of your HTML5 Help Center outputs.

In the header, you can add quick links to important topics in your help center, such as "Getting Started", and you can also add links to external sites, such as your corporate website. You can choose to add links only to external sites, only to topics, or have a mix of both.

Note

The top-navigation links are only available in HTML5 Help Center outputs.

Enable Top-Navigation

You can use the top-navigation feature to add a header to the top of your HTML5 Help Center outputs.

In the above publication, "The Mission Control Center" has a link in the top-navigation header. The Top navigation depth is set to 3, which means that there is a sub-menu for topics two levels down from "The Mission Control Center". At level 2, there is "Command Center", "Guidance System", and "Ground Segment". At level 3, there is "Controls System" and "Control Room".

To enable top navigation in your HTML5 output:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Classes and attributes in the sidebar.

  4. Select Enable for Output taxonomies.

  5. Select Enable for Output 'role' attribute as class names.

  6. Select TOC and chunking in the sidebar.

  7. Select Enable for Top Navigation.

  8. Set the number of levels to show in Top navigation depth .

    • Set it to 1 to only include a link to one specific topic (parent topics).

    • Set it to 2 to include a link to the specific topic and subtopics (child topics).

    • Set it to 3 to also include links to "grandchild" topics".

  9. Select Save.

Enable Dual Top-Navigation Menus

With a customized JavaScript (JS) file, you can add a second drop-down menu in the top navigation for HTML5 output. This can be useful if you have several products with multiple versions of each product.

For this to work, it is required to create one layout per product. However, the same JS file (with a list of all the products) can be reused for all the layouts that share the same product selector. Each product's help centers will only show versions added to its layout, see Add Available Versions.

To prepare the JS file to create a second dropdown menu that changes depending on selected product:

  1. Use a code editor or text editor to create a JS file. Give it a name and save it with the .js extension.

    If you already use a custom JS for your layout, you should edit that JS file instead.

  2. Add the following template code to your JS file:

     $(document).ready(function () {
        // Create product dropdown using jQuery
        const productDropdown = $('<li class="product-dropdown">')
            .html(`
            <a><span class="caret"></span>Select product</a>
            <ul>
                // BEGIN - Add product versions
                <li><a href="#">Product A</a></li>
                <li><a href="#">Product B</a></li>
                <li><a href="#">Product C</a></li>
                // END - Add product versions
            </ul>
            `);
        
        // Select the right navbar
        const navbar = $('#navbar').last().children().first();
        const versionDropdown = navbar.children().first();
     
        // Placing productDropdown before versionDropdown
        versionDropdown.remove();
        navbar.append(productDropdown);
        navbar.append(versionDropdown);
     
        // SmartMenus jQuery initialization
        navbar.smartmenus();
    });
  3. Update Product A with a URL and a proper name.

    The following string is to be updated:

    <li><a href="#">Product A</a></li>

    with a URL and a proper product name, like this:

    <li><a href="https://mydomain.com/docs/myproduct">My product</a></li>
  4. Repeat this for Product B and C. Add or remove products if needed.

  5. Save your JS file.

  6. Upload your customized JS file to each layout that share the same product selector, see Upload Customized JavaScript.

Add Available Versions

To have the top-navigation showing available versions, you have to add them in the Help Center Theme Options in the Layout Editor.

To set a list of specific product versions in the version dropdown, you need separate layouts. You can reuse the same JS file for all the layouts that share the same product selector, see Enable Dual Top-Navigation Menus.

Important

To display the second top-navigation menu, you need to add at least one version in Versions for version dropdown in the Layout Editor.

If no versions have been added, it will not work to Enable Dual Top-Navigation Menus even if the JS file is uploaded.

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Help Center Theme Options in the sidebar.

  4. Enter available versions in Versions for version dropdown for this specific product.

    The text is the visible part in the dropdown. Divide the versions with semicolon. For example:

    text:4.0, url:https://mydomain.com/docs/rpa/4.0/;
    text:3.0, url:https://mydomain.com/docs/rpa/3.0/;
    text:2.0, url:https://mydomain.com/docs/rpa/2.0/;
    text:1.0, url:https://mydomain.com/docs/rpa/1.0/;

    Each version must be published. Version number and URLs must be added in this field.

  5. Select Save.

Tip

To show all product versions in the same top-navigation menu, the JS file is not needed and the the second top-navigation menu will not be used. This is only suitable if you have two or three products.

Add all versions to the same layout. Combine the version with the product name (for example "RPA 2.0" or "PD 3.0).

This field is found under Help Center theme options in the Layout Editor.

This approach results in a dropdown menu like this:

The dropdown will show all versions for all products.

Add Top-Navigation Links to External Sites

If you publish to HTML5 Help Center, you can add links to external websites at the top of the display. This is a good way to guide your customers to other web pages that they might need, such as the product pages on your website or a link to open a new ticket. You can also use the top-navigation header to show links to selected topics in your help center.

In the following image, the Top-Navigation for Help Centers has external links for "Technology Center" and "Staff Log In".

Tip

You can upload a customized Javascript file in the Layout Editor to add further functionality to the top navigation links, such as opening a widget to open a chat. For these links, add the link text, enter # as the URL, and then add code for opening a new ticket in your JavaScript.

To add external links, use a HTML5 Help Center Layout:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Set Top navigation to Enabled.

  5. Add the links to appear in the top-navigation in the External top navigation links like this:

    text:link text, url: address;
    • Link text is the text that will show in the top-navigation banner

    • Address is the URL of the webpage.

    Use a comma to separate the text part from the URL and end the link with a semicolon.

    To add links with different target language, specify the language at the start of the syntax. For this, use lang and the two-letter code for the language, for example:

    • lang:de, text:link text, url:acme.de;

    • lang:sv, text:link text, url:acme.se;

    • lang:fr, text:link text, url:acme.fr;

    Note

    Any links that do not have the lang attribute will appear for all languages.

  6. Enable Supported Translation Strings for automatic translation of your link texts (into supported languages) in Use translation strings for external top navigation link text.

    Select:

    • Enabled to use a translatable string as link text. Paligo will automatically translate your link texts into some supported languages.

    • Disabled if you do not use translatable strings for your top-navigation external links. Default

  7. Add your "translation string" links to the External top navigation links section.

    For example: text:LegalNotice, url:https://yourwebsite.com;

    Note

    If a term is not translated automatically for your language, please contact Paligo support and provide the translation. If the term is likely to be useful to many Paligo users, we may add it to the list of Supported Translation Strings.

  8. Select Save.

When you publish your help center using this Layout, the top-navigation header will be included and it will have the external links you provided.

Add Top-Navigation Links to Topics

If you are using an HTML5 Help Center Layout, you can enable the top-navigation header and add links to selected topics. This is a good way to direct customers to areas of your documentation that contain important information that is used frequently, or topics that need to stand out, such as a tutorial.

When you add a link to a topic, Paligo automatically detects if the topic has any "children" (i.e topics that are at a lower level in your publication). If there are "child" topics, Paligo creates a drop-down menu with links to them. In the image above, "The Mission Control Center" is the main topic for the link, and the drop-down menu has links for topics that are at level 2 In the publication ("Command Center", "Guidance System", and "Ground Segment", see the image below).

To add top-navigation links, set up your HTML5 help center layout so that it has the appropriate settings. Then you can add add the links to your topics. There are two ways you can add links - by using taxonomies or by using the role attribute.

Add Top-Navigation Links with Role Attribute

You can use the role attribute with the value set to top-nav-link to add a link to a topic in the Top-Navigation for Help Centers.

Note

For this to work, you have to Enable Top-Navigation.

Open the topic that you want to add as a link in the top-navigation header.

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Alternatively, you can Create a Topic and edit that.

  2. Select the section element in the Element Structure Menu.

  3. Select Go to element.

  4. Add the role attribute in the Element Attributes Panel and set the value to top-nav-link .

  5. Select Save.

  6. Repeat this procedure for each topic that you want to add to the top-navigation header.

  7. Publish your publication with the HTML5 Help Center Layout, see Base Layout Types for HTML and HTML5).

    Paligo creates your Help Center output and it includes the top-navigation header with links to your selected topics.

    Note

    If you have set the top-navigation header to include links to topics and external links, the topic links appear on the left side of the pipe character | and the external links appear on the right side.

Important

If a topic's section element has the role attribute set to "notintoc", it will prevent that topic from being included in a top-navigation menu. This is because the top-navigation is built using information from the table of contents (TOC), so anything that is missing from the TOC will also be missing from the top-navigation.

Add Top-Navigation Links with Taxonomy Tags

You can use taxonomy tags to mark the topics to be included in the Top-Navigation for Help Centers. This is an easy way of adding top-navigation links.

Note

For this to work, you have to Enable Top-Navigation.

To set up taxonomy links:

  1. Create Taxonomy Tags and name the parent tag to "Top navigation".

  2. Create a child tag (inside the parent tag) and name it: top-nav-link. This name is case-sensitive.

    Important

    Paligo will only be able to create the top-navigation links if you use a taxonomy tag named "top-nav-link". This tag must not be a top-level tag in the Taxonomies (which is why you have created two tags in this process).

  3. Drag the top-nav-link tag on to the topics that you want to have links in the top-navigation header.

  4. Select the top-nav-link tag to display a list of the topics it is associated with.

    Use the list to double-check that topics match those that you want in the top-navigation header.

    You can remove a taxonomy by clicking on the X icon in the Taxonomies column.

  5. Publish your publication with the HTML5 Help Center Layout, see Base Layout Types for HTML and HTML5).

    Paligo creates your Help Center output and it includes the top-navigation header with links to to those topics that have the "top-nav-link" taxonomy tag.

    Note

    If you have set the top-navigation header to include links to topics and external links, the topic links appear on the left side of the pipe character | and the external links appear on the right side.

Important

If a topic's section element has the role attribute set to "notintoc", it will prevent that topic from being included in a top-navigation menu. This is because the top-navigation is built using information from the table of contents (TOC), so anything that is missing from the TOC will also be missing from the top-navigation.

Hide Top-Navigation Links

By default, your Top-Navigation for Help Centers also appears in the TOC sidebar and the Category Panel Section on your portal page. If you prefer, you can hide them to only appear in the Top-Navigation for Help Centers. This is useful if you want content in the top-navigation to appear separate from the "main" content in your publication.

Depending on your requirements, you can choose where these links should appear:

For example, the official Paligo documentation has "What's new in Paligo?" and "Paligo Glossary" links in the top-navigation. This content is included in the publication, but you can only access it from the top-navigation menu, as we have hidden it from the TOC sidebar and Category Panel Section.

In the images shown, the Paligo Help Center has links that are only available from the top-navigation. You cannot find these links in the TOC sidebar or Category Panel Section.

To control where the links appear:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select TOC and chunking in the sidebar.

  4. Scroll to the Hide Top Navigation links from Category Panel setting.

  5. Choose:

  6. Scroll to the Hide Top Navigation link from TOC setting.

  7. Choose:

  8. Select Save.

Open Top-Navigation Links in the Same Tab

By default, top navigation links open in another browser tab or window. If you prefer to have the links to open in the same tab instead, you can set this up by using some custom javascript.

  1. Use a text editor to create a JS file.

    If you already have a custom JavaScript file that you upload to your layout, you can edit that instead.

  2. Add the following to the JS file:

    $(document).ready(function() { 
        $('.nav-class a[target="_blank"]').attr('target', '_self');
    });
    Note

    If you are adding the code to a custom javascript that you already use, you only need to add $('.nav-class a[target="_blank"]').attr('target', '_self');. Make sure to add it after the $(document).ready(function() { in the script and before the end script characters });

  3. Save your JS file.

  4. Upload Customized JavaScript.

Your custom JavaScript is stored in the Layout Editor. When you publish using this layout, the custom JavaScript file is added to the HTML output. When you browse your help center, the top navigation links will open in the same tab.

Supported Translation Strings

The table below shows examples of the translation strings supported by Paligo and useful for external links. These terms are translated into supported languages automatically by Paligo.

Translation String Identifier

English term shown in top-navigation

LegalNotice

Legal Notice

QandASet

Frequently asked questions

Qandadiv

Q&A

Notice

Notice

Reference

Reference

featured.content

Featured content

contact.support

Contact support

sign.up

Sign up

log.in

Log in

Example 98. How translation strings work

Imagine that you want to add a "Contact support" link to the top-navigation header that is to be published automatically to English and French.

  1. You set Top navigation to Enabled in the Layout Editor

  2. In the External top navigation links section, you add:

    text:contact.support, url:https://yourwebsite.com/contact;

    You use "contact.support" as it is one of the translation strings that are available in Paligo.

  3. You set Use translation strings for external top navigation link text to Enabled.

  4. When published to:

    • English, the link text added to your top-navigation header is Contact support

    • French, the link text added to your top-navigation header is Contactez le support

    The contact.support link is translated into French automatically, as you used a translation string.

Applicability Panels for Topic Categories

Applicability panels are sections that appear in a topic, usually at the top of your HTML5 output. The categories show whether the content in the topic applies to those categories.

For example, in the Paligo help, we have applicability panels in some topics to show that the information only applies to certain plans. To help you understand what a complete, working applicability panel JS file and CSS look like, see Example Applicability Panel JS and CSS.

However, you can use applicability panels for many different purposes, such as showing that a topic applies to a particular audience or particular models of a product.

An example on how an applicability panel can be used.

To create applicability panels for topics, there are four stages:

  1. Activate Output Taxonomies as Classes to be able to use Applicability Panels.

  2. Create Applicability Panel Categories to be applied to your topics.

  3. Add Applicability Panel to JS file to add a category list.

  4. Style Applicability Panel in CSS to style the category list.

  5. Apply Taxonomy Filter Tags.

Activate Output Taxonomies as Classes

Paligo can output taxonomies as classes in the HTML that is generated for your HTML5 outputs. These classes are needed for various taxonomy-related features, including applicability panels and taxonomy filters.

To set Paligo to output taxonomies as classes for HTML5:

  1. Select Layout in the top menu.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Classes and attributes in the sidebar.

  4. Set Output Taxonomies to Enable.

    This tells Paligo to include the taxonomy labels as class names in the HTML output.

  5. Select Save.

Create Applicability Panel Categories

To display the Applicability Panel for Paligo topics, you apply taxonomy tags created for this purpose.

These need to be organized into a hierarchy, where there is a "parent" tag (name of the applicability panel) and "child" tags for each category to appear in your applicability panel (Professional, Business and Enterprise).

In some Paligo help topics, you can see an applicability panel called Plan availability. For this we have a taxonomy hierarchy where:

  • Plan is the parent taxonomy tag in Paligo.

  • Business, Enterprise and Professional are the child tags (categories) that have been applied to the help topics.

Tip

You can check if a taxonomy tag has been applied to a topic in the Resource View, Taxonomies View, Content Manager and in the Metadata Panel in the Editor.

However, you can only create new taxonomies and organize the taxonomy tags in the Taxonomy Manager or Taxonomy Floating Content Panel.

To create an applicability panel taxonomy and apply the child tags to your content:

  1. In the Content Manager, expand the Taxonomy Manager section.

  2. Select the options menu ( ... ) for the top-level Taxonomies tag.

  3. Select Create taxonomy tag and then enter a name for the applicability panel (parent tag).

    In the image, "Plan" is the parent tag.

  4. Select the dotted menu ( ... ) for the parent tag, and then select Create taxonomy tag.

  5. Enter a name for the first category ("child" tag).

    The categories are shown in the applicability panel and will be applied to the topics.

  6. Repeat step 4 and 5 to add all categories for your applicability panel.

  7. Select the options menu ( ... ) for the top-level Taxonomies tag.

  8. Select the Floating Content Panel option to display the Taxonomy Floating Content Panel.

  9. Drag and drop the "child" tags from the Taxonomy Floating Content Panel onto the relevant topics in the Content Manager , see Apply Taxonomy Filter Tags.

Note

When you have added the taxonomy tags, the content is ready. The next step is to Add Applicability Panel to JS file.

Add Applicability Panel to JS file

To make the applicability panel work in your HTML5 output, you will need to add some custom JavaScript to your HTML5 layout.

The script will tell the browser to wait until the page has loaded, then run a function that adds a list of categories to the page. The categories have to match the names of the applicability panel taxonomy tags in Paligo.

Note

The JavaScript only adds a list with your categories. You will style it at a later stage, using CSS, see Style Applicability Panel in CSS.

To get an idea of what a working, customized script looks like, see Example Applicability Panel JS and CSS.

Important

If the HTML5 layout already uses a customized JavaScript file, you should add your changes to that file instead of creating a new one.

If you upload a new JavaScript file, the existing one will be replaced and you will lose the functionality in the old JavaScript file.

To create your JavaScript:

  1. Use a text editor or code editor for creating the JavaScript file.

  2. Use the following script as a starting point:

    $(document).ready(function () {
        addFunctionName();
        $(document).ajaxComplete(function () {
            addFunctionName();
        });
    });
     
    function addFunctionName () {
        if (! $("ul.listname").length) {
            var varforlist = '<ul class="listname">' +
            '<li class="parenttaxonomytag">Name of the applicability panel: </li>' +
            '<li class="childtaxonomytag1">Name of category 1</li>' +
            '<li class="childtaxonomytag2">Name of category 2</li>' +
            '<li class="childtaxonomytag3">Name of category 3</li>' +
            '<li class="childtaxonomytag4">Name of category 4</li>' +
            '</ul>';
            $(varforlist).insertAfter('#topic-content > .section > .titlepage');
        }
    }
  3. Change addFunctionName to a name that describes what your script is going to add (for example addAudienceList).

    You will need to change the addFunctionName in all three places where it occurs, and it must use the same name in each place.

    Example 99. Change it to addAudienceName

    If you change it to addAudienceName, you will have addAudienceName (); as line 2 and line 4, and function addAudienceName at the start of the function definition (second section of script).

  4. Change "ul.listname" and ul class="listname" to names that are more descriptive of your applicability panel list (for example, "ul.audiencelist" and ul class="audiencelist"). The names need to match.

  5. Change "varforlist" to a variable name that is more suited to your script (for example, "audiencetypelist").

    The name has to be the same in both places, so if you change varforlist where it is declared, you also need to change it in the reference in $(varforlist).insertAfter later in the script.

  6. Replace li class="parenttaxonomytag" with the name of your parent taxonomy tag in Paligo, see Create Applicability Panel Categories. This has to be an exact match.

  7. Replace Name of the applicability panel: with the title shown before the categories in HTML5, for example:

    '<li class="audience">Audience: </li>' +
  8. Replace "childtaxonomytag1" with the name of the first child taxonomy tag in Paligo, see Create Applicability Panel Categories. This has to be an exact match.

  9. Enter the category name (as it will appear in the applicability panel) between <li> and </li>, for example:

    '<li class="Novice">Novice</li>' +
  10. Repeat step 8 and 9 for each of the list items, matching the applicability panel categories in Paligo.

    Tip

    To add an extra list item, copy and paste an entire list item line, from the starting quote ' to the ending +

    To remove a list item, delete an entire list item line, from the starting quote ' to the ending +

  11. Save your JavaScript file making sure it has a .js filename extension.

  12. Upload Customized JavaScript.

Note

The next step is to customize your CSS for the applicability panel, see Style Applicability Panel in CSS.

Style Applicability Panel in CSS

As well as custom JavaScript, the applicability panel needs some custom CSS. The CSS styles are used to:

  • Apply the checkmark when the content in a topic applies to one or more of the applicability panel categories

  • Apply different styles when the content in a topic does not apply to the panel categories

  • Hide the applicability panel by default, so that it is only shown when topics have at least one of the applicability panel taxonomy tags.

Below, we have included the styling used for a gray applicability panel. You can change the styles to meet your own needs.

Important

If the HTML5 layout already uses a customized JavaScript file, you should add your changes to that file instead of creating a new one.

If you upload a new CSS file, the existing one will be replaced and you will lose the styling in the old CSS file.

Tip

If you prefer the white Paligo applicability panel, see Example Applicability Panel JS and CSS.

To create the custom CSS for an applicability panel:

  1. Use a text editor or code editor to create a custom CSS file.

  2. Define the selector and styling for the overall list.

    ul.listname has to match the ul class and listname that was used in your JavaScript, see Add Applicability Panel to JS file.

    ul.listname {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /*background-color: #333333;*/
        margin-bottom: 1em;
    }
    Note

    It is important that display:none; is included and the ul.listname matches the ul.listname in your JavaScript file.

    This is because this part of the script tells the applicability panel to be hidden by default.

  3. Define the styles for when the applicability panel should be shown.

    You need to have selectors for each taxonomy tag (category). These use the syntax .taxonomy-parent taxonomy tag-child taxonomy tag ul.listname,:

    You need a separate selector for each taxonomy tag (category).

    After the selectors, include display: inline-block; to tell the browser to show the applicability panel. Here, we have included border-radius to set rounded corners on the panel too.

    .taxonomy-parenttaxonomytag-childtaxonomytag1 ul.listname,
    .taxonomy-parenttaxonomytag-childtaxonomytag2 ul.listname,
    .taxonomy-parenttaxonomytag-childtaxonomytag3 ul.listname {
        display: inline-block;
        border-radius: 8px;
    }
  4. Define the styles for the list items.

    For the selector, replace ul.listname to match the ul class and listname that was used in your JavaScript (same as in step 2). Keep li after it.

    Below, we have included styles for the positioning, color, and alignment. You can change these styles to suit your requirements.

    ul.listname li {
        float: left;
        display: inline-block;
        color: #bbb;
        text-align: center;
        padding: 20px;
        background-color: #eee;
    }
  5. Define the styles for the label list item on the applicability panel.

    • For the selector, replace ul.listname to match the ul class and listname that was used in your JavaScript (same as in step 2).

    • Replace parenttaxonomytag with the name of your applicability panel used in your JavaScript.

    Below, we have given the label a color and font-weight, but you can add other styles too.

    ul.listname li.parenttaxonomytag {
        color: #444;
        font-weight: bold;
    }
  6. Define the styles for when the content does not apply to the categories.

    You need to consider the different possible combinations of tags and include selectors for each combination.

    For example, below we have styles for the possible combinations of three child taxonomy tags.

    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag1,
    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag2,
    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag3,
     
    .taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag2,
    .taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag3,
     
    .taxonomy-parenttaxonomytag-childtaxonomytag3 .childtaxonomytag3,
     
     {
        color: #444;
    }
    • We have only set a color for the category text, but you could apply other styles too if needed.

      Remember that these are the styles used when the content does not apply to these categories.

    • We have included selectors for three child taxonomy tags and their possible combinations.

      If you have more tags, you will need to add more lines for each tag and its combinations.

  7. Define the styles for when the content does apply to the categories.

    These styles work in the same way as in the previous step, where there is a selector for each possible combination of classes.

    But these selectors include :before, which adds styling before the category text. In this case, we have used CSS and a reference to FontAwesome to add a checkmark.

    You can apply different styling if you prefer. But you have to use the taxonomy-parent-child syntax, use selectors that match the names in your JavaScript, and include :before.

    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag1:before,
    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag2:before,
    .taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag3:before,
     
    .taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag2:before,
    .taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag3:before,
     
    .taxonomy-parenttaxonomytag-childtaxonomytag3 .childtaxonomytag3:before,{
        content: '\f00c';
        font-family: FontAwesome;
        margin-right: 0.5em;
        color: #1976d2;
    }
  8. Save your CSS with a .css file extension and Upload Customized CSS to your HTML5 layout.

Example Applicability Panel JS and CSS

To show you what the JS and CSS look like for a working applicability panel, we have included the script and CSS that we use in the Paligo help. We use these to produce the price plan applicability panel that is shown on certain pages.

The pricing plan (called Plan) used in the Paligo Documentation have the following applicability panel categories:

  • Professional

  • Business

  • Enterprise

The JavaScript we use for the applicability panel is:

function addPricePlan() {
	if (!$("ul.priceplan").length) {
		var priceplanlist = '<ul class="priceplan">' +
			'<li class="planlabel">Plan availability: </li>' +
			'<li class="professional">Professional</li>' +
			'<li class="business">Business</li>' +
			'<li class="enterprise">Enterprise</li>' +
			'</ul>';
		$(priceplanlist).insertAfter('#topic-content > .section > .titlepage');
	}
}
Note

Note that where the function name is changed, it is changed everywhere in the script. The same applies for the variable name and list name too.

This CSS is slightly modified to work outside Paligo:

ul.priceplan{
    /* Add your values here */
    --padding:8px;
    --border-radius:8px;
    --box-shadow:2px 2px 2px 2px black;
    --clr-accent:blue;
    --clr-text:black; 
    --clr-border:grey; 
 
    display:none;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    margin-bottom:1em;
    box-shadow: var(--box-shadow);
    width:100%
}
ul.priceplan li{
    color:var(--clr-text);
    text-align:left;
    padding:var(--padding);
    border-bottom:1px solid var(--clr-border);
    display:block
}
.taxonomy-plan-small-team ul.priceplan,
.taxonomy-plan-professional ul.priceplan,
.taxonomy-plan-business ul.priceplan,
.taxonomy-plan-enterprise ul.priceplan{
    display:inline-block;
    border-radius:var(--border-radius)
}
@media(min-width:768px){
    ul.priceplan{
        width:unset
    }
    ul.priceplan li{
        border-bottom:none;
        display:inline-block
    }
    ul.priceplan li:not(:first-of-type){
        border-left:1px solid var(--clr-border)
    }
}
ul.priceplan li.planlabel{
    color:var(--clr-text);
    font-weight:700
}
.taxonomy-plan-small-team .smallteam,
.taxonomy-plan-small-team .professional,
.taxonomy-plan-small-team .business,
.taxonomy-plan-small-team .enterprise,
.taxonomy-plan-professional .professional,
.taxonomy-plan-professional .business,
.taxonomy-plan-professional .enterprise,
.taxonomy-plan-business .business,
.taxonomy-plan-business .enterprise,
.taxonomy-plan-enterprise .enterprise{
    color:var(--clr-text);
}
.taxonomy-plan-small-team .smallteam:before,
.taxonomy-plan-small-team .professional:before,
.taxonomy-plan-small-team .business:before,
.taxonomy-plan-small-team .enterprise:before,
.taxonomy-plan-professional .professional:before,
.taxonomy-plan-professional .business:before,
.taxonomy-plan-professional .enterprise:before,
.taxonomy-plan-business .business:before,
.taxonomy-plan-business .enterprise:before,
.taxonomy-plan-enterprise .enterprise:before{
    content:"\f00c";
    font-family:FontAwesome;
    margin-right:.5em;
    color:var(--clr-accent);
}
Note

Note how the selector names match the class names used in the JavaScript and that there are selectors to cover every possible combination of taxonomy tags.