Event Style Guide MVC

Print Codes

* print-hide - Applied to a layout block, this will hide anything inside on print views. (I added this to the date control and the Expand All button on the schedule.)

* print-only - Applied to a layout block, this will make it so anything inside will ONLY show on print. You could add a message that shows up on printed versions of the schedule.

Announcement Cards 

A new alternative to the announcement cards is a List. To create this, first create a list of announcements you want to make by going to Content -> Lists in Sitefinity, and creating a list. In each item, fill out these fields:

  • Title (the title of the item)
  • Content (the big content area, will be displayed below title)
  • Link (the URL you want the button to go to)
  • Link Label (what you want the button to say)
  • Primary Image (the image to the left)

Once you've created your list, all you need to do after that is drop in an MVC List widget, select your List, and choose the "Card carousel with count" template. See example below.

Supply Chain Collaboration

Addressing Supply Chain Through Collaboration

Bringing food from farm to table requires sophisticated and efficient supply chains. FMI works with food retail supply chain professionals to facilitate networking, surveys, benchmarking, and research studies that move the industry and the supply chain forward.

View Resources

Untitled design - 2021-01-04T140031.566

FMI Supply Chain on the Road

Come support RILA LINK2021 in August! Let's join together in a show of solidarity with our industry partners and friends at this relevant supply chain event. FMI Members use code FMILINK21 to receive a special discount. Breakout sessions and retailer-only round tables, general sessions, executive insights and Expo Experience are featured.

Learn More

Use these cards to call out news or other areas of the event. Keep in mind you also have the curation tiles, so you want to pick and choose how best to use each feature. These announcements cards work better for items with more copy. Curation tiles work well for images and lite copy. Having both could make for an overwhelming user experience. Curation tiles can also be reused over and over again because they are saved in a database. Cards are one-offs, meaning they are not saved in a database.  

  • Drag over a Column-100 layout. Under classes & labels, in row field put wrapper-carousel-one mg-carousel--single-slides. Label column 1 the announcements. 
  • Back under Content, drag over a Card MVC widget. Each card is one item in the carousel. Add the Heading, Text, Image, Call to Action label, and URL link.
  • Expand the "More Options" section in the card's options and select the "Card, single slide" template.
  • To add another card, drag over another Card MVC widget and fill in the items again. You can have as many cards to the carousel as you'd like and change the ordering of them. 
  • You might also want to add a title above the announcements cards. 

 

Image 2 Michael Siakpere at Festival Foods store opening event2

Lorem Ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum turpis eu accumsan sagittis. Nullam bibendum libero quis efficitur gravida. Aliquam vestibulum efficitur sapien, vitae rutrum nisi ultrices vel. Vivamus hendrerit lorem sit amet erat eleifend ullamcorper. Nullam nec posuere tortor. Nulla a hendrerit eros. Aliquam eu volutpat nibh, et mollis nisl. illustration-announcements-1

Lorem Button

FMI_Stacked

Praesent in porta tortor

Mauris tincidunt diam ut dignissim ultrices. Duis nec tempor ante. Nullam commodo odio vulputate erat vehicula, vel dictum ligula porta. Donec sit amet mi massa. Integer tincidunt elementum elit, et tempus risus aliquam quis. Etiam sed ornare neque, at egestas odio. Etiam auctor placerat posuere. Phasellus ut placerat velit. Donec quis velit pulvinar, venenatis nunc non, porta eros. Duis dapibus erat urna, eu tempus arcu pulvinar nec. Donec molestie nec nisi sit amet pretium. Curabitur rhoncus fringilla lacinia. illustration-announcements-2

Link



Side Navigation Images/ Ads

  1. Drag in a Column-66-37 layout element.
  2. In the right column, drag in a Content Block
  3. Edit the Content Block and add your images. (Ads shown are 330px x 100px)
  4. Highlight the image and click on the hyperlink (globe with the chain icon) to link your image.

FMI Member Retailers and Wholesalers: Register Now

Strategic Executive Exchanges

Stir It Up!

MW 2018 Button Golf

       MW Opening Event                                 

Cards

  1. Drag in a Column-33-33-33 layout element.
  2. Add container equal-heights section push-down classes to the Row.
  3. In each Column add card--black
  4. In each column, enter two content blocks. The top will be your title and the bottom your content. h3 is recommended for the title

Title

  • Ignite valuable business relationships through networking and sharing best practices.
  • Take home actionable solutions to problems that impact the bottom line.
  • Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
  • Earn CPE credits.

Title

  • Ignite valuable business relationships through networking and sharing best practices.
  • Take home actionable solutions to problems that impact the bottom line.
  • Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
  • Earn CPE credits.

Title

  • Ignite valuable business relationships through networking and sharing best practices.
  • Take home actionable solutions to problems that impact the bottom line.
  • Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
  • Earn CPE credits.

