The Story Template Editor allows you to customize the default design of the five story page templates, and design any custom templates you create. This functions in a similar way to redesigning to the website, so in order to make any changes the user must be set to an administrator level role (more info on users and permissions here). Also, when you are finished making any changes make sure to click Save All Design Options.
To access the Story Template Editor navigate to the Story Page Templates tab in the SNO Design Options and click the button that says Open Story Template Editor.
Underneath the Open Story Template Editor button is a dropdown that allows you to select which template will be the default when you create a new story.
Below that there are three boxes that allow you to activate custom templates. You can activate and design up to three. Reminder: You can easily customize the header/footer, sidebar, and many design elements on the individual Story Edit page, so the custom template is meant for creating a style that you need to stand out for a specific type of content unique from typical news content (e.g. sponsored content, school announcements, or public service announcements).
To customize the design of the five built-in story page default templates, or any of the custom templates, click the Open Story Template Editor button and that tool will then open in a new window. On the right side is a preview, which displays all of the different sections and will reflect any changes you make in the editor. On the left side the template is broken into 15 different sections, each with different elements that can be customized. Those sections can be rearranged by clicking and dragging the up/down arrow icon on the left side of each row. Some elements cannot be placed above or below a certain point in the story, and if you attempt to move the element to an unallowed area it will turn red.
Most of the customizable options are self-explanatory, but there are a few things that we want to highlight:
- The available fonts are determined by which fonts are being used in the different zones on your homepage (e.g. headline, widget title, accent text, etc.) You can learn more about setting those fonts here.
- The deck can now be designed with a unique background color and border.
- It is now possible to display a photo next to the byline. This photo is pulled from the staff profile, so in order to display a byline photo the writer needs to have a staff profile with an image.
- The byline photo will automatically crop to the center of the image on the staff profile, so if it appears oddly cropped we recommend installing the plugin "Crop-Thumbnails". Then, once that plugin is activated, crop the vertical image thumbnail to what you want to display as the byline photo.
- The date and story views sections can be set to display so they are appended to the byline row for a more streamlined look. However, you can also set those to display on their own row or not display at all.
- The default templates are set to hide the video location in the preview. If you regularly have video content with your stories you can adjust that to display in the preview. Otherwise you can still select a default display location for those times when you do use videos.
- If you opt-in to SNO Ads, (more information about that here,) you can now specify a paragraph after which that ad should display. The ad will span the full width of the column. If you set that paragraph at a greater number than the amount of paragraphs in a given story then the ad will automatically display at the end of the body section.
- The related content can be set to display based on the category, tag, or writer. If you select category or tag all related content will display based on up to three categories or tags alphabetically, although if you have multiple categories/tags you can set a primary one to ensure it is displayed in the related content. There are four unique ways to display that content:
- “Within Story Template” will display traditional preview tiles.
- “Bottom Drawer” will create a pop up labeled More to Discover at the bottom of the story page.
- “Bottom Carousel Bar” creates a carousel of related content that appears at the bottom of the story page.
- “Append to Primary Sidebar” will move the related content to the sidebar area as preview tiles - this option is only available on templates that have a sidebar.
- Below the sections there are global Template Design Options where you can design some general appearance settings for the story page. This also allows you to set a default header, footer and sidebar(s) to be used on the template although those can easily be swapped out on the Story Edit page.
- If you are using the Dual Sidebars template it can become rather cramped, so SNO recommends decreasing the sidebar width to 200px in that template.
Again this functions the same way as other design changes. When you are finished making any changes make sure to click Save All Design Options.