Vertical Stacked List Template | Communifire Documentation

Create a template for the Content List widget that displays content in a simple vertical stack.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. Enter Vertical Stacked List as the Template Name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In the editor, paste the following code.

   <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       <div class="axero-widget-content axero-widget-content-padded">
           
           <ul class="x-post">
               {{#each Contents}}
               
                   {{#if @first}}
                   <li class="x-post-first clr">
                       <div class="x-post-first-media clr">
                           <a href="{{ContentURL}}" title="{{{Title}}}">
                               <img src="{{ContentImageURL}}" alt="{{{Title}}}">
                           </a>
                           <div class="entry-cat-tag">
                               <a href="#" title="{{{ContentCategoryName}}}">{{{ContentCategoryName}}}</a>
                           </div>
                       </div>
                       <h3 class="x-post-first-title">
                           <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a>
                       </h3>
                       <div class="x-post-first-counts">
                           <ul class="inline">
                               <li><i class="icon-calendar"></i> {{DatePublishedString}}</li>
                               <li><i class="icon-eye-open"></i> {{PageViews}}</li>
                               <li><i class="icon-comment"></i> {{CommentCount}}</li>
                           </ul>
                       </div>
                       <p>{{{Summary}}}</p>
                   </li>
                   {{else}}
                   <li class="x-post-other clr">
                       <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a>
                   </li>
                   {{/if}}
               
               {{/each}}
               
           </ul>
   
       </div>
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
           
       </div>
       {{/if}}
   </div>

7. Click Save Template.

Add CSS Overrides

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

   /*Style for Vertical Stacked List template*/
   .x-post{margin: 0;}
   .x-post li{list-style:none;}
   .x-post-first-title{margin: 0;line-height: normal;font-size: 20px;font-weight: 600;}
   .x-post-first-title a{color:inherit;}
   .x-post-first-media{position:relative;margin-bottom:15px;border-radius:4px;}
   .x-post-first-media a,
   .x-post-first-media img{display:block;border-radius:4px;}
   .x-post-first-counts{margin: 5px 0 0;}
   .x-post-first-counts ul.inline{font-size: .85em;opacity: 0.5;}
   .x-post-first-counts ul.inline li{padding: 0 10px 0 0;}
   .x-post-first-media img{width:100%;height:auto;}
   .x-post-first p{margin:5px 0 10px;}
   .x-post-other{list-style:none;}
   .x-post-other a{display: block;position: relative;border-top: 1px solid #efefef;padding: 10px 0 10px 0;color: inherit;font-weight: 500;}
   .entry-cat-tag{display:block;position:absolute;top:0;left:0;background:#000;padding:4px 6px;z-index:2;border-top-left-radius: 4px;border-bottom-right-radius: 4px;}
   .entry-cat-tag a{display:block;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:.769em;font-weight:500;letter-spacing:.25px;text-shadow:none;}
   .entry-cat-tag a:hover{color:#fff;text-decoration:underline;}

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.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties. 
8. Click Template.
9. Select the Vertical Stacked List template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.