Skip to Content


Design Studio only allows a single custom CSS file.


Allow a Design Studio application to use multiple CSS files.

Example Scenario: We would like to be able to combine an enterprise template CSS with an application specific CSS.


Use @import to import style rules from other style sheets.

Note: @import is generally discouraged in typical web development due to the sequential nature in which it loads as opposed to <link rel=”…> which downloads style sheets in parallel. Unfortunately, we do not have access to embed raw HTML hence the need for @import.

Approach #1 – Relative (Local & BI Launch Pad)

Path of least resistance 🙂 . The benefit of this approach is that it will work both when running your application locally (i.e. localhost) and via BI Launch Pad.

Step 1

Setup your application specific CSS to use @import. In the example below we are referring to our template CSS via a relative path.


Step 2

Ensure both CSS files are in the same folder within BI Launch Pad (e.g. Public Folders\Design Studio Template (mimes)).


Approach #2 – Absolute (Local Only)

If your additional CSS is located in a completely distinct location within BI Launch Pad, you can explicitly refer to it using the syntax below.

URL: /aad/zen/mimes/[Application_CUID]/Root Folder/Design Studio Template (mimes)/template.css 


To discover this location:

  1. Run application locally
  2. Open Chrome Developer Tools (CTRL + Shift + I)
  3. Navigate to your custom CSS via the Resources pane and “Open link in new tab”
  4. URL location will be visible in the address bar


Note: While this method works when running the application locally, the application fails to locate the CSS when executed from BI Launch Pad.

Approach #3 – Absolute (BI Launch Pad Only)

The following URL syntax allows us to explicitly refer to a CSS location that will work when the application is launched within BI Launch Pad.

URL: /BOE/portal/1501220001/zenwebclient/zen/mimes/[Application SI_ID]/Root Folder/Design Studio Template (mimes)/template.css


Similarly, Chrome Developer Tools was used to discover the location (albeit a different resource path).


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

    1. Former Member Post author

      Hey Mustafa,

      Thanks for link. Very eager to spend some time understanding the SDK better. Still got my enterprise hat on as it is early days 🙂



  1. Marco Jehle

    For Lumira Designer you can use a similar approach.

    You can add a application specific CSS within MIMES (Custom CSS=lumx://custom.css) and import the global css like this:”@import url(‘../../global//Root+Folder/[path to CSS on your BIP]’);

    This is working in local and BIP mode.

    Have a nice day!



Leave a Reply