Responsive Embed

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>

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.

Display recent webinar recordings (public AND member-only)

1. Add a Column-100 layout element and add a label to the layout "recent recordings"
2. Edit this new layout element and add these classes to the row field container container-wide section-2x
3. Add 3 Column-100 layout elements within the "recent recordings" layout
4. Label the first of the three layouts "Recordings Heading" and add these classes to the row field center-inside gutter-bottom
5. Add a content block to the "Recordings Heading" layout and enter a h2 heading
6. Label the second layout "blog widget" - add a Blog Posts widget (MVC) in this layout. Don't worry about the blog widget settings for now.
7. Label the third layout "Button" - add these classes to the row field center-inside section
8. Add a content block to the "Button" layout and a button (See the button section of this page)
9. Edit the blog widget: under `content` select both "Webinar Recordings Public" and "Webinar Recordings Member Only" blogs
10. IMPORTANT: Under List settings select the "Two Across H4 Image Summary" - the other templates will NOT redirect member only items to the protected members section of the site.
11. In the single item settings of the widget select the Events & Education > Webinars > Webinar Recordings > View page under Open single item in...Selected existing page

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.