Tray Embedded / Core Topics / Whitelabelling / Auth-only dialog CSS
Auth-only dialog CSS
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:
Set up your auth-only dialog as explained in the Auth-only dialog guide
You will see that the screen has no CSS styling applied:
Right-click and choose 'inspect' to bring up the page elements
Observe the different classes, including 'partner_screen'
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
After making the CSS changes and re-running the auth-only dialog, you should see your new styling: