XS - Newsroom (Horizontal Items with Hero) Template | Communifire Documentation

The XS - Newsroom (Horizontal Items with Hero) template displays content in a colorful design. The first item spans the width of the template and subsequent items are displayed in a 3 column layout.

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 (Horizontal Items with Hero) template in the Template tab

How to Customize the XS - Newsroom (Horizontal Items with Hero) Template

Change the accent color

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

   /*Style for XS - Newsroom (Horizontal Items with Hero) template*/
   .xs-newsroom-wide-columns.purple .xs-content ul li:first-child a .tile-content .tile-content-text {
       background-color: #800080;
   }
   
   .xs-newsroom-wide-columns.purple .xs-content ul li a .tile-content .tile-content-text .tile-head .category-eyebrow {
       color: #800080;
   }

3. This code is for a purple accent. You can replace #800080with your desired color. If you change the color, also replace purple with a name that describes your color. (For example, blue ) (Note that there are two instances of both #800080 and purple in the CSS code above.)
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 purple . (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="xs-newsroom-wide-columns {{CustomCSSClass}}">
    <div class="xs-content">
        <ul>
            {{#each Contents}}
            <li>
                <a class="tile" href="{{ContentURL}}">
                    <div class="tile-content">
                        <div class="tile-media" style="background-image:url({{ContentImageURL}});"></div>
                        <div class="tile-content-text">
                            <div class="tile-head">
                                <div class="category-eyebrow">{{{SpaceName}}}</div>
                                <h4>{{{Title}}}</h4>
                                <p>{{{Summary}}}</p>
                            </div>
                            <time class="tile-time">{{DatePublishedString}} by {{AuthorUserDisplayName}}</time>
                        </div>
                    </div>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
</div>