Speakers Widget

  1. Insert a 100% Layout Element into an area of the page that spans the whole page width.
  2. For the wrapper set: wide-carousel banded-secondary section-inner
  3. Create the Speakers title by dragging in a 100% Layout Element into the previous layout element and entering centered in the wrapper and adding container to Column 1.
  4. For the speakers widget, drag in a 100% Layout Element as a sibling to the title area. Label the wrapper title and add container to Column 1.
  5. Within this layout element, drag in a Speakers widget (the one that doesn't have 'MVC' logo)
  6. Set the content by Categories and choose your event. Set the List Settings > List Template to Speaker Carousel. Set the list settings to 'No Limit and paging'. 'Use limit' is also okay. Save.
  7. Optionally, you can add a button under the speakers by adding another 100% layout under the Speakers 100% widget, label the wrapper component and use a content block into this layout widget.
  8. Paste in this for the button and replace the # with your link
<p style="text-align: center;">
<a class="button-secondary button--big" href="#" title="Speakers" target="_blank" rel="noopener noreferrer">Full Lineup</a>
</p>

Speakers

Patrick Delaney

Director, Federal Government Affairs, Walmart Inc.

Matthew Perin

Director Corporate Affairs, Government Relations and Regulatory Affairs, The Kroger Co.

Teross Young

Vice President, Government Affairs, Ahold Delhaize USA

Manish Sharma

Co-Founder and CMO, Think Blue Consulting

Michael Limauro

LPC, Vice President, Asset Protection, Whole Foods Market

Scott Kessler

CIO, Northeast Grocery

Robert Moskow

Managing Director, Consumer - Packaged Foods, Beverages, Household & Personal Care, TD Cowen

Eric Senn

Co-Founder & CEO, Badge

Jeffrey Strasser

General Manager – US Retail & Consumer Goods, Microsoft

Vy Hoang

Chief Customer Officer, i3 International

Dr. Romesh Wadhwani

Founder and Chairman, SymphonyAI

Shane Sampson

Executive Chairman of the Board, Save Mart Supermarkets, LLC

Kim Cox

Managing Director, Omnicommerce, NielsenIQ

Orlee Tal

CEO & Co-Founder, Workz

Dae Kim

Founder, NoxuData

Karen Rutledge

Commercial Strategy Manager, Mercer
Ryan Begin, Chief Executive Officer and Co-founder Divert, Inc.

Ryan Begin

Chief Executive Officer and Co-founder Divert, Inc.
Peter Miles-Prouten, SVP, Head of Strategic Partnership and Data Ventures, 84.51

Peter Miles-Prouten

SVP, Head of Strategic Partnership and Data Ventures, 84.51

Drew Gaputis

Principal, Retail & Consumer Products, Deloitte

Monica Amburn, MS, RDN

Vice President, Eat Well Global

Full Width Banners

Note: when the below refers to making two layout blocks "neighbors", you should make sure they're both part of a parent layout element, but not one within the other. The easiest way to do this is to label the parent element (the one you're dragging two into), so you can see two distinct layout blocks, one above the other. If you only see one box to drop content into they're probably nested.

  1. add a 100% layout block into an area without any containers/ layout elements to make sure it takes up the full width of the page and add js-check-content classes to the wrapper. Label this area 'Banner Area'
  2. add two 100% layout blocks into the layout block from the previous step (these two should be neighbors and not nested within each other)
  3. add a apply-hero-image class to the wrapper of the first layout block. Label this area 'Banner Heading'
  4. add banded-bright padded classes to the wrapper of the second layout block and add container padded--more js-check-me-for-content classes to the Column 1 field. Label this area 'Widgets here'
  5. add two 100% layout blocks into the 'Banner heading' area. These should also be neighbors and not nested.
  6. add hero-image hidden admin-display classes to the wrapper of the first layout block. Label this area 'drop an image widget here'
  7. add container gutter-top--big classes to the wrapper of the second layout block and add banded-bright padded--more classes in the Column 1 field. Label this area 'Banner heading'
  8. When adding the image widget for this area, you want to make sure it's at least a normal-size monitor's full width (so at least 1920px wide). The height is flexible, but keep in mind that it will push the page down if it's tall, so you ideally want a wide image that's not too tall.
  9. When adding a content block for the banner heading, you should use an h1 tag if you're using this to show the title of the page. If you're using it anywhere else, use an h2.

Page Title

Content / Widgets here

Image Carousel

  1. Drag in a 100% width layout and add a relative section class to the wrapper.
  2. Within this layout, drag in another 100% layout and add a component class to the wrapper. In Column 1, add wrapper-carousel-one collage-carousel
  3. For the images, drag in a content block into this component block and enter the following in the HTML tab of the content block. Treat each content block you drag in as one slide. In each slide, place three images
  4. <img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_02.jpg?Status=Temp&amp;sfvrsn=e42e706e_2" class="loaded" />
    
<img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_01.jpg?Status=Temp&amp;sfvrsn=e62e706e_2" class="loaded" />
    
<img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_podium.jpg?Status=Temp&amp;sfvrsn=1a2e706e_2" class="loaded" />
  5. Please note, these are not normal image elements and will may not display an image properly while editing or previewing. Replace the links within the data-src quotes with your images (you can get the links to images by viewing the image in the Image library of sitefinity; you can also use links from another host). Replace the 'replace' within each alt with a descriptive title of your image. Recommended image sizes:
    • Left Image: 308px by 410px
    • Center Image: 807px by 457px
    • Right Image: 514px by 386px
replacereplacereplace
replacereplacereplace

Horizontal Schedule Area

  1.  Drag in a 100% layout. Add section to the Wrapper and container push-down to Column 1
  2.  Drag in a content block for the title.
  3. Drag in an Events Widget (with MVC in the logo) underneath your title.
  4. In Content select your event.
  5. In List Settings, Use Limit -> 3 is enough.  List template set to Events Session Horizontal List
06.05.19
5PM
Welcome & Industry Narrative: Transportation Imperative

