Media Box

Forms

Icons

All icon spans must include an "fmi-icon" class in addition to the classes listed below. (e.g. <span class="fmi-icon fmi-icon-calendar"></span>)

Also, if you will be using the icon inline with some text next to it: use a 'spacer-left' or 'spacer-right' class like so:

<span class="fmi-icon fmi-icon-calendar spacer-right"></span> calendar

Icon Sizes

To use various sizes of icon, just apply the class in the header of the table below. large-icon, medium-icon, and small-icon are the same as sizes 7, 4, and 2, just in easier to remember form. You don't need to include both the number size and easily remembered name for these. For example, if you want a large icon,you can add either one of large-icon OR icon-size-7.

Note that these won't really work with the icon badge below -- creating that circle needs a fixed size and so won't work well with these.

Badge Icon

Add a icon-badge class to an icon to give it a white circular background.

Industry Topic Icons

Add a fmi-icon class and then the icon class name of the chosen topic icon.

• fmi–icon–frozen–goods
• fmi–icon–committee

Section / Page Icons

To edit/add section icons (the green circle with an icon that appears on most pages).
In the admin navigate to Content > Section Icons

Social links

add a social-link class to a link which points to a social media url and an icon will get added to the link.

• @FMI_ORG
• FMI News
• Linkedin
• Facebook
• Youtube
• Flickr
• Instagram

Images with Captions

In the Alt Text field of your image, prefix your Alt Text with mg-caption: . The caption will be added automatically.

Use this code to center the image:

<style>
    .figimage {
        margin-left: auto;
        margin-right: auto;
        float: none;
    }
</style>

Attendee and Certificate Complete Lists

AllFields - This is just a copy of the existing one with name/company/title, named something simpler so it's easier to remember. https://www.fmi.org/sandbox/mailinglist-template---all-fields

AllFieldsWithLastInitial - This is the same as the above, but with last names cut down to last initials. https://www.fmi.org/sandbox/mailinglist-template---all-fields-with-last-initial

TitleAndCompanyOnly - This is the version initially discussed, with just title and company columns. https://www.fmi.org/sandbox/mailinglist-template---title-and-company-only

CompanyOnly - This shows the companies with only one row per company and an attendee count.  https://www.fmi.org/sandbox/mailinglist-template---company-only

MAXX Categories

Here are the updated IDs for all Categories. 
If the category is a "sub category" (i.e. nested under something else), the ID of its parent appears in the third column - otherwise this column says "NULL" and can be ignored. We included this because it is important for determining whether you're looking at the "Training & Development" (ID=20) which is its own top-level category or if you're looking at the "Training & Development" which is nested underneath Education.

Add and format new blog sections

Every blog section should consist of two pages: a list page and a detail page - this is necessary because post detail pages use a unique layout. To compose these sections do the following:

1. Create a page which will contain the blog posts list. This page can use any page template you'd like.
2. Create a page for the detail view and make this page a child of the first blog post list page. For this page use the page template called Mvc2020 View Page. In the page settings - set the page to NOT show in the site navigation.
3. On the blog post list page - add a blog posts MVC widget and in list settings select Matrix Blog List for the list template.
4. In the single item settings choose the option to open the single item in an existing page - choose the "view" child page you just made.
5. On the view page - add a blog posts widet (NOT the MVC one). In the list settings choose Matrix - View Page Blog Posts for the list template.
6. In the single items settings choose the open in 'Auto-generated page' option and select 2017 matrix full post for the detail template

Create maxx events sections

1. add a Column-100 layout block and add inside of it the EventAreaGrid layout block.
2. Add a content block to the 'events heading' area. The html structure should be:

   <strong>Category Name</strong>
   <div class="largest-text">Events</div>			
   		

3. Add a content block to the 'events info' area and enter a description for the events.
4. Add a maxx event widget to the 'Events widget here' area. In the widget options - add ~/Mvc/Views/mg-events-2017.ascx in the 'LayoutTemplatePath' option. In the 'MaxxCategoryIds' option add a taxonomy ID number if you want to filter events.