Updating custom system icons

iMIS system icons have been updated from PNG to SVG (.svg) for the enhanced scalability, smaller file size, and customization options that the SVG file format offers. All out-of-the-box website themes have been updated to support the new SVG icons; however, customized themes may require additional adjustments. Review the following to determine if your custom theme must be updated.

Custom Staff site navigation icons

If the Staff site theme contains custom auxiliary navigation icons, then you will need to add new CSS selectors to your theme prior to upgrading to ensure your icons function properly after the upgrade. Out-of-the-box, the SVG-enabled CSS class has been added to the Constellations master page used by Orion. Custom copies of Orion now require additional CSS selectors that include the SVG-enabled class to target customized versions of the icons below.

To add the new CSS selectors to the theme, add the following selectors to any CSS rules targeting the custom icons:

Copy 
.wrapper.SVG-enabled .nav-aux-cart a:before { }
.wrapper.SVG-enabled .nav-aux-cart .nav-aux-account a:before { } 
.wrapper.SVG-enabled .obo-toggle:before { }
.wrapper.SVG-enabled .transaction-date-toggle:before { }
.wrapper.SVG-enabled .ste-toggle:before { }
.wrapper.SVG-enabled .header-search > .header-search:before { }
.wrapper.SVG-enabled .navbar-toggle .icon-search:before { }
.wrapper.SVG-enabled .search-toggle:before { } 

Custom public-facing navigation icons

If the public-facing themes contain custom auxiliary navigation icons, you must enable the new SVG version of these icons. The auxiliary navigation icons pictured below will remain PNGs within public themes by default.

You can enable the new SVG version of these icons in public themes by adding the SVG-enabled class to the Website layout code .

Before upgrading to iMIS EMS, do the following:

  1. Go to RiSE > Theme Builder > Website layouts.
  2. Select a website layout. Click Edit to modify the layout.
  3. In the Layout code, add the SVG-enabled class (case sensitive) to the div element with id=”masterWrapper” .
  4. Click Save.

Custom system icons

Custom System icons are no longer supported and are overwritten by the new SVG icons upon upgrading. If the theme contains custom System icons, review the theme to ensure the new icons function properly.

If any of the following icons have been changed, they will be overwritten after the upgrade. Review the theme to ensure these icons are not broken after the upgrade.