Config Wizard CSS

Overview
Copy

In order to customize the Configuration Wizard which pops up when End Users are configuring a Solution Instance for their own use, it is possible to upload your own custom CSS in your Partner Account settings.

This will allow you to make sure that Config Wizard screens visible to End Users are in keeping with your branding.

It is recommended that you only make simple styling changes to the Config Wizard. Changing the layout and positioning of items may break the display and may also be subject to being overwritten by product updates. The main purpose of this feature is to allow styling changes to colours, fonts, the shape/roundness of buttons, the thickness of borders etc.

Activate Config Wizard CSS by setting Embedded ID
Copy

To activate the feature you first of all need to set an Embedded ID (e.g. the initials of your company)

Editing the Config Wizard CSS
Copy

You have a choice of either uploading custom css files (using the 'choose file' button), or using the in-app editor and live preview facility (using the 'Edit & Preview' button).

Downloading the pre-populated CSS/LESS file or using the Edit & Preview function will show you the classes available to work with.

You can work with elements according to the following example:

  • partner__item affects all items in the UI

  • partner__item--auth specifically affects all authentication items (e.g. auth drop-down list)

So the following rule could be implemented to affect all authentication items .partner__item--auth > div { color: red; }

The following screenshot shows the live edit and preview when customizing your CSS:

Following is the full list of available classes:

1
partner__screen
2
partner__screen--first
3
partner__screen--last
4
partner__screen__header
5
partner__screen__header__title
6
partner__screen__header__description
7
partner__screen__items
8
partner__item__title
9
partner__item--auth
10
partner__item--config
11
partner__item--public-url
12
partner__modal__delete-auth
13
partner__modal__edit-auth
14
partner__modal__new-auth
15
partner__message--error
16
partner__field__checkbox
17
partner__field__radio
18
partner__button--cancel
19
partner__button--previous
20
partner__button--finish
21
partner__button--next
22
partner__button--add
23
partner__footer
24
partner__footer__button-group
25
partner__footer__step-indicator
26
partner__footer__step-indicator__dot
27
partner__footer__step-indicator__dot--active

Using customized fonts
Copy

You can use google fonts or self hosted fonts on a CDN to customize typography.

1
@import url('https://fonts.googleapis.com/css2?family=Phudu&display=swap');
2
.partner__screen {
3
font-family: 'Phudu';
4
}

Testing your CSS
Copy

You can create a test project and solution before running our demo app in order to preview and check that your CSS is working as expected.

Note on Caching
Copy

Note that once you save changes, it can take up to an hour for CSS changes to fully propagate to your applications globally.

Further Notes
Copy

Some further notes when editing CSS:

  1. Avoid using more than 2 levels within a class (for example .partner__screen div h1 span)

  2. Analysis of the source CSS for the End User Config Wizard will show that there are some Tray-specific classes (such as 'header_123ABC123QWE') for elements in the wizard. These are hashed on deployment so will change regularly. Therefore you should not attempt to use these as customizable classes.

  3. Some elements may require the use of !important to take effect. For example, in order to change the color of the 'Next' button...

1
.partner__button--next{
2
background: green!important;
3
}

Auth-only dialog CSS
Copy

If you are using the Auth-only dialog (i.e. your integration does not require End Users to carry out any personalization beyond authenticating with services) then it is possible to whitelabel the CSS using Tray's built-in CSS Editor.

You can do this with the following steps:

1. Set up your auth-only dialog as explained in the Auth-only dialog guide

2. You will see that the screen has no CSS styling applied:

3. Right-click and choose 'inspect' to bring up the page elements

4. Observe the different classes, including 'partner_screen'

5. In the Tray UI, go to settings & people > customization > edit & preview:

Here you can modify .partner_screen to be whatever style you want

It is not possible to use the 'preview' function to view changes to auth-only dialog CSS. You will need to apply the changes and then run the dialog in your browser to view them (changes might take a few minutes to take effect, as css is cached).

Making changes to this class will affect it across all your solutions

6. After making the CSS changes and re-running the auth-only dialog, you should see your new styling: