XS - Newsroom Mobile News Unit Template | Axero 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 Axero 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 (e.g., 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>