Home » A-Z guides to set up and use Wizdom’s modules » Design & Branding » Employing Custom Styling and Custom JavaScript
[printicon align="left"]

Employing Custom Styling and Custom JavaScript

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

Custom Styling

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’ tab in the ‘Style’ module. You will then be presented to an overview of all CSS files created. Filter between ‘Enabled’, ‘Disabled’, and ‘All’ files. Per default enabled files are displayed.

Wizdom Digital Workplace
2) Click on the blue button with the text ‘+ New’ to create a new CSS file.
Wizdom Digital Workplace
3) In the box that appears, type in the name you wish for the file and click ‘SAVE’.
Wizdom Digital Workplace
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 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 untill you activate it by enabling it.

Wizdom Digital Workplace
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.

Wizdom Digital Workplace

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

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

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 ‘Custom JavScript’ 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.

Wizdom Digital Workplace
2) Click on the blue button with the text ‘+ New’ to create a new JavaScript file.
Wizdom Digital Workplace
3) In the box that appears, type in the name you wish for the file and click ‘SAVE’.
Wizdom Digital Workplace
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.

Wizdom Digital Workplace
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.

Wizdom Digital Workplace

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

Wizdom Digital Workplace

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.

Wizdom Digital Workplace