Association leaders from FMI and GMA share an industry-wide perspective on the impact of transportation issues and solutions projects at all points along the supply chain and the collaborative relationships that will carry us forward.

06.05.19
5:20 PM
The U.S. Transportation Situation

Hear a macro view of the landscape of our federal transportation environment, including FMCSA efforts that offer the potential to create more jobs in the commercial motor vehicle industry while maintaining the highest level of safety.

06.05.19
5:50 PM
Treat Your Transportation Spend as an Asset and Build a Better Bottom Line

Too many shippers try to control the uncontrollable when managing their transportation costs. Within the uncertainties of today’s transportation environment, this session will help you unlock the value of investing in your transportation area as an asset, managing from the inside out, and controlling the things you truly can control to drive savings directly to your bottom line.

Horizontal Schedule Area - Specific Single Sessions

  1.  Go to Layout --- click on Grid Widgets ----- Choose the grid 4+4+4 layout
  2.  Drag in the grid 4+4+4 layout. Add section to the Wrapper and container push-down to Column 1
  3.  Drag in a content block for the title.
  4. Drag in the Conference Sessions Widget
  5. In the Single Items Settings choose "Auto Generated Page" and then choose  "Conference Single Form" under the Detail templates
  6. Go to the Content tab and choose "One particular conference session only" and select the conference session you want to show.

Event Agenda Set Up

Preparing the Conference Sessions Widget
  • Log into the Sitefinity
  • Click on the Content tab
  •  Go to Conference Sessions
  • Enter:
    • Title
    • Start Date and Time, End Date and Time
    • Content (this is what will display on the detail view page)
    • Add Sponsor(s)
    • This will replace adding the sponsor logos to the “Content” section above
    • PRO TIP - Add a tag. Adding the same tag to all your Conference Sessions can help you sort through the larger database of Conference Sessions more easily. Be sure to use the SAME tag on each session for the schedule you are building. For example - 24 Legal and 2024 Legal are two different tags. Then when you're looking through all the Conference Sessions you can use the funnel icon and then custom filters and filter by tag to find the sessions related to your conference. 
  • Add Tracks
    • Then publish the new Conference Track.
    • You will need to go to Conference Tracks under the Content tab. Once open click on Create a Conference Track and proceed to give your new “Track” a title and an assigned hex code for color coding. You can also add a description for the “Track”.  -
    • **Adding additional custom “Tracks” for any event
      that has 9 “Tracks” which are essentially event session types already added: Keynote, Breakout, Network/Social Event, B2B Meetings, Track 1, Track 2, Track3, Track4, Track5. Conference Tracks-You will see that there is a Content Type named
    • Select and add the desired Tracks for displaying in the Event Key and adding the color coding to the Event Layout.
      are replacing “Categories” where you previously set the key color coding.Tracks
    • Add Speakers
      -Under Related Speakers, add any speakers for the session (this might be something you come back and do at a later date).
  • Then publish the Session
  • Note: You can Duplicate sessions to save time. Duplicating copies over all the content and categories and you can make adjustments from there.
  • Note: To filter by a specific event, use the funnel icon on the right-hand side of the page listing all the Conference Sessions. Click on Custom Filters and filter by Category for sessions Categorized by a specific event. (Please note, using this feature assumes that all the sessions have been properly categorized by those who entered the content originally) 
How to Use the Event Widget
  • After you have entered your Conference Sessions, go to Content and select Events.
  • Note: You can duplicate an event to save time and make adjustments.
  • Click the green Create and Event button.
  • Enter
    • Title (this does not get displayed anywhere)
    • Event start date and time
    • Event end date and time
    • Time zone
    • Speakers Page – enter the URL for the Event’s Speakers Page
    • Schedule Page – enter the URL for the Event’s Schedule Page
    • Under Related Data, click the plus sign and select the Conference Sessions for this Event. You can search for them by title or click on Show All Conference Sessions to see the full listing.
    • Once you have added all the Conference Sessions for your Event, you can hover over the three vertical dots next to each Conference Session and a four way arrow should come up. This allows you to move the Conference Sessions so they are in the correct order.
    • Publish the Event.
Adding the Conference Tracks and Event Widget to the Agenda Page
  • Go to the Pages tab at the top of Sitefinity.
  • Find the Schedule page for the Event you are working on and click to open the page.
  • You will need to add both a Conference Tracks widget and an Events widget to the page
  • You will find the Conference Tracks widget in the widget listing to the right under Conference Sessions – Add this ABOVE the Event widget on the page
  • Click on Edit once open, under Content select “Selected conference tracks and add the tracks wanted for this event for example: Keynote, Breakout, ect.
  • These will then display on the Key in the order that you have added them. You are able to reorder at any time by clicking on “Selected” and dragging them into your desired order. Click done selecting.
  • Click on the List settings tab and under “Sort conference tracks” in the 1st dropdown select “As set manually” and in the 2nd dropdown select “Event agenda track”. Lastly, click on “Single item settings” and set the Detail template dropdown to “Conference Track”
  • It’s very likely there is already an Events widget on the page. If so, Edit the Event widget.
  • On the Content tab change the event selected to the new event. On the List settings check the “No limit and paging” and on the “Sort events” dropdown select, “As set manually” on the “List template” dropdown you will want to choose “Event agenda”.
  • On the Single item settings select “Auto-generated page” and “Event details” in the “Detail template” dropdown.
  • Click on Advance.
  • Click on Model
  • Change ContentViewDisplayMode field to say Master
  • Click Save.
  • The Event widget will update with your new Event Conference Sessions. You can preview the page and then publish.
  • If your page is currently hidden, contact Nathalie, Bianca or Kelli to unhide the page. You can also use the website help form: http://intranet.fmi.org/WebsiteRequest
