Zeppelin Header - Content List Compact Template | Communifire Documentation

The Zeppelin Header - Content List Compact template displays a list of content in a side modal.

The template is a built-in template and comes with your Communifire site. Follow the steps below to create the example widget, which provides quick links to the People Directory for all the departments in your organization.

1. Go to Control Panel > System > Page Builder > Header.
2. Set the Active Header to Global Header with Sub Navigation.
3. Click Save.
4. In the list below, edit the "Global Header with Sub Navigation" header.
5. Click Widgets.
6. On the "Sub Navigation" Section widget, click the gear icon > Expand.
7. Drag a new Section widget into the "Sub Navigation" Section widget.
8. On the Section widget you added, click the gear icon > Edit Properties.
9. Update the Title to Departments.
10. Click Template.
11. Select Zeppelin Header - Block Item.
12. Click Advanced.
13. Check Open content in modal.
14. Click Save Widget.
15. Drag a new Content List widget into the "Departments" Section widget you configured.
16. On the Content List widget, click the gear icon > Edit Properties.
17. Update the Title to Departments.
18. For Widget Sub Type, select Field Options List.
19. Click Template.
20. Select Zeppelin Header - Content List Compact.
21. Click Advanced.
22. Check Load list on opening dropdown (requires template that opens).
23. Save the widget and page.

Template HTML

Below is the HTML of this template, for your reference.

<div id="ContentFilterList{{WidgetID}}" class="ax-diamond-hover-box ax-diamond-hover-box-spaces{{CustomCSSClass}}">
    {{#if ShowWidgetHeader}}
    <ul class="ax-diamond-hover-box-header">
        <li class="nav-header">
            {{{WidgetTitle}}}
        </li>
        <li class="divider"></li>
    </ul>
    {{/if}}
    <ul class="ax-diamond-hover-box-dropdown ax-diamond-hover-box-dropdown-spaces" id="ScrollContainer{{WidgetID}}">
        {{#each Contents}}
        <li class="">
            <a href="{{ContentURL}}" class="space-home-link noimage"><span class="anchor-text">{{{Title}}}</span></a>
        </li>
        {{/each}}
    </ul>
    {{{PlaceholderHTML}}}
</div>
{{{ScriptBlock}}}