News Ticker - Horizontal Template | Communifire Documentation

The News Ticker - Horizontal template displays content in a scrolling banner.

The template is a built-in template and comes with your Communifire site. To use the template:

1. Go to Control Panel > System > Page Builder and add or edit a page.
2. Click Widgets.
3. Add a Content List Widget onto the page.
4. On the Content List widget, click the gear icon > Edit Properties.
5. Click Templates.
6. Select the News Ticker - Horizontal template.
7. Save the widget and page.

How to Customize the News Ticker - Horizontal Template

Change the title background color

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for News Ticker - Horizontal template*/
   .axero-widget.axero-widget-ticker-horizontal.ticker-horizontal-dark-gray .axero-widget-content .marquee-sibling  {
       background: #555555;
       color: #ffffff;
   }

3. This code is for a dark gray background color. You can replace #555555 with your desired color. If you change the color, also replace ticker-horizontal-dark-gray with a name that describes your color. (For example, ticker-horizontal-orange )
4. Click Save CSS Overrides.
5. Click System > Page Builder.
6. Edit the page containing the News Ticker - Horizontal widget.
7. Edit the widget.
8. Click the Advanced tab.
9. In Custom CSS class, enter ticker-horizontal-dark-gray . (Or the name you created in step 3.)
10. Save the widget and page.

Change the text color

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for News Ticker - Horizontal template*/
   .axero-widget.axero-widget-ticker-horizontal.ticker-horizontal-red-text .axero-widget-content li a {
       color: #ff0000;
   }

3. This code is for red text. You can replace #ff0000 with your desired color. If you change the color, also replace ticker-horizontal-red-text with a name that describes your color. (For example, ticker-horizontal-blue-text )
4. Click Save CSS Overrides.
5. Click System > Page Builder.
6. Edit the page containing the News Ticker - Horizontal widget.
7. Edit the widget.
8. Click the Advanced tab.
9. In Custom CSS class, enter ticker-horizontal-red-text . (Or the name you created in step 3.)
10. Save the widget and page.

Note: If you customize both the title background color and the text color, separate the names in Custom CSS class with spaces. (For example, use ticker-horizontal-dark-gray ticker-horizontal-red-text to give a widget a dark gray title background and red text.)

Template HTML

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

<div class="axero-widget axero-widget-ticker-horizontal {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    <div class="axero-widget-content">
        <div class="w-content">
            <div class="w-container">
            	<div class="marquee-sibling">
        			{{{WidgetTitle}}}
        		</div>
        		<div class="marquee">
        			<ul class="marquee-content-items">
                    {{#each Contents}}
        				<li><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></li>
                    {{/each}}
        			</ul>
        		</div>
        	</div>
        </div>
    </div>
</div>
<script>
$(function (){
 $('.marquee-content-items').marquee({direction:'horizontal', delay:0, timing:50});
});
</script>