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.
The tree of items you can choose to style in the Layout Editor is divided into a number of 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.
|
Category |
Description |
|
|---|---|---|
|
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 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 |
|
|
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 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:
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:
and
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. |
|
|
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. NoteOnly for global tags. Specific meta tags can be added directly in your topic. Meta keyword tags can be added through a If you use the Default: Disabled |
|
|
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 it's child topics should be reused. |
|
|
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 |
|
|
Format output |
Usually not required, but if desired, HTML Tidy will be applied on the output to ensure strict XHTML format. |
|
|
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 |
Will be used for copyright label if added, e.g in the Help Center output. |
|
|
Copyright year |
Only add this if you do not want the current year automatically used, which is the default. Note that if you have a copyright element inside the publication, that will override this. |
|
|
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 |
If you add an empty pubdate element in your publication, and add a date format here, today's date will be added to your output in the index-en.html file (or equivalent for other languages). 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. |
|
|
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). |
|
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. NoteThis 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. |
|
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:
|
|
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. |
|
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 For details, see Upload a Robots.txt File. |
|
Create sitemap |
If you want a sitemap.xml file for SEO and search engine crawling, enable this option. Note: to use this option, you also need to provide the destination domain below. Default: disabled |
|
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: |
|
Add canonical URL link |
Use this option if you need to:
For details, see Enable Canonical URL Link. |
|
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 |
|
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. |
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. |
|
|
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 level 1-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 NoteIf 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 |
|
|
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. |
|
|
Use H1 headings for topic chunks |
Use to control whether topic headings:
For details, see Use H1 Headings (HTML). Default: Publication hierarchy. |
|
|
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. NoteIf 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 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 |
|
|
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 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 Default: Disabled |
|
|
Use section numbering |
If you want section numbering in your HTML5 output, enable this option. Default: Disabled |
|
|
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 |
|
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.
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. |
|
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 |
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 |
If enabled, the language attribute |
|
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. |
|
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. 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 |
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 |
|
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. NoteIf 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 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. |
|
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 Styling 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 Styling 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. Default: ':s', which produces a format like 'Example 5: "My Title"'. |
|
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. |
|
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. |
In the Layout Editor there are some layout options for cross-references. 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 PDF or HTML output:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Cross-references in the sidebar.
-
In Enable cross-reference auto-title customization select:
-
Enable to activate auto-title customization.
-
Disable to deactivate the possibility to customize auto-titles. Default
-
-
Add keywords in Cross-reference auto-title to customize cross-references for topics.
Default is
title page. -
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. -
Add keywords in Cross-reference auto-title for appendices to customize the cross-references for appendices.
Default is
label title page. -
Enter a character (or a combination of characters) in Cross-reference label / title separator to customize the separator.
Default is
:swhich adds a colon and a space between the label and title. -
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.
-
-
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.
-
-
Set Use angle bracket delimiters around email to:
-
Enable to use delimiters around email addresses. Default
-
Disable if delimiters are not be used.
-
-
Select Save.
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):
-
label
-
title
-
page (only for PDF output)
Example 71. 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 |
|
Table 3 |
Complete label name and number. |
|
|
Table |
Only the label name. |
|
|
|
3 |
Only the label number. |
|
|
title |
|
My Topic Title |
Title without quotes. |
|
|
"My Topic Title" |
Title in quotes. |
|
|
page |
unspecified |
[12] |
Standard page citation if no value is given for the page component. |
|
|
(page 12) |
Page number in parentheses. |
|
|
|
, 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 12 |
Capitalized page label. |
|
|
|
(p. 12) |
Abbreviated label in parentheses. |
|
|
|
, 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. |
|
|
|
12 |
Only the page number. |
|
|
|
Turn off the page number for the cross-reference. |
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.
For HTML5 Help Centers, Paligo supports:
-
Built-in search engines
-
Linguistic Search (this is enabled by default)
-
Fuzzy Matching Search
The two built-in searches (Linguistic and Fuzzy Matching) are basic search engines that are better suited to smaller projects, typically around 1000 printed pages of content or less. They are not suitable for larger projects as they will take too long to return results.
-
-
Third-Party search engines
-
Algolia (Business plan and up)
-
Coveo (Enterprise plan only)
-
Swiftype (all plans)
The Third-Party search engines (Algolia, Coveo, and Swiftype) offer more advanced features and require a subscription. They can provide fast results, even from larger projects, and they are more configurable. They also support advanced features that can really improve the user experience, such as federated search, faceted search, and synonyms.
-
To help you decide on the best search engine for your needs, we have included a search engine comparison.
Note
If you are on the Business plan or higher, and you want your Paligo content to use a different search engine, you can request a customization. For this, you should:
-
Provide support with details of the search engine you would like to use.
-
Request an estimate for adding the custom code for your selected search engine.
We will then investigate what work is required and provide you with an estimated cost of development. You can then decide whether you want to go ahead with the customization.
When you are setting up your HTML5 Help Center, you will need to choose which search engine to use. There are many factors that you should consider, including the size of your project, the needs of your users, and your preference of search engine service. Ultimately, a more advanced search gives you more control and delivers a better user experience, but there is an added cost.
The following table compares the various search engines supported by Paligo.
|
Feature |
Linguistic |
Fuzzy Match |
Algolia |
Coveo |
Swiftype |
|---|---|---|---|---|---|
|
Internet required |
No |
No |
Yes |
Yes |
Yes |
|
Speed |
Fast for small-medium |
Fast for small |
Fast for all |
Fast for all |
Fast for all |
|
Matching |
Exact |
Broad |
Exact and broad |
Exact and broad |
Exact and broad |
|
Multiple languages |
Yes but limited |
Yes |
Yes |
Yes |
Yes |
|
Synonyms |
No |
No |
Yes |
Yes |
Yes |
|
Federated search |
No |
No |
No |
Yes |
Yes |
|
Faceted search |
No |
No |
Yes |
Yes |
No |
|
Modify search behavior |
No |
No |
Yes |
Yes |
Yes |
|
Push or crawl |
N/A |
N/A |
Push |
Crawl |
Crawl |
|
Search behind a login |
No |
No |
Yes |
Yes |
Yes |
|
Subscription required |
No |
No |
Yes |
Yes |
Yes |
Where:
-
Internet required shows whether the search engine only works when it can connect to your content over the internet.
-
Speed is how long it takes to return the search results. Small-medium is approximately the equivalent of a 1000 page document.
-
Matching is how the search engine matches results. .
-
Exact
A precise match. The search engine looks for content that contains the search term. It has to be an identical match.
-
Broad
A close match. The search engine looks for content that contains the search term or terms that are almost the same as the search term. This "looser" search allows for typing and spelling mistakes, but may return more results.
-
-
Multiple languages is support for other languages.
-
Synonyms shows whether the search engine can find content that has a similar meaning to the search term. For example, a search for "liquid" might include results that contain the term "fluid".
-
Federated search can find results from many different sources, not just 1 website (see Federated Search).
-
Faceted search provides filters so users can search for a term and apply certain criteria (see Faceted Search).
-
Modify search behavior is whether the search engines have options for controlling search results, such as "prioritization", "IA analysis" and "most-clicked".
-
Push or crawl defines how the search engine finds the results.
-
Push
Paligo has to send the index to the search engine. The search engine then browses the index to find the results.
-
Crawl
The search engine browses the published Paligo content to find the results.
-
-
Search behind a login is support for searching through content that requires a login to access.
-
Subscription required shows whether you need to purchase a subscription to a Third-Party search engine service.
When you have decided on which search engine best meets your requirements, you can:
-
Purchase a subscription to a search engine service (if you choose to use one).
-
Set up your HTML5 Help Center Layout to use your chosen search engine. If you are using a search engine service, you will also need to configure the settings in the search engine software.
See Set your Help Center to use a Search Engine for more information.
When you have decided on which search engine you will use, you need to Paligo to use it. Select one of the following links for instructions:
Linguistic Search is one of the built-in search engines and is best suited to small projects. It provides a basic, JavaScript-based search that returns exact matches as results. You can set up Linguistic Search in an HTML5 Help Center Layout.
Note
If you are not sure if Linguistic Search is suitable for your Help Center, see Search Engine Comparison.
To set up Linguistic Search:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the HTML5 Help Center Layout that you are going to use for publishing your Help Center.
Alternatively, create a new HTML5 Help Center.
-
Select Search engine.
-
Make sure the following settings are in place:
-
Use Algolia Search
Set to Default or Disable.
-
Use Algolia DocSearch option
Set to Default or Disable.
-
Use Coveo search engine
Set to Default or Disable.
-
Use Elastic Site Search.
Clear the field.
-
Use Fuzzy Search
Set to Default or Disable.
-
-
Select Save.
When you publish your content with this Layout, Paligo will set the HTML5 Help Center to use the Linguistic Search.
The Linguistic Search works like this:
-
You enter a search term, for example, "liquid".
-
The search engine searches the Help Center for topics that contain "liquid".
-
The search engine presents the results. These are topics that contain "liquid" in the heading or body text. The topics with the highest number of "liquid" usually appear as the top results.
Fuzzy Matching Search is one of the built-in search engines and is best suited to small projects. It provides a basic, JavaScript-based search that returns close matches as results. You can set up Fuzzy Matching Search in an HTML5 Help Center Layout.
Note
If you are not sure if Fuzzy Matching Search is suitable for your Help Center, see Search Engine Comparison.
To set up Fuzzy Matching Search:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the HTML5 Help Center Layout that you are going to use for publishing your Help Center.
Alternatively, create a new HTML5 Help Center.
-
Select Search engine.
-
Make sure the following settings are in place:
-
Use Algolia Search
Set to Default or Disable.
-
Use Algolia DocSearch option
Set to Default or Disable.
-
Use Coveo search engine
Set to Default or Disable.
-
Use Elastic Site Search.
Clear the field.
-
Use Fuzzy Search
Set to Enable.
-
-
Set the Fuzzy Search Threshold.
This is an amount that defines how strict the matching is. You can enter any value between 0.1 and 1.0, where:
-
0.1 is an exact match (the same as Linguistic Search)
-
0.9 is the least strict match, which is the most forgiving of typing errors.
The default setting is 0.3.
-
-
Select Save.
When you publish your content with this Layout, Paligo will set the HTML5 Help Center to use the Fuzzy Matching Search.
The Fuzzy Matching Search works like this:
-
You enter a search term, for example, "liquid".
You intend to search for "liquid" but you mistype the search term and instead enter "liqid"
-
The search engine searches the Help Center for topics that contain words that are similar to "liqid".
-
The search engine presents the results. "liqid" (hopefully none, unless you have made the spelling mistake in your content). and words with similar characters to "liquid" in the heading or body text. The topics with the highest number of "liquid" usually appear as the top results.
If you also made the spelling mistake in your content, the search engine will find the instances of "liqid". It will also find topics that contain the correct spelling "liquid" and also any similar spelling mistakes, for example, "liqwid" or "licquid".
Note
Fuzzy Matching search provides results based on a close match to the search term.
Faceted search gives users the ability to apply extra conditions to the search. A common example is on shopping sites, where you can search for an item, let's say "t-shirt" and then apply additional filters, such as size, color, and style. This means they can find the answers they need more quickly, as they can narrow down their search to only include results that are relevant.
With technical documentation, there are many uses for faceted search. You could use it to filter a search by product name, type, or other characteristics such as version number or operating system.
To set up your Paligo HTML5 Help Center to use faceted search, you will need to use a search engine service, either:
-
Algolia
-
Coveo
You will also need to set up your Paligo content to use taxonomies. The taxonomies will need to be applied in a certain way, as described in the following sections:
With federated search, you can find results from multiple sources rather than just one. To the end user, it looks like they are searching in one large source, but in fact they are searching across multiple sources. This is often how large enterprise websites work, such as the leading online shopping sites.
For example, lets say you have three different products ("Acme A", "Acme B", and "Acme C"). You publish an HTML5 Help Center for each product to a different URL. By using federated search, you can let users search all three sites. So if a user is looking at content in the "Acme C" site, they can do a search and get results from the "Acme A" and "Acme B" websites as well as "Acme C".
Federated search means you can provide your users with information from many sources, rather than just one. To the end user, the search looks like it all takes place in one place.
To set up federated search for your Paligo content, you will need to sign up for the Coveo or Swiftype search engine service. When you have a subscription, you can set them up to work with Paligo.
For details, see:
Paligo provides several different themes that you can use for your HTML5 help center. Each theme provides a different look and feel, and you can use your own custom CSS to change them to meet your requirements. There are also themes for the content too, and these set the default styling for the content, such as notes and other elements.
You select the themes on the layout for your HTML5 help center. They are in the Help Center themes options category, and there is a Base theme for choosing the style of the HTML5 help center and a Content theme for choosing the style of the content.
There are several base themes to choose from, including:
-
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 - 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 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).
-
Theme 3b - The same as theme 3, with a slight color theme variation. If you like theme 3, and intend to customize the color scheme it doesn't matter if you choose theme 3 or 3b.
You can use themes 1, 2, 3, and 3b as they are or you can use your own custom CSS to change them.
For the Content Themes, you can choose from Theme 1 or Theme 2.
To find out about uploading custom CSS files to your HTML5 layout, see Style with CSS.
To learn about layouts and how they are used when publishing content, see Layouts.
Paligo has a Copy to Clipboard feature that you can use with your code samples.
When the feature is enabled, a copy button appears for each programlisting element, and your readers can use it to copy the code sample inside the element to their computer's clipboard. This makes it easier for your readers to use the exact code from your samples as a starting point for their own programs.
Copy button for all programlisting elements.
To enable or disable the copy code feature:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Analytics and other integrations in the sidebar.
-
Disable Enable MathJax equation rendering.
-
Select Verbatim (code and software) in the sidebar.
-
Use the Add copy to clipboard button to all programlistings to control whether the copy button is included:
-
Set it to 1 to include the copy button for every
programlistingelement in your HTML5 output. -
Set it to 0 or default if you do not want to include it.
-
-
Select Save.
When you publish your content using this layout, the programlistings will have a copy button if you chose to enable the feature.
To connect Google Analytics to your HTML5 output:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Analytics and other integrations in the left menu.
-
Add your property id in Google Analytics property id (tracking id) or container id.
-
Select a tracking code in Google tracking code type from the menu.
-
Google Tag Manager
-
Global Site Tag (gtag.js) Default
-
Analytics.js
-
-
Select Save.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select General in the sidebar.
-
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.
-
-
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.
Discover how to add canonical URL links to pages in your HTML5 outputs in Paligo.
Reused content can confuse search engines, as they see the same, or similar, content at different addresses (URLs). This can have a negative effect on SEO (Search Engine Optimization).
To solve this issue, you can set Paligo to add a canonical URL link to each page in your HTML5 help. This tells the search engines that each page should be indexed as a unique page, even though the content on it may be the same as on other pages.
Important
If you enable Ajax loading in the layout, the canonical URL link feature may not work.
This is because Ajax loading removes the <head> element from the HTML. The canonical URL link is added to the <head> section.
To set Paligo to add a canonical URL link:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select CSS, JS, logos and other assets in the sidebar.
-
Set Add canonical URL link to:
-
Enable - Paligo will add a canonical URL link to every HTML page in the output. Where
langis the language andrelative-page urlis the relative address of the page (for example "en/getting-started.html").The canonical URL link uses this format:
destination.domain + lang + '/' + relative-page url
-
Enable (Promote destination path as canonical) - This works in the same way as Enable except that Paligo will also remove the
index.htmlpart of the URL for the Help portal page (index.html) -
Disable - Paligo will not add a canonical URL link to any page.
-
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. To find out more, see Layout Relationships - Base, New, Duplicate.
-
-
Select Save.
When you publish with this layout, Paligo applies the canonical URL setting to your output.
If you enabled canonical URLs, the canonical link will appear in the <head> section of the HTML.
Learn how to add extra-responsive features to all tables or individual tables.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Table Styles in the sidebar.
-
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
roleattribute to specify which tables should use the extra responsive features, see Apply Column Filter and Sticky Header.
-
-
Select Save.
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:
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Position the cursor inside the table.
-
Select the
tableelement in the Element Structure Menu and choose Go to element. -
Add the
roleattribute in the Element Attributes Panel and set the value toextra-responsive.Important
If there are images in your table, select the
imagedataelement for each image and make sure that it does not have awidthattribute in the Element Attributes Panel.If there is a
widthattribute, delete it. This is because some extra-responsive table features cannot work correctly if images have a fixed width. -
Select Save.
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.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Analytics and other integrations in the sidebar.
-
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
-
-
If you use the cookie consent popup, you must enter the URL to your Cookie policy.
-
Select Save.
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.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Universal Access in the sidebar.
-
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
h3element for admonition titles with thestrongelement, 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
-
-
-
Select Save.
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.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Search Engine in the sidebar.
-
Disable Use Algolia Search.
-
Select General in the sidebar.
-
Select Enable to activate Ajax load content.
-
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.
Note
In this article, we use the term "info elements" to refer to all of the elements that can be inserted inside an info element. These include copyright, edition, volumenum, author, and abstract (see Supported Info Elements).
By default, Paligo only includes some of the info elements in your HTML5 outputs. If there are other info elements that you want to be available, you can set Paligo to add them as hidden content in a footer. You can then use 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.
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.
To include info elements as hidden elements in the HTML:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select General in the sidebar.
-
Set Output info elements to:
-
Enable - To set Paligo to include the
infoelements as hidden content in the HTML. By default, it will include allinfoelements. -
Disable - To prevent Paligo from including the
infoelements in the HTML. - <listitem>
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. To find out more, see Layout Relationships - Base, New, Duplicate.
</listitem>
-
-
If there are certain
infoelements that you do not want to include, enter their names in the Output info elements filter field.Use a semi-colon to separate each
infoelement, for example:authorgroup;releaseinfo;
Paligo will exclude any info element that you have listed in the field.
-
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.
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.
The Minify assets feature is disabled by default, but you can enable it on the HTML layout.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select CSS, JS, logos and other assets in the sidebar.
-
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
-
-
Select Save.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Search Engine in the sidebar.
-
Disable Use Algolia Search.
-
Make sure that the Use Elastic Site Search field is empty (blank):
-
Select Analytics and other integrations in the sidebar.
-
Disable Use cookie consent popup.
-
Disable Enable MathJax equation rendering.
-
Select Verbatim (code and software) in the sidebar.
-
Disable Highlight verbatim elements.
-
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.
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:
-
Create a
robots.txtfile in a third-party application. You must name the file robots.txt. -
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select CSS, JS, logos and other assets in the sidebar.
-
Select Upload in the Add a robots.txt file section.
-
Drag and drop your
robots.txtfile onto the upload dialog. -
Select Save.
When you use this layout to publish content, Paligo includes the robots.file in the output .zip file.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select TOC and chunking in the sidebar.
-
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. To find out more, see Layout Relationships - Base, New, Duplicate.
Typically, it is better to use the Top-level or Chunk options for SEO purposes.
-
-
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 72. 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 73. 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 74. 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.
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.
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.
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.
-
Create a new topic or open an existing topic.
-
Select the top section in the Element Structure Menu and choose Go to element.
-
Add the attribute
Rolein Element Attributes Panel. -
Add the value
start-page. -
Select Save.
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.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select General.
-
Scroll down to Choose start page by role for HTML5 Help Center.
-
Select Enabled from the menu.
-
Select Save.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select CSS, JS, logos and other assets in the sidebar.
-
In the Logotype setting, select the Upload button.
-
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.
-
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.
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.
-
Use a third-party code or text editor to create or update a JavaScript (JS) file.
For example,
mycustomscript.js. -
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"}; -
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"
-
-
Save your JS file.
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.
To change the portal heading color:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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.
-
Save your CSS file.
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.
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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.
-
Save your CSS file.
You can use CSS to change the size of the "How can we help you today?" heading on the help center portal page.
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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.
-
Save your CSS file.
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.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select CSS, JS, logos and other assets in the sidebar.
-
Select Upload in Help Center Portal Page Background Image.
Paligo will upload the image file and assign a filename.
-
Drag and drop the image file that you want to use into the dialog.
-
Select Save.
When you use this layout to publish your content, the help center will use the image you uploaded.
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:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
Add the following code to your CSS file:
.portal-header::before { background-color: #555; } -
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.
-
Save your CSS file.
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:
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.
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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; } -
Replace the color values with the colors you want to use.
-
.portal-header .search-fieldis for the background of the search box. -
.portal-header .portal-search button, .publication-contents h4 spanis for the background color of the search box button (at the end of the search box) -
.portal-header .portal-search buttonis for the color of the icon in the search box button.
-
-
Save your CSS file.
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.
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.
-
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.
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
Add the following code to your CSS file:
.cat-panel-1:before{ content: "\f29a"; } -
Change
.cat-panel-1to the class name you discovered in step one, for example,.cat-panel-5:before. -
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.
-
-
Save your CSS file.
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.
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.
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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; } -
Replace the color values with the colors you want to use.
-
.portal-single-publication ais for styling the category panel .-
colorapplies to the text. Replace#DC143Cwith the HTML color code to be used. -
background-colorapplies to the panel background. Replace#C0C0C0with the HTML color code to be used.
-
-
.portal-single-publication .publication-iconis for styling the icon. Replace#DC143Cwith the HTML color code to be used.
-
-
Save your CSS file.
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:
-
Use a third-party code or text editor to create or update a JavaScript (JS) file.
For example,
mycustomscript.js. -
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.
-
-
Replace the text inside the quotation marks with the URL of your image.
The script declares variables called
icon1,icon2, andicon3. 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. -
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
icon1variable 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>"); -
Save your JavaScript file.
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:
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Select the
sectionelement in the Element Structure Menu. -
Select Go to element.
-
Add the
roleattribute and give it the value:portal-categoryin the Element Attributes Panel -
Select Save.
-
Repeat steps 1 to 4 inclusive for each topic that you want to be included as a category panel.
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:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
Add the following code to your CSS file:
.portal-publications .inner-row { display:none; } .show-all-category { display:none; }-
.portal-publications .inner-rowis the category panels section. -
.show-all-categoryis the "show all" link that reveals category panels 5 and upwards.
-
-
Save your CSS file.
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:
-
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); }); -
Modify the following variables in the first couple lines of code:
position=””,cloneIcon=””,cloneLine=””andcloneTitle=””.For example:
var position = "3"; var cloneIcon = "https://mycustomsite.com/icon.png"; var cloneLink = "https://google.com"; var cloneTitle = "Google Link";
-
If you want the new category panel to always be last in the list, you can remove the
positionvariable line (line 3) and change line 11 to:var $original = $('.portal-single-publication').last(); -
Save your JavaScript file.
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.
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:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
To change the color of the "Featured Content" heading, add:
h5.featured-content-label { color: #DC143C; } -
To change the color of the numbered topic headings and the listed topics, add:
.publication-contents a { background-color: #DC143C; } -
To change the color of the icon next to the listed topics, add:
.publication-contents li::before { color: #DC143C; } -
Save your CSS file.
The HTML5 help center portal page has a "featured content" section and you can control which topics appear there. You do this by adding the role attribute and promoted-content value to:
-
The
sectionelement for regular topics -
The
articleelement for publication topics.This is useful if you have set up a "parent publication" and want your subpublications to appear in the "featured content" section.
To enable Output role attribute as class names in your HTML5 help center layout:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Classes and attributes in the sidebar.
-
Select Enable for Output 'role' attribute as class names.
-
Select Save.
To add regular topics as featured content:
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Select the
sectionelement in the Element Structure Menu. -
Select Go to element.
-
Add the
roleattribute in the Element Attributes Panel and give it the valuepromoted-content. -
Select Save.
-
Repeat these steps to add more topics in the featured content section.
To set a sub-publication as featured content:
-
Select the top
articleelement in the Element Structure Menu and choose Go to element. -
Add the
roleattribute in the Element Attributes Panel and give it the valuepromoted-content. -
Select Save.
-
Repeat these steps to add more subpublications to the 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:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css. -
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-labelis the "Featured Content" heading. -
.portal-contents featured-contentis the section containing the list of topics. -
.portal-contents .inneris the list of topics.
-
-
Save your CSS file.
When you publish your help center and use this layout, your help center will not have the featured content section.
Learn how to set Paligo to ignore topics that have the role:portal-category or role:promoted-content when it generates the HTML5 Help portal page.
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
roleattribute set tocategory-panel, see Topics for Category Panels. -
Featured Content (2) links generated for the first 4 top-level topics and topics with the
roleattribute set topromoted-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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Classes and attributes in the sidebar.
-
Set Use the portal-category and promoted-content roles to:
-
Yes - Paligo will create extra category panels for topics with the
role:portal-categoryattribute and value. It will also create extra links in the Featured Content section for any topics that have therole:promoted-contentattribute and value. -
No - Paligo will ignore
role: portal-categoryandrole: promoted-contentattributes 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. To find out more, see Layout Relationships - Base, New, Duplicate.
-
-
Select Save.
When you publish with this layout, Paligo will apply the settings you have chosen.
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.
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.
By default, the feedback section has:
-
Feedback Title (Was this helpful?) - A text message that you can use to encourage people to respond. To customize the title, see Edit the Feedback Title.
-
Voting Panel (Yes and No voting buttons) - Each button has a unique ID that makes it possible to track votes by using a third-party analytics application.
-
Feedback comment and email link (Would you like to provide feedback? Just click here to suggest edits) - To get constructive feedback, rather than just statistics on the content's success, you can include an email link. When a user selects the link, the browser opens an email client and can then send a message. To customize the feedback text, see Edit the Feedback Text.
Tip
To customize the feedback section, see Customize the Feedback Section.
To enable or disable the feedback section:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Feedback in the sidebar.
-
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. To find out more, see Layout Relationships - Base, New, Duplicate.
-
-
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. To find out more, see Layout Relationships - Base, New, Duplicate.
-
-
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.
-
-
Enter the email address that will receive the feedback email from your readers in Email for feedback.
-
Select Save.
When you publish your HTML5 help center using this layout, Paligo will apply the feedback panel settings you have chosen.
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 default, the feedback section has:
-
Feedback Title (Was this helpful?) - A text message that you can use to encourage people to respond. To customize the title, see Edit the Feedback Title.
-
Voting Panel (Yes and No voting buttons) - Each button has a unique ID that makes it possible to track votes by using a third-party analytics application.
-
Feedback comment and email link (Would you like to provide feedback? Just click here to suggest edits) - To get constructive feedback, rather than just statistics on the content's success, you can include an email link. When a user selects the link, the browser opens an email client and can then send a message. To customize the feedback text, see Edit the Feedback Text.
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.
You can customize the feedback section title (Was this helpful?) with JavaScript.
To change the feedback title:
-
Use a third-party code or text editor to create or update a JavaScript (JS) file.
For example,
mycustomscript.js. -
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?"}; -
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?"}; -
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?"}; -
Save your JS file.
When you publish with the updated layout, Paligo will generate an HTML5 help center that uses your custom text for the feedback panel.
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:
-
Use a third-party code or text editor to create or update a JavaScript (JS) file.
For example,
mycustomscript.js. -
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"}; -
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"}; -
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"}; -
Save your JS file.
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.
For HTML5 output there are three types of table of contents (TOC) that you can combine:
-
TOC sidebar - Positioned on the left side of the portal page is the main navigation and shows the publication content.
-
Section TOC - Positioned at the bottom of each topic (called In this section) showing the subtopics outside the topic, see Enable Section TOC.
-
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), contents bar (HTML5) and for cross-references, see Use Title Abbreviations.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select TOC and chunking in the sidebar.
-
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.
-
Select Enable to activate Use page TOC.
Default is disabled.
-
Select Save.
The setting Use section TOC in the Layout Editor is enabled by default for HTML5 output. It provides each topic with a table of contents (called In this section) that shows its subtopics.
If you want to be able to hide it in some topics, see Hide Section TOC Individually.
To enable or disable the use of section TOC:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select TOC and chunking in the sidebar.
-
Scroll down to Use section TOC.
-
Select one of the three options from the menu:
-
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.
-
-
Select Save.
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.
-
Add the following to your custom CSS file:
.no-section-toc ~ .footer-content .section-toc {display: none;} -
Upload your custom CSS file to your Paligo layout, see Upload Customized CSS.
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Select the
sectionin the Element Structure Menu and choose Go to element. -
Add the
roleattribute in the Element Attributes Panel. -
Set the value to
no-section-toc. -
Select Save.
-
Repeat step 3 to 7 for all topics that is to hide the section TOC.
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:
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Select the
sectionelement in the Element Structure Menu. -
Select Go to element.
-
Add the label attribute in the Element Attributes Panel.
The 0 value instructs Paligo to avoid using numbering for this section.
-
Set the value to 0.
-
Select Save.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select TOC and chunking in the sidebar.
-
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. To find out more, 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.
-
-
Select Save.
When you publish, Paligo will apply your choice to the output.
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.
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.
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.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select General.
-
Select Enable for
SEO-friendly output filenames. -
Select Enable for
Use a short and flat URL structure for output files(or Ajax-enabled if you use that). -
Select Enable for
Use output filenames made from id and SEO name(a particular file naming for the HTML files). -
Select Enable for
Multiple publication portal prefixif 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.
-
Select Enable for
Use resource name instead of title for the HTML output file nameif 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.
-
Select Enable for
Create a title topic for reused publications. -
Select Help center theme options.
-
Select Enable for
Open portal category on first topic for nested publications. -
Select Toc and Chunking.
-
Select Disable for
Standalone TOC. -
Select Save.
Before you publish your content to a parent publication portal, make sure that:
-
Subpublication topics do not use the element attribute
rolewith the valueportal-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
titleelement. You can use variables in your subpublication topics, but not in thetitleof the first topic. This only applies if you are using the Multiple Publish method to create your help center portal.
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.
-
Make sure that the Prerequisites for Parent Publications are in place.
-
Create a Publication that will become the parent publication
-
Select the publication in the Content Manager.
-
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.
-
Rearrange the topic position with the arrows or drag and drop it in the structure.
-
Select Save to confirm the publication changes.
-
Select the Dotted menu (...) for the parent publication in the Content Manager.
-
Select Edit and choose Open in Editor.
-
Select the
articleelement in the Element Structure Menu and choose Go to element. -
Add the
roleattribute and set its value tomulti-publication-portalin the Element Attributes Panel. -
Select Save.
The single publish method means that you publish the entire parent publication with all its subpublications at the same time. Meaning that you only publish once to create the finished help center.
If you instead want to publish the subpublications separately, see Multiple Publish.
Here are the pros and cons with this method:
|
+ |
Only need to publish once to update the entire help center. |
|
+ |
Can use cross-references between subpublications. Note that links between subpublications will not work if you publish a subpublication separately to the rest of the help center. |
|
- |
Cannot use different variables for each subpublication. You can only set variables for the parent publication. |
|
- |
Cannot use different filters for each subpublication. You can only set filters for the parent publication. However, you can use scoped filtering to apply different filter values to the subpublication content. |
|
- |
Subpublication navigation menus include all subpublications, not just the one you are viewing. |
Tip
To find out how to publish, see Publish to Your Help Desk Portal.
-
Select the Dotted menu ( ... ) for the parent publication in the Content Manager.
-
Select Publish.
-
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.
-
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.
-
Unzip the parent publication download and store it on the server or network that will host your help center.
-
Open the
index.htmlfile in the output to launch your parent publication portalYour parent publication now has a "portal" page with category panels for each subpublication. Users can select the panels to access the subpublications.
The multiple publish method means that you publish each subpublication separately once you have published the parent publication. You move the HTML files from the subpublication outputs into the parent publication output to complete your help center.
If you instead want to publish the entire parent publication with all its subpublications, see Single Publish.
Here are the pros and cons with this method:
|
+ |
Can use different variables for each subpublication. |
|
+ |
Can use different filters for each subpublication. |
|
+ |
Subpublication navigation menus only include the subpublication you are viewing. |
|
- |
Cannot use cross-references between subpublications. There is a workaround 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 and make a note of the |
|
- |
Have to publish each subpublication separately. |
Note
To view the parent publication help center, open the Out > Index.html file in the parent publication.
-
Select the Dotted menu ( ... ) for the parent publication in the Content Manager.
-
Select Publish.
-
Select HTML5 and choose the layout that contains the appropriate settings for a help center portal.
-
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.
-
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.
-
Select the Dotted menu (... ) for one of the subpublication forks and choose Publish.
-
In the publishing settings:
-
Select HTML5 and choose the same layout that you used for the parent publication.
-
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.
-
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.
-
-
Repeat steps 6 and 7 for each subpublication in the parent publication.
-
Move the downloaded zip files for the parent publication and the supublications to a folder on the network or web server that will host your help center content. When you have moved the files, unzip them.
-
Browse to the out > en folder in one of the subpublications output.
-
Copy the HTML files.
Copy the HTML files from the subpublication's out > en folder.
-
Paste the HTML files into the parent publication's out > en folder. When prompted, choose to overwrite the existing files.
Paste the HTML files into the parent publication's out > en folder.
-
If the subpublication uses variable images:
-
Browse to the out > en > Image folder.
-
Copy the images.
-
Paste them into the parent publication's out > en > Images folder.
-
-
Repeat steps 10 to 13 for each subpublication.
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.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Classes and attributes in the sidebar.
-
Select Enable for Output taxonomies.
-
Select Enable for Output 'role' attribute as class names.
-
Select TOC and chunking in the sidebar.
-
Select Enable for Top Navigation.
-
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".
-
-
Select Save.
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:
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select TOC and chunking in the sidebar.
-
Set Top navigation to Enabled.
-
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
langand 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;
-
-
Enable 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
-
-
Add your "translation string" links to the External top navigation links section.
For example:
text:LegalNotice, url:https://yourwebsite.com; -
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.
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 |
|---|---|
|
|
Legal Notice |
|
|
Frequently asked questions |
|
|
Q&A |
|
|
Notice |
|
|
Reference |
|
|
Featured content |
|
|
Contact support |
|
|
Sign up |
|
|
Log in |
Example 75. 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.
-
You set Top navigation to Enabled in the Layout Editor
-
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.
-
You set Use translation strings for external top navigation link text to Enabled.
-
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.supportlink is translated into French automatically, as you used a translation string. -
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.
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.
Tip
You can also Add Top-Navigation Links to External Sites.
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.
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Select the
sectionelement in the Element Structure Menu. -
Select Go to element.
-
Add the
roleattribute in the Element Attributes Panel and set the value totop-nav-link. -
Select Save.
-
Repeat this procedure for each topic that you want to add to the top-navigation header.
-
Publish your publication with the HTML5 Help Center Layout, see Available Options for HTML and HTML5 Outputs).
Paligo creates your Help Center output and it includes the top-navigation header with links to your selected topics.
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:
-
Create Taxonomy Tags and name the parent tag to "Top navigation".
-
Create a child tag (inside the parent tag) and name it: top-nav-link. This name is case-sensitive.
-
Drag the
top-nav-linktag on to the topics that you want to have links in the top-navigation header. -
Select the
top-nav-linktag 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.
-
Publish your publication with the HTML5 Help Center Layout, see Available Options for HTML and HTML5 Outputs).
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.
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.
-
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.
-
Add the following to the JS file:
$(document).ready(function() { $('.nav-class a[target="_blank"]').attr('target', '_self'); }); -
Save your JS file.
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.
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:
-
Use a code editor or text editor to create a JS file. Give it a name and save it with the
.jsextension.If you already use a custom JS for your layout, you should edit that JS file instead.
-
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(); }); -
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>
-
Repeat this for Product B and C. Add or remove products if needed.
-
Save your JS file.
-
Upload your customized JS file to each layout that share the same product selector, see Upload Customized JavaScript.
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.
-
Select the Layout tab in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the layout to be updated or Create a Layout.
-
Select Help Center Theme Options in the sidebar.
-
Enter available versions in Versions for version dropdown for this specific product.
The
textis 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 URL:s must be added in this field.
-
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.
Applicability panels are sections that appear in a topic, usually at the top, and they have a series of categories. The categories show whether the content in the topic is applicable 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.
But 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.
To create applicability panels for topics, there are three stages:
To help you understand what a complete, working applicability panel script and CSS look like, we have included an Example Applicability Panel Script and CSS.
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:
-
Select Layout and then edit the HTML5 layout you are going to use for publishing. Alternatively, you can create a new HTML5 layout and edit that.
-
Select Classes and attributes.
-
Set Output Taxonomies to Enable.
This tells Paligo to include the taxonomy labels as class names in the HTML output.
-
Check the box Use gateway to enable IP Allowlisting. Optional
To mark up Paligo content to use an applicability panel, you will need to use taxonomy tags. These need to be organized into a hierarchy, where there is a "parent" tag and then "child" tags for each category you want to appear on your panel. For example, the availability plan panel you can see in some Paligo help topics uses this taxonomy hierarchy:
Here, "Plan" is the parent taxonomy tags and "Business", "Enterprise" and "Professional" are the child tags.
To create an applicability panel taxonomy and apply the tags to your content:
-
In the Content Manager, expand the Taxonomy Manager section.
-
Select the options menu ( ... ) for the top-level Taxonomies tag.
-
Select Create taxonomy tag and then enter a name for the new tag. This is going to be the parent tag in your applicability panel taxonomy hierarchy. For example, in the image shown, "Plan" is the parent tag.
-
Select the options menu ( ... ) for your parent tag, and then select Create taxonomy tag. Enter a name for a "child" taxonomy tag. This is going to represent one of the categories that is shown on the applicability panel.
-
Repeat step 4 to add all of the "child" taxonomy tags you need for your applicability panel.
-
Select the options menu ( ... ) for the top-level Taxonomies tag.
-
Select the Floating Content Panel option.
-
Add the "child" taxonomy tags to the relevant topics. To add the tags, find the topic in the Content Manager and then drag and drop the tag from the floating content panel onto the topic.
Tip
You can check to see if a taxonomy tag has been applied to a topic. Select the folder that contains the topic to display Resource View. That has a column that shows which taxonomy tags are in place for each topic in that folder.
When you have added the taxonomy tags, the content is ready. The next step is to create the javascript for the accessibility panel and add it to a layout.
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.
The JavaScript only adds a list. You will style it at a later stage, using CSS.
To create your JavaScript:
-
Use a text editor or code editor for creating the JavaScript.
-
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">Plan availability: </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'); } } -
Change
addFunctionNameto a function 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. For example, 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). -
Change "ul.listname" and ul class="listname" to class names that are more descriptive of your applicability panel list. For example, "ul.audiencelist" and ul class="audiencelist". The names need to match.
-
Change varforlist to a variable name that is more suited to your script. For example, audiencetypelist. The var 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.
-
For the first li class, change "parenttaxonomytag" to the name of your parent taxonomy tag in Paligo. This has to be an exact match. Enter the name for the category label after the li class and before the closing </li>, for example:
'<li class="audience">Audience: </li>' +
-
For the next list item, change "childtaxonomytag1" to the name of the first child taxonomy tag in Paligo. This has to be an exact match. Then, after the li but before the </li>, enter the name for the category as it will appear in the panel, for example:
'<li class="Novice">Novice</li>' +
-
Repeat step 7 for each of the list items, matching the class name to the taxonomy tag names in Paligo.
-
Save your JavaScript file making sure it has a .js filename extension.
-
Upload your JavaScript file to your HTML5 layout.
For instructions on how to upload a JS file to a layout, see Upload Customized JavaScript.
Note
If your HTML5 layout already has a custom JS file in place, you should add your script to that and upload the updated version to the layout. Alternatively, you could add the old script to your new script.
If you only upload your new script, you will lose the functionality that was in the old script.
The next step is to customize your CSS for the applicability panel (see Add Applicability Panel CSS to your HTML5 Layout).
Tip
To get an idea of what a working, customized script looks like, see Example Applicability Panel Script and 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.
To create the custom CSS for an applicability panel:
-
Use a text editor or code editor to create a custom CSS file.
-
Define the selector and styling for the overall list.
ul.listname { display: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; /*background-color: #333333;*/ margin-bottom: 1em; }Where ul.listname has to match the ul class and listname that was used in your JavaScript (in the if statement).
Here, we have included the styling that we use for the gray applicability panel in the Paligo help. You can change the styles to meet your own needs, but it is important that display:none; is included and the ul.listname matches the ul.listname in your script. This is because this part of the script tells the applicability panel to be hidden by default.
-
Define the styles for when the applicability panel should be shown. For these, you need to have selectors for each taxonomy tag. These use the syntax:
.taxonomy-parent taxonomy tag-child taxonomy tag ul.listname,
Where:
-
.taxonomy is always included
-
parent taxonomy tag is the name of the parent taxonomy tag in Paligo (for the applicability tags)
-
child taxonomy tag is the name of a child taxonomy tag in Paligo
-
ul.listname has to match the ul.listname used in your JavaScript (same as in step 2)
You need a separate selector for each taxonomy tag.
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; } -
-
Define the styles for the list items. For the selector, swap out ul.listname for the ul class name you included in your JavaScript (same as in step 2). Keep li after it.
Here, we have included styles for the positioning, color, alignment etc. You can change these styles to suit your own requirements.
ul.listname li { float: left; display: inline-block; color: #bbb; text-align: center; padding: 20px; background-color: #eee; } -
Define the styles for the label list item on the applicability panel. For the selector, replace ul.listname with the ul class name you used in your JavaScript (same as in step 2) and replace parenttaxonomytag with the class name that you gave to the parent tag list item in your JavaScript.
Here, 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; } -
Define the styles for when the content does not apply to the categories.
For these styles, you need to consider the different possible combinations of tags and include selectors for each combination. For example, here 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 is not applicable to these categories.
Here, 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.
-
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 check mark.
.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; }You can apply different styling if you prefer. But you must use the taxonomy-parent-child syntax, use selectors that match the names in your JavaScript, and include :before.
-
Save your CSS with a .css file extension and then upload it to your HTML5 layout.
To learn how to upload css files, see Style with CSS.
Tip
To get an idea of what a working CSS looks like, see Example Applicability Panel Script and CSS.
To show you what the script and CSS look like for a working applicability panel look like, 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 taxonomies we use for the pricing plan applicability panel in the Paligo help are:
-
Plan
-
Professional
-
Business
-
Enterprise
-
The JavaScript we use for the applicability panel is:
$(document).ready(function () {
addPricePlan();
$(document).ajaxComplete(function () {
addPricePlan();
});
});
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 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.
The CSS we use for the applicability panel is:
ul.priceplan {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/*background-color: #333333;*/
margin-bottom: 1em;
}
.taxonomy-plan-professional ul.priceplan,
.taxonomy-plan-business ul.priceplan,
.taxonomy-plan-enterprise ul.priceplan {
display: inline-block;
border-radius: 8px;
}
ul.priceplan li {
float: left;
display: inline-block;
color: #bbb;
text-align: center;
padding: 20px;
background-color: #eee;
}
ul.priceplan li.planlabel {
color: #444;
font-weight: bold;
}
.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: #444;
}
.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: 0.5em;
color: #1976d2;
}
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.
Comments
0 comments
Article is closed for comments.