Assets

The folder assets may contain any files and subfolders that do not belong to other directories. You can use it for:

  • JavaScript styles (must be inside assets/js);
  • CSS styles (must be inside assets/css);
  • Images;
  • Fonts;
  • Anything else you need to include.

assets/js

assets/js directory is reserved and should only contain JavaScript files. To be used by the widget, specify these files in the manifest.json.

For example:

"assets": {
    "js": ["class.widget.js"]
}

assets/css

assets/css is reserved and should only contain CSS style files. To be used by the widget, specify these files in the manifest.json.

For example:

"assets": {
    "css": ["mywidget.css"]
}
CSS styles

CSS files may contain a custom attribute theme to define different style for a specific frontend themes.

Available themes and their attribute values:

  • Blue - [theme='blue-theme']
  • Dark - [theme='dark-theme']
  • High-contrast light - [theme='hc-light']
  • High-contrast dark - [theme='hc-dark']

Example:

.widget {
    background-color: red;
}

[theme='dark-theme'] .widget {
    background-color: green;
}