How to Use the Speaker Widget
  • Go to Content and select Speakers.
  • Note: You can duplicate a speaker to save time and make adjustments.
    • Note: If a speaker is already in the system you don’t need to add them again. For example, Leslie Sarasin has been a speaker before!
    • Enter:
    • Title – the speaker name
    • Bio
    • Last name
    • Title
    • Related Images – add headshot. FMI Staff are sized to 125x125. Only need to resize if the file is very large. Be sure to save the image in an image file that makes sense—defaults to 2015 Community Outreach Awards (which does not make sense)
    • Note: If a speaker does not have a headshot, use one of the headshot mock ups that is branded for the event. These are saved here:
  • Under Related Data, choose the event the Speaker is speaking at. This can be more than one Event.
  • Publish the Speaker
Update The Conference Session with the Speaker
  • Click on the Content tab
  • Go to Conference Sessions
  • Find the Conference Session the Speaker is speaking at and open it. Remember the Filter feature to save time.
  • Under Related Data, click on the plus sign and add the Speaker to the Conference Session.
  • Click Publish
How to Put the Speakers Widget on the Page
  • Go to the Pages tab at the top of Sitefinity.
  • Find the Speaker page for the Event you are working on and click to open the page.
  • It’s very likely there is already an Events widget on the page. If so, Edit the Event widget.
  • Change the Event selected to the new event. On the List Tab check the No limit and Paging and on List Template select Speaker.
  • Click on Advance.
  • Click on Model
  • Change on ContentViewDisplayMode field the value to Automatic
  • Click Save.
  • The Event widget will update with your speakers. You can preview the page and then publish.
  • If your page is currently hidden, contact Nathalie, Bianca or Kelli to unhide the page. You can also use the website help form: http://intranet.fmi.org/WebsiteRequest

 

 

Creating Featured Speakers Section

  1. Drag in a 33% + 34% + 33%
  2. In the wrapper add container equal-heights section push-down
  3. In each of the three columns add card card--thirds
  4. In each card, drag in an image widget and select your image. Using the same size image across all three cards is recommended
  5. Underneath each image (while still within the card), drag in a 100% layout element and label the wrapper card_text
  6. Within this new 100% layout element, drag in a content block and/or an image widget and fill with desired content.

Sponsor Area

  1. Drag in a 100% layout block.
  2. Drag in a javascript widget. Click the "Write Javascript" tab. Enter this snippet: 
                window.supporterUrl = 'URL_HERE';
  3. Replace URL_HERE with the url to your sponsors page, while leaving the quotes
  4. Drag in a content block. Edit the block and click on "Advanced", scroll down to "CssClass" and enter sfContentBlock mg-thumbnails-wrapper--4-across
  5. Click back to the "Simple" view and under the html tab, enter this html: 
    <div class="logo-wall">&nbsp;</div>
  6. Underneath the content block, drag in a Supporters (non-mvc) widget and select the category of your event. In List Settings, set it to "No Limit and paging" and set the List template to "For developers - Supporters Info"
  7.  To add the What Your Logo Featured Here? Use this code in a content block and change the link highlighted in yellow:
    <p style="text-align: center;">&nbsp;</p>
    <br />
    <br />
    <br />
    <h4 style="text-align: center;"><span class="arrow-heading">Want your logo featured here?</span></h4>
    <p style="text-align: center;">
    <a class="button-secondary button--big" href="http://www.dailylead.com/fmi/index.jsp" title="Speakers" target="_blank">Become a Sponsor</a>
    </p>
    <p>&nbsp;</p>
 

Smaller Sponsors List

  1. To create a smaller sponsors list, simply drag in a Supporters widget (non-MVC). You can put this almost anywhere you'd put another content block, but you want at least half the screen or so to keep it from looking squished.
  2. Click Edit on the widget.
  3. On the first tab, click Selection of Supporters, and select the category you want to filter by (usually Events > Name of Event).
  4. Under the List Settings tab, select a limit (if you only want to display a limited number of sponsors) or select "No limit or paging" to show all sponsors that fit your category.
  5. Optionally, in the sort dropdown, select Title (A-Z) to alphabetize your sponsors.
  6. Select a list template from the last dropdown. You want one of the options that looks like this:  
    mg-thumbnail-list--5-across
    The number in the template you select will be how many columns are used, so try to set a good amount for the amount of space you have and/or the number of sponsors you have. (e.g.: don't choose 5 columns if you're displaying in a very small space; don't choose 4 columns if you have 9 sponsors since you'll have one on a row all its own.)

Setting up the Attendee List

  1. Add a 100% layout block to the page.
  2. Add the container class to Column 1.
  3. If you don't have a header image or text above, add the section-2x class to the wrapper. You'll likely want at least a content block with an h1 element and the page title here.
  4. Drag in a content block for the attendees list to use.
  5. In the content block, switch to the HTML editor paste this text: 
    <div id="pull" data-meetingid="442BBE00000008">&nbsp;</div>
  6. Change the number assigned to data-meetingid to the ID of the Maxx meeting that you wish to show the attendees of. Make sure you leave the quotes intact.

