Introduction

Custom Styling and JavaScript are tools in the Design & Branding module that allow developers to create CSS and script files to extend Enterprise. Below we’ll walk you through how to use them.

 

In this article

• Custom styling
• Custom JavaScript

Employing the Custom Styling tool in the Design & Branding module, you can create CSS files to style your digital workplace.

To create a CSS file, do the following:

1) Click the ‘Custom styling’ section in the left menu. You will then be presented with an overview of all CSS files created. Filter between ‘Enabled’, ‘Disabled’, and ‘All’ files. Per default enabled files are displayed.
For CSS to be applied to Enterprise Modern, select the 'Modern custom styling' section.

2) Click button with the text ‘+ New’ to create a new CSS file.

 

3) Give the file a name and click 'Save'.

 

4) You will now see an overview of all CSS files, including the one you have just created.

Depending on how many CSS files that have been created for your solution you might see files with orange as well as green buttons to the right. The orange label indicate files that are disabled, the green indicate files that are enabled for your solution.

The file you have just created will appear below all other files already created. It will be disabled until you activate it by enabling it.

5) Write the desired CSS in the black field in the right part of the screen.

6) Press the green button in the top with the text ‘Save’ to save your work.

 

7) Bring the CSS file to work by clicking the green label with the text ‘Enable’ next to your file title.

The orange label with ‘Disable’ will be shown at enabled files and will disable the CSS file when clicked. The red label with the text ‘Delete’ will delete the CSS file.

Custom JavaScript

Custom JavaScript is a tool in Wizdom Style module that allows developers to create script files to extend Wizdom with functionality. Below we walk you through how to employ custom JavaScript.

To create a JavaScript file, do the following:

1) Click the ‘Modern Custom JavaScript’ tab in the ‘Style’ module. You will then be presented to an overview of all JavaScript files created. Filter between ‘Enabled’, ‘Disabled’, and ‘All’ files. Per default enabled files are displayed.

2) Click on the blue button with the text ‘+ New’ to create a new JavaScript file.

3) In the box that appears, type in the name you wish for the file and click ‘SAVE’.

4) You will now see an overview of all JavaScript files, including the one you have just created.

Depending on how many JavaScript files that have been created for your solution, you might see files with orange as well as blue buttons to the right. The orange buttons are files that are disabled, the blue buttons are files that are enabled for your solution.

The file you have just created will appear below all other files already created. It will be disabled until you activate it by enabling it.

5) Write the desired JavaScript in the black field in the right part of the screen

6) Press the green button in the top with the text ‘Save’ to save your work.

7) Bring the JavaScript file to work by clicking the blue button with the text ‘Enable’ next to your file title.

The orange button with the text ‘Disable’ will be shown at enabled files and will disable the JavaScript file. The red button with the text ‘Delete’ will delete the JavaScript file.