Skip to Content
Author's profile photo Former Member

Design Studio: Attach Multiple Custom CSS Files


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).


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Taygan,

      This is a good description of approaches for attaching multiple style sheets using standard features.  As a complementary option, the Design Studio SDK Custom CSS Collector component (available from the Design Studio SDK Development Community Repository) is also worth considering for dynamically loading multiple application-specific CSS files.



      Author's profile photo Former Member
      Former Member
      Blog 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 🙂



      Author's profile photo Marco Jehle
      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!