Select Layout in the top menu.

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

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

Select Classes and attributes in the sidebar.

Set Output Taxonomies to Enable.

This tells Paligo to include the taxonomy labels as class names in the HTML output.

Select Save.

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 applicability panel (parent tag).

In the image, "Plan" is the parent tag.

Select the dotted menu ( ... ) for the parent tag, and then select Create taxonomy tag.

Enter a name for the first category ("child" tag).

The categories are shown in the applicability panel and will be applied to the topics.

Repeat step 4 and 5 to add all categories for your applicability panel.

Select the options menu ( ... ) for the top-level Taxonomies tag.

Select the Floating Content Panel option to display the Taxonomy Floating Content Panel.

Drag and drop the "child" tags from the Taxonomy Floating Content Panel onto the relevant topics in the Content Manager , see Apply Taxonomy Tags to Topics.

Use a text editor or code editor for creating the JavaScript file.

Use the following script as a starting point:

$(document).ready(function () {
    addFunctionName();
    $(document).ajaxComplete(function () {
        addFunctionName();
    });
});

function addFunctionName () {
    if (! $("ul.listname").length) {
        var varforlist = '<ul class="listname">' +
        '<li class="parenttaxonomytag">Name of the applicability panel: </li>' +
        '<li class="childtaxonomytag1">Name of category 1</li>' +
        '<li class="childtaxonomytag2">Name of category 2</li>' +
        '<li class="childtaxonomytag3">Name of category 3</li>' +
        '<li class="childtaxonomytag4">Name of category 4</li>' +
        '</ul>';
        $(varforlist).insertAfter('#topic-content > .section > .titlepage');
    }
}

Change addFunctionName to a name that describes what your script is going to add (for example addAudienceList).

You will need to change the addFunctionName in all three places where it occurs, and it must use the same name in each place.

Change "ul.listname" and ul class="listname" to names that are more descriptive of your applicability panel list (for example, "ul.audiencelist" and ul class="audiencelist"). The names need to match.

Change "varforlist" to a variable name that is more suited to your script (for example, "audiencetypelist").

The name has to be the same in both places, so if you change varforlist where it is declared, you also need to change it in the reference in $(varforlist).insertAfter later in the script.

Replace li class="parenttaxonomytag" with the name of your parent taxonomy tag in Paligo, see Create Applicability Panel Categories. This has to be an exact match.

Replace Name of the applicability panel: with the title shown before the categories in HTML5, for example:

'<li class="audience">Audience: </li>' +

Replace "childtaxonomytag1" with the name of the first child taxonomy tag in Paligo, see Create Applicability Panel Categories. This has to be an exact match.

Enter the category name (as it will appear in the applicability panel) between <li> and </li>, for example:

'<li class="Novice">Novice</li>' +

Repeat step 8 and 9 for each of the list items, matching the applicability panel categories in Paligo.

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

Upload Customized JavaScript.

Use a text editor or code editor to create a custom CSS file.

Define the selector and styling for the overall list.

ul.listname has to match the ul class and listname that was used in your JavaScript, see Add Applicability Panel to JS file.

ul.listname {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*background-color: #333333;*/
    margin-bottom: 1em;
}

Define the styles for when the applicability panel should be shown.

You need to have selectors for each taxonomy tag (category). These use the syntax .taxonomy-parent taxonomy tag-child taxonomy tag ul.listname,:

You need a separate selector for each taxonomy tag (category).

After the selectors, include display: inline-block; to tell the browser to show the applicability panel. Here, we have included border-radius to set rounded corners on the panel too.

.taxonomy-parenttaxonomytag-childtaxonomytag1 ul.listname,
.taxonomy-parenttaxonomytag-childtaxonomytag2 ul.listname,
.taxonomy-parenttaxonomytag-childtaxonomytag3 ul.listname {
    display: inline-block;
    border-radius: 8px;
}

Define the styles for the list items.

For the selector, replace ul.listname to match the ul class and listname that was used in your JavaScript (same as in step 2). Keep li after it.

Below, we have included styles for the positioning, color, and alignment. You can change these styles to suit your requirements.

ul.listname li {
    float: left;
    display: inline-block;
    color: #bbb;
    text-align: center;
    padding: 20px;
    background-color: #eee;
}

Define the styles for the label list item on the applicability panel.

Below, we have given the label a color and font-weight, but you can add other styles too.

ul.listname li.parenttaxonomytag {
    color: #444;
    font-weight: bold;
}

Define the styles for when the content does not apply to the categories.

You need to consider the different possible combinations of tags and include selectors for each combination.

For example, below we have styles for the possible combinations of three child taxonomy tags.

.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag1,
.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag2,
.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag3,

.taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag2,
.taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag3,

.taxonomy-parenttaxonomytag-childtaxonomytag3 .childtaxonomytag3,

 {
    color: #444;
}

Define the styles for when the content does apply to the categories.

These styles work in the same way as in the previous step, where there is a selector for each possible combination of classes.

But these selectors include :before, which adds styling before the category text. In this case, we have used CSS and a reference to FontAwesome to add a checkmark.

You can apply different styling if you prefer. But you have to use the taxonomy-parent-child syntax, use selectors that match the names in your JavaScript, and include :before.

.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag1:before,
.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag2:before,
.taxonomy-parenttaxonomytag-childtaxonomytag1 .childtaxonomytag3:before,

.taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag2:before,
.taxonomy-parenttaxonomytag-childtaxonomytag2 .childtaxonomytag3:before,

.taxonomy-parenttaxonomytag-childtaxonomytag3 .childtaxonomytag3:before,{
    content: '\f00c';
    font-family: FontAwesome;
    margin-right: 0.5em;
    color: #1976d2;
}

Save your CSS with a .css file extension and Upload Customized CSS to your HTML5 layout.