Design Studio: Attach Multiple Custom CSS Files

[Former Member]

Issue

Design Studio only allows a single custom CSS file.

Challenge

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.

Solution

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