Annual Report
Overview
This template features fullwidth sections, which include all the standard functionality of sections elsewhere on your site. You have 8 available sections on the template. Sections can be changed and re-ordered as needed.
Anchor Navigation
In order to link a section to the anchor navigation, you will need to add the word you want to display to the "Description" field of the section. If you leave the Description field blank, no anchor will be added to the anchor navigation for that section.
Monklets
You have a few monklets available on this template. The Annual Report Gallery - Right/Left for the numbers/image clusters, and the Annual Report Campus Markers for the map at the bottom.
Annual Report Gallery - Right and Annual Report Gallery - Left will display a cluster of 3 images on the right or left (indicated by the name of the monklet), with an animated number and description on the opposite side. You will add the information using a link list (Content > Link Lists) then use an inline parameter to tell the monklet what Link List to find. For example, if your link list was called "Annual Report Gallery Example 1" your monklet and parameter would look like this: {{annual-report-gallery-right|find="annual-report-gallery-example-1"}}
Each link list should have 4 items:
- The first item will be the number, icon, and short description. The number goes in the name field, the description goes in the description field, and the icon goes in the icon class field
- The second, third, and fourth items will be the images. The Name is the image number, the parent is the first item, and the image is the image you'd like to use. You should always have 3 images.
Annual Report Campus Markers will display a fullwidth map with markers hovered over it. Each marker will display the name, the year it was established, a link to the campus landing page, and an image.
You will add the information using a link list (Content > Link Lists) then use an inline parameter to tell the monklet what Link List to find. For example, if your link list was called "Annual Report - Campus Markers" your monklet and parameter would look like this: {{annual-report-campus-markers|find="annual-report-campus-markers"}}
Each campus should have a corresponding item in the link list. You can have up to 5 items. If you have fewer than 5 items, the campus markers will center but keep the current spacing. The items should be structured as follows:
- Name: Will display under the icon. For the current example, it should say Name of Campus <br> EST. 1999. the <br> means "break" - this has to be included in order to put the information on 2 separate lines
- Link: link to the campus landing page
- Image: the image that hovers behind the marker
- Description: hex code of the color you want the marker to be
Annual Report Typed Header will display styled text with animation in the header area. This is setup using the "Annual Report Typed" link list and can only be used on the header text field.
Within the link list:
- Each link entry represents a line of text. This is to a default size, and the color is your dark gray.
- The "Description" field can contain a number to change the default font size for that line, eg. 90. The mobile size will automatically be 60% of that number.
- The "Button Text" field is used to change the text color and must be a hex number, eg. #ff0000.
- The "Icon Class" field is used to change text background color for that line and must be a hex number, eg. #ff0000.
NOTE: The left indent for the text is hard coded for each of the 5 lines with the bottom line (5th) being centered.
Annual Report - Gallery Photo Strip uses a gallery and displays a full width photo strip. No other content should be used in a section when using this monklet.
This photo gallery strip monklet matches the design of the one listed above but includes an optional lightbox popup on click.
For each photo that you want to include a popup, a section needs to be created. The section content will display as the popup content. The slug title of the section then needs to be added to the "description" field of the image in the media module (all lowercase/dashes instead of spaces).
Annual Report - Audio Button uses a link list to display an audio button. The link list setup for the example is titled "Annual Report - Audio", and the link url MUST contain a link to an mp3 file. The link list "description" field is an optional header above the audio button.