To edit the Config Wizard CSS you can go to Account settings > Customization in your dashboard:
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:
1partner__screen2partner__screen--first3partner__screen--last4partner__screen__header5partner__screen__header__title6partner__screen__header__description7partner__screen__items8partner__item__title9partner__item--auth10partner__item--config11partner__item--public-url12partner__modal__delete-auth13partner__modal__edit-auth14partner__modal__new-auth15partner__message--error16partner__field__checkbox17partner__field__radio18partner__button--cancel19partner__button--previous20partner__button--finish21partner__button--next22partner__button--add23partner__footer24partner__footer__button-group25partner__footer__step-indicator26partner__footer__step-indicator__dot27partner__footer__step-indicator__dot--active
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 {3font-family: 'Phudu';4}
It is possible to set styling for individual solutions.
This can be done by wrapping styling using #partner__<solution_id>
as a wrapper for any individual changes you wish to make.
You can get the solution id for a particular solution from the url when editing that solution, or via the Embedded API get solution query
In the following example the main partner__screen
background has an individual setting for one solution and a global setting for all others:
1#partner__65c00fb4-420d-4de2-967f-60d37a8a068a {2.partner__screen {3background: #FFFAF0;4}5}6.partner__screen {7background: #F0F8FF;8}
Here we see the preview for a Solution which comes under the global background setting:
Remember that the CSS file is a global file that will be the same for all solutions.
Any one solution will only pick up individual styling if there is a wrapper using its solution id.
And here we see the preview for the Solution affected by the individual wrapper:
Note that when using the 'Solution to preview' drop-down you can paste the solution id to quickly jump to any of the solutions you have individually customized in order to preview them.
Note that once you save changes, it can take up to an hour for CSS changes to fully propagate to your applications globally.
Some further notes when editing CSS:
Avoid using more than 2 levels within a class (for example .partner__screen div h1 span
)
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.
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{2background: green!important;3}
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: