Content List Ticker Template | Communifire Documentation

The Content List Ticker template displays content in a scrolling list.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Content List Ticker 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 axero-lightning-navigation-list axero-pills no-image {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       <div class="axero-widget-body">
   		<div class="marquee-box">
   		    <div class="marquee-vrt-scroll">
                   <ul>
                       {{#each Contents}}
                       <li>
                           <a title="{{{Title}}}" href="{{ContentURL}}"><span class="x-label"><span>{{{Title}}}</span></span></a>
                       </li>
                       {{/each}}
                       
                   </ul>
               </div>
           </div>
       </div>
   </div>

7. Click Save Template.

Add CSS Overrides

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

   /*Style for Content List Ticker template*/
   .axero-widget-body .marquee-box {
       position: relative;
       min-height: 300px;
       overflow: hidden;
   }
   
   .axero-widget-body .marquee-vertical-scroll {
       position: absolute;
   }
   
   
   @keyframes "marquee-vrt-scroll" {
       from {
           top: 100px;
       }
   
       to {
           top: -200px;
       }
   
   }
   
   @-moz-keyframes marquee-vrt-scroll {
       from {
           top: 100px;
       }
   
       to {
           top: -200px;
       }
   
   }
   
   @-webkit-keyframes "marquee-vrt-scroll" {
       from {
           top: 100px;
       }
   
       to {
           top: -200px;
       }
   
   }
   
   @-ms-keyframes "marquee-vrt-scroll" {
       from {
           top: 100px;
       }
   
       to {
           top: -200px;
       }
   
   }
   
   @-o-keyframes "marquee-vrt-scroll" {
       from {
           top: 100px;
       }
   
       to {
           top: -200px;
       }
   
   }
   
   .marquee-vrt-scroll {
       position: absolute;
   
       infinite;
       -moz-animation: marquee-vrt-scroll 10s linear infinite;
       -ms-animation: marquee-vrt-scroll 10s linear infinite;
       -o-animation: marquee-vrt-scroll 10s linear infinite;
       animation: marquee-vrt-scroll 10s linear infinite;
   }
   
   
   .marquee-vrt-scroll:hover {
       -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
       -o-animation-play-state: paused;
       animation-play-state: paused;
       cursor: pointer;
   }
   
   .axero-lightning-navigation-list.axero-pills.no-image .axero-widget-body ul li a .x-label {
       margin-left: 0;
   }

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 small to mid-sized columns - between 3 and 6.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties.
8. Click the Template tab.
9. Select the Content List Ticker template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.