1. Encompass Support Center
  2. Content
  3. News Listing

Complimentary News Formats

Print Friendly and PDF Follow

Installation Instructions

To start applying the new formats to your site, you want to review this Support Center article that gives you the basics. Below are more specific instructions for this particular task.

NOTE: Please DO NOT USE Google Chrome to add these News Formats to your site. Recommended browsers are Mozilla Firefox, Safari, and Microsoft Edge.

  1. Once you have decided which format you want to use (you may use both but must be installed one at a time), go to a page that already has a News Listing you wish to restyle or drag and drop a new News Listing module on the page. It is always best to work on a listing that has active news.

  2. Click Content Builder to make it active. The light bulb will change to yellow. Click building_block.gif to edit the Listing module.
  3. Select the format you want to edit from the available choices. You will see a preview of the format in the area to the right. Click the Edit the selected Module Display Format checkbox below the left column and then click the Next >> that appears to the right of "Load Content".

    NOTE: It's important to remember that you are NOT MODIFYING ANY OTHER FORMAT ON THE SITE by editing this module's format. By editing a "selected Module Display Format," you are essentially using saved code to create a local version of the format, so any changes you make to this format will not automatically apply to any other module.
  4. Most formats will only have content in the Edit Content Format editor window. Change the view of this editor window from Design to HTML.
  5. Select all the existing code and delete it.
  6. Copy/paste the HTML of your new desired format from this page and paste it into the empty editor window. This will give you the default design of the selected format. You do not have to make any other changes to this code.
  7. Click Next >>.
  8. The last step is saving this new format so you can apply it to other News Listings on your site. Check the Save format to be reused box above the preview content. Two radio buttons will display:
    a. Create a new format: this allows you to save this new format as a new entry in the list in the module. You can give it any name that makes sense to you.
    b. Overwrite an existing format: if you want to replace an existing format you can do that with this option. A single select box will show up that lists all available formats on your site so you can choose the one you wish to overwrite. You will also have the ability to rename the format at this time (good tip for spelling errors!).

BUT WAIT! How or where do I add the custom CSS snippets provided below? I want to change the colors of this format and save it that way!

You can totally do that by following steps 1 through 5. Once you have pasted the main format HTML code:

  1. Click the Header checkbox (if it is not already checked). This will open an additional editor window. Change the view of this editor window from "Design" to "HTML".
  2. Remove any code or content that may be in this area. Paste the customization snippet you want in this HTML and update the colors as needed.
  3. Continue on to step 6 and 7 above.

By saving the CSS customization as part of the format you won't have to copy/paste it every time you use your module.

Format Options

Option 1: Featured News Format

News_Format_1.png

This format is intended to showcase a few featured news articles, perhaps in a secondary news listing above the primary listing. Our recommendation is to use this for 1-2 news articles at a time. The thumbnail image size will change, depending on the width of your content area, but here is our best recommendation: 700 pixels wide and 550 pixels tall. (This is due to the format on the mobile design, where the image is full width). We recommend using this format with news articles that will for sure have thumbnail images.

<div class="ev-feature">
<div class="thumbWrap">
[EmptyCheck:ThumbnailUrl]<div class="thumb" style="background-image: url('[ThumbnailUrl]');">
<img src="[ThumbnailUrl]" alt="[ThumbnailAltText]" />
</div>[/EmptyCheck:ThumbnailUrl]
</div>
<div class="text">
<div class="title">[Link]<span class="sr">[Content Date Only Range]: </span>[Content Name][/Link] [Tool Icons]</div>
<div class="details">
[EmptyCheck:Preview]<div class="time">[Preview]</div> [/EmptyCheck:Preview]
</div>
</div>
</div>

Want to customize this format?

We have included the below CSS style block to change the colors of the date box, title text color, and box background color. To update, paste this code into the "Format Header" section while in HTML mode and update the color names with the colors you prefer (HEX codes are preferred, so for example, you could replace the word "whitesmoke" with "#0000cc" to get a blue background fill). If you are fine with the default styling of a certain element (as in you only want to update one or 2 colors), delete those lines that you did not modify.

<style>
.ev-feature {background-color:whitesmoke;}
.ev-feature .text .title, .ev-feature .text .title a {color:green;}
</style>

Option 2: Wide News Format

News_Format_2.png

This format is a great way to add some visual interest to your news listing without making it too tall. Our best recommendation on thumbnail size is: 700 pixels wide and 550 pixels tall. (This is due to the format on the mobile design, where the image is full width). The button text is the same for each article, but a span tag has been added with the news name to meet accessibility standards. This text can be edited by replacing ONLY the word "Read More" with the desired text ("Learn more", "Details", etc). Just remember that constituents using a screen reader will hear "Read more about (News Article Name)" so make sure that your new text makes sense in that context.

NOTE: The title text does not link as there is a read more button.

<div class="ev-wide">
<div class="thumbWrap">
[EmptyCheck:ThumbnailUrl]<div style="background-image: url('[ThumbnailUrl]');" class="thumb">
<img alt="[ThumbnailAltText]" src="[ThumbnailUrl]" />
</div>[/EmptyCheck:ThumbnailUrl]
</div>
<div class="text">
<div class="title">[Content Name] [Tool Icons]</div>
<div class="details">
[EmptyCheck:Preview]<div class="time">[Preview]</div> [/EmptyCheck:Preview]
</div>
<div class="cta">[Link]<span class="button">Read More <span class="sr">about [Content Name]</span></span>[/Link]</div>
</div>
</div>

Want to customize this format?

We have included the below CSS style block to change the colors of the title text color, box background color, border color and button colors. To update, paste this code into the "Format Header" section while in HTML mode and update the color names with the colors you prefer (HEX codes are preferred, so for example, you could replace the word "whitesmoke" with "#0000cc" to get a blue background fill). If you are fine with the default styling of a certain element (as in you only want to update one or 2 colors), delete those lines that you did not modify.

<style>
.ev-wide {background-color:whitesmoke;border-color:red;}
.ev-wide .text .title, .ev-feature .text .title a {color:green;}
.ev-wide .text .cta a .button {background-color:blue; color:yellow!important;}
.ev-wide .text .cta a .button:focus, .ev-wide .text .cta a .button:hover {background-color:lime; color:navy!important;}
</style>

 

 

Related articles