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:

  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:

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

  2. Observe the different classes, including 'partner_screen'

  1. 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

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