Curation Tiles

Drag in a 100% width layout and add a banded-bright section-inner class to the wrapper and a container class to Column 1.

For creating a block-like treatment, first look at the number of rows you need (rows being dictated by complete lines of white space that span the entire treatment). Then, for each row, choose either a 33%+67%, 67%+33%, or a 33%+34%+33% layout element. In any case, name the wrapper class tile--banner .

In each column drag in a Tiles widget (under Curated Tiles, non-mvc). Chose to display 'one particular tile only'. Under Single Item Settings/ Detail Template, select Matrix - Single Tile. Small and medium tiles are reserved for columns of 33% or 34%, while large tiles are for 66%. Small tiles can be stacked in the same column.

Since 100% can't be divided three ways evenly, some alignment issues can arise. When creating this treatment, choose one column to apply the extra 1% to and stick with it throughout every row.

Suggested Image Sizes:
Small: 370px x 220px
Medium: 380px x 450px
Large: 760px x 450px

Exception occured while executing the controller. Check error logs for details.
Exception occured while executing the controller. Check error logs for details.

Font Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Normal Text

Navigation

When using a navigation widget:

  1. Go into the widgets' advanced settings
  2. For the SiteMapProviderName option set: CustomSitefinitySiteMap - Setting this option will enable protected pages to display in the navigation.

Horizontal Lists

add a list-across class to a list to make it display horizontal.

  • I am a list item
  • I am also a list item!
<ul class="list-across">
	<li>I am a list item</li>
	<li>I am also a list item!</li>
</ul>

add a list-across-divided class to a list to make it a divided horizontal list.

  • I am a list item
  • I am also a list item!
<ul class="list-across-divided">
	<li>I am a list item</li>
	<li>I am also a list item!</li>
</ul>

Buttons

<ul class="list-across">
	<li><a href="#" class="button">Hello world</a></li>
	<li><a href="#" class="button-secondary">Hello world</a></li>
</ul>

To make buttons bigger add a button--big class. 

<ul class="list-across">
    <li><a href="#" class="button button--big">Hello world</a></li>
    <li><a href="#" class="button-secondary button--big">Hello world</a></li>
</ul>

Text size options

This is some normal text. This is some normal text. This is some normal text. This is some normal text. This is some normal text.

Use a small-text class for some small text. This is some small text. This is some small text.

Use a medium-text class for some medium text. This is some medium text. This is some medium text.

Use a large-text class for large text. This is some large text. This is some large text.

Use a larger-text class for some larger text. This is some larger text. This is some larger text.

Use a largest-text class for the largest text.

Layout - Max width wrappers

This layout column has a max width (the content within does not strech to the edge of the browser on wide viewports).

Use a container class on a layout column to apply the sites' standard max width restriction.

This layout column has a more comfortable reading line length.

Add section to the wrapper and container and reading-container class on the same column to shorten the max-width restriction.

This layout column is more narrow.

In addition to the container class, also use a reading-narrow class on the same column to shorten the max-width restriction.

This layout column has the most narrow max width of all.

In addition to the container class, also use a reading-slim class on the same column to shorten the max-width restriction.

Layout Spacing

This layout block has "gutter-bottom'" class in the wrapper - which will add bottom margin.
This layout block has "component'" class - which will add top and bottom margin.
This layout block has "section'" class - which will add more top and bottom margin than "component".
This layout block has "section'" class - which will add more top and bottom margin than "component".
This layout block has "push-down'" class - which will add more bottom margin (twice as much as gutter-bottom)

I've been pushed down.

Divided columns

Drop in a multi-column layout block and add a divided-columns class to the wrapper.

Add a equal-heights class if you want the columns to appear equal in height.

Add a center-inside class if you want the content within the columns to be vertically centered.

"Banded" areas

The default background of the site is a light gray color.

This area has a '"banded" class for the background - and also a "padded" class for some inner spacing
Same as above but for this color background use '"banded-alt" Color code #E8E8E8
... "banded-secondary"
... "banded-tertiary"
... "banded-accent"
... "banded-dark"
... "banded-special"
... "banded-special--alt"


Mobile Display

If for some reason layout elements don't stack on mobile - add a mobile-zero class to the layout element.

Screen Shot 2017-03-21 at 4.09.15 PM

Responsive Embed


Use an embed-container class on an element wrapping rich media (like a youtube iframe embed)

Media Box

Add a media-box-heading class to an element for this heading style
sqf
Add a two column Sitefinity layout element and give the wrapper a media-box class.
sqf
Add a two column Sitefinity layout element and give the wrapper a media-box class.
leadership

Secondary Media Box

Drag in a two column layout and add a media-box--secondary class to the wrapper.

This variation of the media box is intended to span the width of the screen, so make sure that you don't set this up inside another layout area with a max width.


300x300

Call to action

Add a two column layout block and add a call-to-action class on the wrapper.

Do something
300x300

Equal Columns

If you are using two columns put a equal-heights class on the main wrapper layout block. This will stretch the background color of both columns so that the columns appear even in height.

Do something
 
Content Bar
Some bold text
This text should be short.
 
Another content bar

Add a two column (33/67) layout element and add a class content-bar to the wrapper.
Add a content-bar__head class to the first column (the first column should mainly just be a heading and icon).
Use any of the "banded" classes to apply the background colors to these columns.

