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.

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.

5C           Advertising                                    Retail Operations              

 54           Animal Welfare                              Corporate Social Responsibility

 32           Asset Protection                              NULL                           

 6F           Bioengineering                                Biotechnology                

 6E           Biotechnology                                 NULL                           

 11           Category Management                  Retail Operations              

 5F           Communications                             Corporate Social Responsibility

 33           Consumer Affairs                            Corporate Social Responsibility

 17           Consumer Behavior & Trends        NULL                           

 3C           Corporate Social Responsibility     NULL                           

 5            Coupons                                           Retail Operations              

 28           Crisis Management                         NULL                           

 34           Cyber Security                                 NULL                           

 2C           Deli / Bakery                                    Fresh Foods                    

 4E           Digital Shopper                               Technology                     

 8            Distribution                                         Supply Chain                   

 6A           Diversity, Equity & Inclusion          NULL                           

 64           Education                                        NULL                           

 4B           Energy                                             Retail Operations              

 43           Family Meals                                   Health & Well-being            

 23           Financial Management                   Retail Operations            

 3E           Food Fraud                                      Corporate Social Responsibility

 71           Food Price Inflation                         NULL                           

 D            Food Safety & Security                   NULL                         

 3D           Food Waste                                    Corporate Social Responsibility

 36           Fresh Foods                                     NULL                           

 70           Gene Editing                                   Biotechnology                  

 1            General Marketing & Merchandising  Retail Operations              

 12           Government Relations                    NULL                           

 35           Health & Well-being                      NULL                           

 13           Human Resources                           Retail Operations              

 72           Independent Operator                   NULL                           

 14           Industry Relations                           Total Store Collaboration      

 6C           Loss Prevention                              Asset Protection               

 5E           Loyalty Programs                                        Retail Operations              

 16           Meat & Poultry                               Fresh Foods                    

 73           Nonfoods                                        NULL                           

 27           Nutrition                                          Health & Well-being            

 69           Omnichannel                                   NULL                           

 4C           Packaging                                       Retail Operations              

 2E           Payments                                         Technology                     

 18           Pharmacy                                        Health & Well-being            

 37           Private Brands                                 NULL                           

 19           Produce                                           Fresh Foods                  

 A            Research                                          NULL                           

 38           Retail Operations                            NULL                           

 51           Risk Management                           Asset Protection               

 57           Safemark                                         Food Safety & Security         

 52           Safety                                               Asset Protection               

 1C           Seafood                                           Fresh Foods                    

 60           Shopper Services                            Retail Operations            

 65           Signature Events                             Education                      

 5D           Social Media                                   Retail Operations              

 47           Supplier Diversity                            Total Store Collaboration      

 3B           Supply Chain                                   NULL                           

 9            Sustainability                                    NULL                           

 39           Technology                                     NULL                           

 46           Total Store Collaboration               NULL                           

 66           Training & Development                Education                      

 6D           Transparency                                  Corporate Social Responsibility

 2F           Transportation                                 Supply Chain                   

 6B           Workforce                                       NULL   

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.