Styles and Icons #

While customizing your Portal, keep the following in mind:

• any .css and .less files that live anywhere under src/lib and src/portlets will be automatically loaded
• assets are loaded first so they might get overridden by styles written in the Pragma Engine lib and portlets directories

For more information, see Styles and assets.

Add custom styles and icons #

In this section, we’ll go over one way you can customize the styling and icons in your Portal.

To customize the styling and icons in your Portal, add the configurations to platform/5-ext/portal/src/config/default.js for your overlay. Below is an example of adding custom styling and icons by editing your default.js.

module.exports = {
  common: {
    'assets.styles': ['css/common.less', 'css/example.css'],
    'assets.iconDirs': ['icons/example'],
  },
}

Styles #

To add custom styles (.css or .less) in Portal, do the following:

1. Add the file css/example.css to assets.styles to tell the overlay where to find the style sheet.
2. Add your custom css in platform/5-ext/portal/src/assets/css/example.css.

Icons #

Custom icons can be added and are loaded with the filename as the icon name. To add custom icons and override existing icons in Portal, do the following:

1. Add the path icons/example to assets.iconDirs to tell the overlay where to find them.
2. Add your custom icons in platform/5-ext/portal/src/assets/icons/example.
   • Icons must be .svg to appear in Portal.
   • Icons in assets.iconDirs will override the icons in the base directory that share the same name. For example, to replace the Portal logo name your logo logoPortal.svg.