Icon List with Tabs Template | Communifire Documentation

Create an tabbed icon list template for the Content List Widget . The Content List widget is great for keeping everyone in your community updated on recent articles, upcoming events, key discussions, and more.

Add Template

1. Click the  gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Icon List with Tabs as the Template name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In Resource Keys CSV, enter the following list.

   ArticleDefaultText,HomePageBlogsText,ITDefaultText,ForumPostForumText,EventDefaultText,GlobalCFIdeaText,FileHeaderText,PhotoAlbumHeaderH2Text,VideoDefaultHeaderText,HomePageWikiText

7. In the editor, paste the following code.

   <div class="axero-widget axero-widget-entity-icon-list axero-widget-icon-list-with-tabs {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}" id="icon-tabs-{{WidgetID}}">
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       <div class="nav-container">
           <ul class="nav nav-tabs">
               <li class="active"><a href="#icon-list-tabs-articles" id="icon-list-tab-articles" data-toggle="tab" >{{Resources.ArticleDefaultText}}</a></li>
               <li><a href="#icon-list-tabs-blogs" id="icon-list-tab-blogs" data-toggle="tab" >{{Resources.HomePageBlogsText}}</a></li>
               <li><a href="#icon-list-tabs-cases" id="icon-list-tab-cases" data-toggle="tab" >{{Resources.ITDefaultText}}</a></li>
               <li><a href="#icon-list-tabs-discussions" id="icon-list-tab-discussions" data-toggle="tab" >{{Resources.ForumPostForumText}}</a></li>
               <li><a href="#icon-list-tabs-events" id="icon-list-tab-events" data-toggle="tab" >{{Resources.EventDefaultText}}</a></li>
               <li><a href="#icon-list-tabs-files" id="icon-list-tab-files" data-toggle="tab" >{{Resources.FileHeaderText}}</a></li>
               <li><a href="#icon-list-tabs-ideas" id="icon-list-tab-ideas" data-toggle="tab" >{{Resources.GlobalCFIdeaText}}</a></li>
               <li><a href="#icon-list-tabs-photos" id="icon-list-tab-photos" data-toggle="tab" >{{Resources.PhotoAlbumHeaderH2Text}}</a></li>
               <li><a href="#icon-list-tabs-videos" id="icon-list-tab-videos" data-toggle="tab" >{{Resources.VideoDefaultHeaderText}}</a></li>
               <li><a href="#icon-list-tabs-wikis" id="icon-list-tab-wikis" data-toggle="tab" >{{Resources.HomePageWikiText}}</a></li>
           </ul>
       </div>
       <div class="axero-widget-content axero-widget-content-padded tab-content">
           <div class="tab-pane active" id="icon-list-tabs-articles">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Article")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-blogs">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Blog")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-cases">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Issue")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-discussions">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "ForumTopic")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-events">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Event")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-files">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "File")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-files">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "File")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-ideas">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Idea")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-photos">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Photo")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-videos">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Video")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
           <div class="tab-pane" id="icon-list-tabs-wikis">
               <ul> 
               
                   {{#each Contents}}
                   <li class='{{#if (compare EntityType "!=" "Wiki")}}hide{{/if}}'>
                       <div class="entity-icon">
               			<i class="{{EntityIconCssClass}}"></i>
       				</div>
                       <div class="entity-title">
                           <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                       </div>
                   </li>
                   {{/each}}
                   
               </ul>
           </div>
       </div>
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
   		{{{FooterHTML}}}
           
       </div>
       {{/if}}
   </div>
   <script>
   var myString = "#icon-tabs-" + {{WidgetID}};
   //If articles are hidden, click the first visible tab
   if ($(myString).hasClass("no-articles")) {
       if ($(myString).hasClass("no-blogs")) {
           if ($(myString).hasClass("no-cases")) {
               if ($(myString).hasClass("no-discussions")) {
                   if ($(myString).hasClass("no-events")) {
                       if ($(myString).hasClass("no-files")) {
                           if ($(myString).hasClass("no-ideas")) {
                               if ($(myString).hasClass("no-photos")) {
                                   if ($(myString).hasClass("no-videos")) {
                                       if ($(myString).hasClass("no-wikis")) {
                                       
                                       }
                                       else $("#icon-list-tab-wikis").click();
                                   }
                                   else $("#icon-list-tab-videos").click();
                               }
                               else $("#icon-list-tab-photos").click();
                           }
                           else $("#icon-list-tab-ideas").click();
                       }
                       else $("#icon-list-tab-files").click();
                   }
                   else $("#icon-list-tab-events").click();
               }
               else $("#icon-list-tab-discussions").click();
           }
           else $("#icon-list-tab-cases").click();
       }
       else $("#icon-list-tab-blogs").click();
   }
   </script>

8. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

/*Styles for the Icon List with Tabs template*/
.axero-widget-icon-list-with-tabs .nav-container {margin: 10px 0 0 10px;}
.axero-widget-icon-list-with-tabs .nav-container ul.nav-tabs {border-bottom: none;}
.axero-widget-icon-list-with-tabs .nav-container ul.nav-tabs li {padding-bottom:0px;}
.axero-widget-icon-list-with-tabs.no-articles #icon-list-tab-articles {display:none;}
.axero-widget-icon-list-with-tabs.no-blogs #icon-list-tab-blogs {display:none;}
.axero-widget-icon-list-with-tabs.no-cases #icon-list-tab-cases {display:none;}
.axero-widget-icon-list-with-tabs.no-discussions #icon-list-tab-discussions {display:none;}
.axero-widget-icon-list-with-tabs.no-events #icon-list-tab-events {display:none;}
.axero-widget-icon-list-with-tabs.no-ideas #icon-list-tab-ideas {display:none;}
.axero-widget-icon-list-with-tabs.no-files #icon-list-tab-files {display:none;}
.axero-widget-icon-list-with-tabs.no-photos #icon-list-tab-photos {display:none;}
.axero-widget-icon-list-with-tabs.no-videos #icon-list-tab-videos {display:none;}
.axero-widget-icon-list-with-tabs.no-wikis #icon-list-tab-wikis {display:none;}

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Drag a Content List widget onto the page. This template is best used in wider columns - 8 or greater.
5. Edit the Content List widget.
6. Update the widget Title.
7. Configure the widget properties.
   • Note: The content in all the tabs is counted when applying the Content List widget's Total items setting. You may need to set Total items to a larger value in order to get a desired number of content per tab.
8. Click Template.
9. Select the Icon List with Tabs template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.

Exclude Content Types

By default, the widget displays all content types. You can exclude content types from the widget. Follow the steps below.

1. Edit the page.
2. Edit the Content List widget.
3. Click the Advanced tab.
4. In Custom CSS class, add one or several of the classes below. Separate multiple classes by spaces. (e.g. no-blogs no-videos )
   • no-articles
   • no-blogs
   • no-cases
   • no-discussions
   • no-events
   • no-files
   • no-ideas
   • no-photos
   • no-videos
   • no-wikis
5. Click Save Widget.
6. Click Publish changes.