Zeppelin Header - Block Item Template | Communifire Documentation

The Zeppelin Header - Block Item template displays a link as an icon. The template is a built-in template and comes with your Communifire site.

Note: The bell icon is a Section Widget with the "Open content in modal" setting checked. When this setting is checked, the section widget acts as a button and uses button templates.

How to use the Zeppelin Header - Block Item template

1. Go to Control Panel > System > Page Builder > Header
   
   
   
   
   
2. Clone the Global Header with Sub Navigation header
   
   
3. Set the active header to the clone
   
4. Click Save
   
5. Edit the clone
   
6. Expand the "Navigation" section widget
   
7. Click the Widgets tab
   
8. Drag a Button widget onto the page
   
9. Edit the Button widget
   
10. Update the Button text. The text will not be displayed.
11. Configure the widget:
    • Button type: Select Personal
    • Type: Select Activity Stream
      
12. Click the Template tab
    
13. Select the Zeppelin Header - Block Item template
    
14. Click the Advanced tab
    
15. Select an Icon
16. Uncheck Show button text
17. Click Save Widget 
    
18. Add more button widgets and configure them similarly
19. Click Publish changes 
    

Template HTML

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

<li class="{{CustomCSSClass}}">
    {{{Contents.CountHTML}}}
    {{#if Contents.ForegroundImageURL}}
        <a class="isavatar" href="{{{Contents.URL}}}" {{{Contents.ngCode}}} title="{{WidgetTitle}}" data-toggle="modal" data-backdrop="true">
            <img class="x-avatar" src="{{Contents.ForegroundImageURL}}" alt="{{WidgetTitle}}">
        </a>
    {{else}}
        <a href="{{{Contents.URL}}}" {{{Contents.ngCode}}} title="{{WidgetTitle}}" data-toggle="modal" data-backdrop="true">
            {{#if IconCSSClass}}<span class="x-icon"><i class="{{IconCSSClass}}"></i></span>{{/if}}
            {{#if ShowWidgetHeader}}<span class="x-label"><span>{{{WidgetTitle}}}</span></span>{{/if}}
        </a>
    {{/if}}
</li>