Use a no-flex class on a new layout element within a columb to undo the horizontal layout of child elements.

Blog Cards

Drag in a 100% column layout. Add a section-2x class to the wrapper and add container in Column 1.

Into this layout element, drag a Blog Posts MVC widget. Select "Use Limit" and set to 3 items total. Choose "Matrix blog post cards" as your "List template."

In the Single Item Settings, under "Open Single Item In...", choose Selected existing page > (Voice of Food Retail Blog) > View

Use a Content Block with text (in H3 & Strong) for the heading and put it right above the blog card content.

To add a button to the blog below the cards, add a Content Block there and copy this HTML:
<p style="text-align: center;"><a href="/blog" class="button" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]eabdcb02-24aa-6724-9237-ff0000c12749">Read our blog</a></p>

Blog posts heading

A Deep Dive into Reducing Cadmium in the Food Supply

Dec 23, 2024
To help FDA’s efforts in providing research and developing food manufacturer and consumer resources on cadmium, FMI and other associations hosted a symposium to explore health risks, regulatory frameworks, and collaborative ...

Recognizing Excellence in Food Safety: FMI Foundation’s 2024 Scholarship Recipients

Dec 20, 2024
This year, the FMI Foundation, in partnership with The Safe Quality Food Institute (SQFI), celebrates 15 exceptional scholars with the 2024 Food Safety Auditing Scholarship....

Embracing the Future: FMI's Technology Initiatives for Q1 2025

Dec 18, 2024
At the doorstep of 2025, the scale of FMI's technology projects is truly remarkable, reflecting how technology continues to reshape grocery retail. Key initiatives for Q1 2025 focus on critical industry shifts and ...

News Cards

Drag in a 100% column layout and add a section-2x class to the wrapper and  container in Column 1.

Into this layout element, drag in a News MVC widget. Select "Use Limit" and set to 3 items total. Choose "Matrix news cards" as your "List template.

In the Single Item Settings, select existing page > Newsroom > Latest News > View

Latest News

Test News Article

Dec 26, 2024, 12:00 PM by Ferdinand Amano

Tile Banner

Generally used on landing pages.

Drag in a three column layout and add tile--banner  and tile--row classes to the wrapper.

This variation of the tile-banner is intended to span the width of the screen, so make sure that you don't set this up inside another layout area with a max width.

In each column drag in a Tiles widget (under Curated Tiles, non-mvc). Chose to display 'one particular tile only'. Under Single Item Settings/ Detail Template, select Matrix - Single Tile.

Resource Carousel

  1. add a 100% layout block and give the wrapper wide-carousel banded-secondary section-inner classes. Under Labels - Label column 1 'resources'.
  2. add two 100% layout blocks to the new resource area (these should be siblings and not nested within each other). edit the first one and give the wrapper a centered class. give column 1 a container class. Under Labels - Label column 1 'title'.
  3. on the second layout area give the wrapper a title class. In column 1 add a container class. Under Labels - Label column 1 'resources widget'.
  4. drop a content block into the 'title' area and add some text for the carousel title.
  5. drop a resources widget into the 'resources widget' area. Please use a limit less than or equal to ~10. Choose Resource Carousel in the List template settings.

FMI Fresh Food Resources

Power of Bakery

The Power of In-Store Bakery 2024

The Power of In-Store Bakery 2024 is the third annual report exploring shopper perceptions, attitudes and behaviors regarding in-store bakery in grocery stores.
The Power of Foodservice at Retail

The Power of Foodservice at Retail 2024

The Power of Foodservice at Retail 202 is the ninth in an annual report series exploring shopper perceptions, attitudes, and behaviors regarding deli-prepared foods in grocery stores.
Fresh Forward Action Guide

2024 FreshForward Action Guide

This 2024 Action Guide spotlights key takeaways from the FreshForward Conference recommended by attendees for each of the presentation tracks — Emerging Consumer Trends in Fresh, Sustainability and Packaging, and Tech and AI.
Hispanic Grocery Shopper

Grocery Shopper Snapshot: Hispanic Edition

This brief report provides insight into Hispanic grocery shopping habits, including attitudes, behaviors and purchase drivers.
Power of Plant-based Alternative Foods and Beverages

Power of Plant-Based Alternative Foods and Beverages 2024

This report dives into consumer perspectives and habits regarding plant-based alternative foods and beverages.
State of Fresh Foods 2024 Cover

The State of Fresh Foods 2024

Key findings of retailers' focus on fresh foods from data in FMI's report, "The Food Retailing Industry Speaks 2024."
The Food Retailing Industry Speaks

The Food Retailing Industry Speaks 2024

The food industry is experiencing enormous change. The latest version of The Food Retailing Industry Speaks relays many shifting developments and describes how the industry has worked hard to make progress in the face of all this change.
U.S. Grocery Shopper Trends

U.S. Grocery Shopper Trends 2024: Finding Value

Beyond price and quality, shoppers define value to include relevance, convenience and experience.
Power of Meat 2024

Power of Meat 2024

This report explores shopper perceptions, attitudes and behaviors regarding meat and poultry.
Power of Seafood 2024

The Power of Seafood 2024

This report explores a range of issues from the health and well-being focus of seafood shoppers to seafood cooking behaviors and needs and seafood sustainability consumer trends.
Power of Produce 2024

Power of Produce 2024

This report identifies the biggest trends in consumer purchasing and consumption of fruit and vegetables.
Winning Eating Occasions

