Styles and Assets

Styles

Use the app.css file in the app's root directory to define CSS styles for the templates in your app. The CSS rules apply to all instances of the app. You don't need to namespace them to prevent them from applying to the rest of the agent interface.

SASS syntax is supported. The only limitation is that you can't use @mixin or @import. In addition to the SASS docs, this presentation by Stewart Curry is informative.

The Bootstrap v2.3 framework is also supported. See Bootstrap v2.3 in Supported Libraries.

By default, the app.css file is blank. In the background, basic default styles are applied. First, a Bootstrap reset is applied. Second, the host page adds a few basic styles to make the app fit with the rest of the page.

Note: If you rely on inherited CSS from the Zendesk Support agent interface, you might find your app looks different in the top bar than it does in the sidebar.

Assets

The following assets are included in the assets folder for the layout template as well as for app listing and management pages in Zendesk Support:

  • logo.png - 320px square
  • logo-small.png - 128px square

Place any additional assets for your app in the assets folder.

Assets in templates

To specify an asset URL in a template file, use the {{assetURL 'name'}} template helper. Example:

<img src="{{assetURL 'plus1.png'}}" alt="thumbsup" />
...
Assets in app.css

To specify an asset URL in the app.css file, use the app-asset-url() helper. Example:

footer {
  background-image: app-asset-url("logo_footer.png");
}
Assets in app.js

To specify an asset URL in the app.js file, use the framework's this.assetURL() method. Example:

showSuccess: function() {
  var image_url = this.assetURL("congrats.png");
  ...
}

SVG icon

Please see Top bar and nav bar icon for more information.