XS - Newsroom Mobile News Unit Template | Communifire Documentation

The XS - Newsroom Mobile News Unit template displays content in a neat component. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the XS - Newsroom Mobile News Unit template in the Template tab

The template is mobile-friendly as well! You can try it out in the Mobile layout.

How to Customize the XS - Newsroom Mobile News Unit Template

Change accent color

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

   /*Style for XS - Newsroom Mobile News Unit template*/
   .axero-mobile-news-unit.blue .axero-widget-content ul li a .x-label .x-space {
       color: #34a8e1;
   }

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

Template HTML

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

<div class="axero-widget axero-mobile-news-unit {{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">
        <ul>
            {{#each Contents}}
            <li>
                <a href="{{ContentURL}}" title="{{{Title}}}">
                    <span class="x-photo">
                        <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
                    </span>
                    <span class="x-label">
                        <span class="x-space">{{{SpaceName}}}</span>
                        <span class="x-title">{{{Title}}}</span>
                        <span class="x-date">{{DateCreatedString}} {{{resources.GlobalByText}}} {{{AuthorUserDisplayName}}}</span>
                    </span>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
		{{{FooterHTML}}}
    </div>
    {{/if}}
</div>