Finding Growth for Food & Beverage Retail:

Winning Eating Occasions Throughout the Day – See how to be successful by considering dayparts, such as snacks, to inspire experimentation and create new memories through food.
Kearney Foodservice

How Will Foodservice Disrupt the Traditional Grocery Market?

Gain further insights on strategic thinking, establishing aspirations and evaluating capabilities to establish a viable foodservice operating model, while keeping consumer needs at the forefront.
Fresh Forward Action Guide 2022

FreshForward Action Guide: Key Steps to Move the Fresh Industry Forward

In this Action Guide you’ll find 10 key takeaways from the FreshForward 2022 conference along with action steps recommended by attendees.
produce safety best practices

Produce Guidance Document

The Produce Safety Best Practices Guide for Retailers will serve as a tool for both food safety and non-food safety retail employees focusing on building existing food safety programs.

Forms

Each form component should be wrapped in a layout element with one of these classes: 

mg-text
mg-select
mg-checks
mg-radios
mg-textarea
mg-captcha
mg-upload
mg-submit

Those classes can be added in the More options or Appearance sections of the form element edit menus.

Screen Shot 2017-04-05 at 2.20.18 PM

Select a choice

Select a choice

File upload

This field is required

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
See all icons

Large Icons

To display a large icon, use a large-icon class on the icon element.

 

Badge Icon

Add a icon-badge class to an icon to give it a dark 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

Using one of the CSS classes from this page is the preferred way of setting the 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.

Images with Captions

mg-caption: Caption Goes Here

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

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.

27 Nutrition
D Food Safety & Security
12 Government Relations
13 Human Resources
20 Training & Development
14 Industry Relations
1 General Marketing & Merchandising
28 Crisis Management
23 Financial Management
4B Energy
5 Coupons
9 Sustainability
64 Education
16 Meat & Poultry
19 Produce
1C Seafood
17 Consumer Behavior & Trends
18 Pharmacy
42 Retail Dietitian
11 Category Management
8 Distribution
A Research
3D Food Waste
2C Deli / Bakery
47 Supplier Diversity
2E Payments
2F Transportation
30 SQFI
32 Asset Protection
51 Risk Management
52 Safety
3C Corporate Social Responsibility
33 Consumer Affairs
54 Animal Welfare
65 Signature Events
57 Safemark
35 Health & Wellness
43 Family Meals
36 Fresh Foods
37 Private Brands
38 Retail Operations
46 Total Store Collaboration
4C Packaging
39 Technology
4E Digital Shopper
5C Advertising
5D Social Media
5E Loyalty Programs
5F Communications
60 Shopper Services
3B Supply Chain
34 Cyber Security
3E Food Fraud
66 Training & Development

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 2017 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 100% layout block and add js-check-content hidden classes to the wrapper. Label this area 'events area'
  2. add two 100% layout blocks into the layout block from the previous step (these two should be neighbors and not nested within each other)
  3. add a apply-hero-image class to the wrapper of the first layout block. Label this area 'events heading'
  4. add banded-bright section-inner classes to the wrapper of the second layout block and add container js-check-me-for-content classes to the Column 1 field. Label this area 'Events widget here'
  5. add two 100% layout blocks into the 'events heading' area. These should also be neighbors and not nested.
  6. add hero-image hidden admin-display classes to the wrapper of the first layout block. Label this area 'drop an image widget here'
  7. add container gutter-top--big classes to the wrapper of the second layout block and add banded padded--more classes in the Column 1 field. Label this area 'events heading'
  8. insert a 25% / 75% layout block into the 'events heading' area. Make the first column 22% in the widths options. Add divided-columns center-inside classes to the wrapper. add a larger-text class to column 1. Label column 1 'events heading' and label column 2 'events info'
  9. Add a content block to the 'events heading' area. The html structure should be: 
    <strong>Category Name</strong>
<div class="largest-text">Events</div>
  10. Add a content block to the 'events info' area and enter a description for the events.
  11. 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.
My
Events
These events will be so awesome. Vivamus in ornare magna. Cras dignissim lectus ullamcorper mi volutpat tincidunt. Proin at ante vestibulum, suscipit metus eget, eleifend ante.

  • Digital Seminar

    FMI Refresher on Member Benefits

    • Monday, January 27, 2025 (4pm - 4:30pm US/Eastern)
    Join us for a quick interactive and hands-on overview of these valuable offerings and meet the FMI membership team and subject matter experts from across your food industry association. Note: This presentation will not be recorded, so be sure to join us live on Monday, January 27th!
All Events

Simple events list

  1. Add a maxx event widget on a page.
  2. In the widget options - add ~/Mvc/Views/mg-events-2017_simple.ascx in the 'LayoutTemplatePath' option.
Exception occured while executing the controller. Check error logs for details.

Thumbnail lists

  1. Drop in a list widget to the page, choose 'Expanded list' and select one of the list templates:
    2. mg-thumbnail-list--2-across
mg-thumbnail-list--3-across
mg-thumbnail-list--4-across
mg-thumbnail-list--5-across		
Matrix - Title, Caption and Content
Matrix - Title and Caption
Linked Title
Sponsor Carousel
  2. Make sure the list you select only contains an image in the content of the list items.

I'm a Link - Tagline

