Add the Required Reading flag to your Right Column template

There are two sections displayed in required articles:

  1. The required reading flag, usually displayed at the top of the article and/or in the Right Column:
    Sample required reading flag when a reader first views a required article
  2. The required reading acknowledgement section, usually displayed at the bottom of an article:

Sample required reading flag in an "Acknowledged" state

You choose where you'd like the flag to be placed by adding the Required Reading flag merge code into your Custom HTML in Settings > Style.

We recommend adding it in either:

  • Your Article template
  • Your Right Column template (if you're using a layout that displays a right column in articles!)

Here, we walk through adding the flag merge code to your Right Column template:

Only follow these instructions if you're using a layout that displays the Right Column AND you want the required reading flag in that right column. Otherwise, we recommend you Add the Required Reading flag to your article template.

  1. Go to Settings > Style.
  2. Below the Preview Pane, be sure Custom HTML is selected.
  3. Select Right Column from the Custom HTML dropdown.
  4. Copy the merge code below. (You can also find the merge code by clicking the -- Select a Merge Code -- dropdown, go to the Article Merge Codes section, and select Required Reading Flag.)
    [article("required_reading_flag")]
  5. Paste the merge code into the Right Column template wherever you'd like this flag to appear.
  6. We recommend putting it within the list-unstyled stat-list list, so you'd use code like this:
    <li>[article("required_reading_flag")]</li>
  7. Here are some of the most popular placements:
    1. At the top of the list, immediately under "About this Article"
      Sample required flag displayed at the top of the About this Article section.
      You can achieve this look by adding an extra line between the list-unstyled stat-list ul and the <li> for Created date and pasting the li-wrapped merge code in there:
      Flag merge code added between hg-article-header div and hg-article-title h1
    2. Between the "Last modified on..." statement and the article action icons:
      Sample required flag displayed between the article title and metadata
      You can achieve this look by adding an extra line between the li for Last modified on/last updated and the li for hg-article-controls-right and pasting the li-wrapped merge code in there:
      Flag merge code added between hg-article-title h1 and metadata div
    3. After the article action icons:
      Sample required flag displayed with the other article metadata
      You can achieve this look by adding an extra line between the li for hg-article-controls-right and the closing </ul> tag and pasting the li-wrapped merge code in there:
      Flag merge code added as the first element within the metadata div
  8. Once you've made your changes, be sure to Save. (If you've already enabled Required Reading, you can Preview the changes to see how they look--just be sure you've selected Article from the dropdown above the Preview Pane!)