<hr>
<h2><a href="#">I'm a Link</a> - Tagline</h2>
  • Publix Charities
  • Bimbo Bakeries
  • C&S Wholesale Grocers
  • blackhawk-network-logo
  • Kraft Heinz
  • Nestle
  • Albertsons
  • Burris Logistics
  • Key Foods
  • HEB

Sponsors

Publix Charities
Bimbo Bakeries
C&S Wholesale Grocers
blackhawk-network-logo
Kraft Heinz
Nestle
Albertsons
Burris Logistics
Key Foods
HEB


Matrix - Title and Caption

Use the caption field for the items' text.

Matrix - Title, Caption and Content

Use the caption field for the items' text.

Events

 

  1. Drag inside a container layout a grid-12 layout.
  2. On the grid-12 add on the Column field the following class print-hide.
  3. Drag a content block widget to add the expand all button.
  4. Drag the Event Widget and click edit.
  5. Select Events
  6. on the List Tab check the No limit and Paging and on List Template select Schedule.
  7. Click on Advance.
  8. Click on Model
  9. Change on ContentViewDisplayMode field the value to Automatic

Expand all button:

<p style="text-align:right;"><a class="button-secondary expand-toggle" href="#">Expand All</a></p>

Expand All

11:00 AM - 7:00 PM

Conference Registration

12:30 PM - 2:00 PM

Pre- Conference Committee Meeting

4:00 PM - 7:00 PM

Manufacturer/Retailer Exchange and Opening Reception

Meet leading suppliers of energy management, HVAC, refrigeration, design, construction and lighting systems. Discover potential business partners who can provide you with the resources and capabilities to remain competitive, cost-efficient and cutting-edge. Offered on two successive evenings.

7:00 AM - 6:00 PM

Conference Registration

7:00 AM - 8:00 AM

Breakfast

8:00 AM - 8:15 AM

Conference Welcome with Co-Chairs

Speakers:
  • John Lerch - Director, Energy and Facilities, Weis Markets, Inc.

8:15 AM - 9:00 AM

Opening Keynote

9:00 AM - 9:30 AM

Break

9:30 AM - 10:30 AM

General Session

10:30 AM - 10:30 AM

Break

11:00 AM - 12:00 PM

Concurrent Breakout Sessions

  • Energy
  • Refrigeration
  • Store Development

12:00 PM - 1:00 PM

Lunch

1:00 PM - 2:00 PM

Concurrent Breakout Sessions

  • Energy
  • Refrigeration
  • Store Development

2:00 PM - 2:30 PM

Break

2:30 PM - 3:30 PM

General Session

3:30 PM - 6:30 PM

Manufacturer/Retailer Exchange and Reception

Take advantage of another opportunity to meet leading suppliers of energy management, HVAC, refrigeration, design, construction and lighting systems. Discover potential business partners who can provide you with the resources and capabilities to remain competitive, cost-efficient and cutting-edge. 

7:00 AM - 4:00 PM

Registration

7:30 AM - 8:30 AM

Breakfast

7:30 AM - 8:30 AM

GreenChill Achievement Recognition Ceremony and Breakfast

EPA will host the GreenChill Partnership’s annual Achievement Recognition event. GreenChill partners represent approximately 30% of U.S. supermarkets, allowing the partners to benchmark their refrigerant management performance versus each other and the industry. Join us in congratulating this year’s winners. Come learn about best-in-class refrigerant emissions rate reductions, emissions prevention in new store construction, and emissions rates for advanced refrigeration technologies.

8:30 AM - 9:30 AM

General Session

9:30 AM - 10:00 AM

Break

10:00 AM - 10:45 AM

General Session

11:00 AM - 12:00 PM

Concurrent Breakout Sessions

  • Energy
  • Refrigeration
  • Store Development

12:00 PM - 1:00 PM

Lunch

1:00 PM - 2:00 PM

Concurrent Breakout Sessions

  • Energy
  • Refrigeration
  • Store Development

2:00 PM - 2:30 PM

Break

2:30 PM - 3:30 PM

Concurrent Breakout Sessions

  • Energy
  • Refrigeration
  • Store Development

3:30 PM - 4:00 PM

Break

4:00 PM - 5:00 PM

Closing Keynote

6:30 PM - 9:30 PM

Off-Site Social Event

7:00 AM - 7:45 AM

Facility and Design Tours Breakfast

8:00 AM - 12:00 PM

Facility and Design Tours

Tours require pre-registration and fee.

We are finalizing locations. Stay tuned for more information.

12:30 PM - 2:00 PM

Post-Conference Committee Meeting

Speakers

  1. Add a Grid-12 layout inside a container.
  2. add the class component to the column field.
  3. Drag the Event Widget and click edit.
  4. Content Tab: Select the event.
  5. List Settings Tab: select No limit and paging, on Sort event we recommend "By Title (A-Z) or (Z-A)" and on the List template select Speakers.
  6. Click the Advance button then Model button.
  7. On the field ContentViewDisplayMode change it to "Automatic".
  8. Click save and then save again.

John Lerch

Director, Energy and Facilities, Weis Markets, Inc.

John Lerch is the Director of Energy and Facilities for Weis Markets, Inc. a regional supermarket chain based in Sunbury, PA with stores located in New York, Pennsylvania, New Jersey, Maryland, Delaware, Virginia, and West Virginia. John is responsible for the energy procurement, facility maintenance, HVAC/ Refrigeration Maintenance, equipment maintenance, and the implementation and execution of energy efficiency and sustainability programs at 200+ stores.