Steps to configure custom styling:

1. Download the CSS template
2. Modify the CSS template as needed (refer to class names and descriptions in the next section)
3. Send the CSS file back to AHI along with any relevant assets
4. AHI will provide confirmation when the CSS update is completed

‍

CSS class names and descriptions:

For the main-body, we strongly recommend a light colored background, white or close to white. This will ensure the best scan results by helping to illuminate the face while avoiding additional unnatural color tints.

1. ^header-logo - Customize the icon, note that customization provided here will override the value set by the config link.
2. ^main-header - Customize the header of the page, a background color / image can be provided. ^display property can be set to ^none to hide the header completely.
3. ^header-icon - Customize the color of the header icon, ^display property can be set to ^none to hide icon.
4. ^main-body - Customize the background color / image of the main body of the measurement screen.
5. ^{measurementHelpButton} - Customize the size and border color of the help button.
6. ^{start-camera-button} - Controls the Start Camera button. This can be used to control the background / text color, the width of the button and the text style. In order to control the different states of the button, classes for ^:hover and ^:active can also be specified.
7. ^{measurement-canvas} - Controls the background of the measurement canvas before the camera is started, a background color or image can be specified.
8. ^{start-measurement-button} - Controls the Start Measurement button. This can be used to control the background / text color, as well as the width of the button and the text style. In order to control the different states of the button, classes for ^:hover and ^:active can also be specified.
9. ^{mobile-top-bar} - Controls the background color of the toolbar at the top of the screen on mobile devices.
10. ^{mobile-top-bar-icon} - Controls the color of the buttons in the toolbar at the top of the measurement screen on mobile devices.
11. ^{cameraSelectRoot} - Controls the styling of the camera dropdown menu when unexpanded.
12. ^MuiMenu-list - The background color of the camera menu list can be specified here.
13. ^{MuiMenuItem-root:hover} - Controls the styling of the individual menu items of the camera dropdown menu during mouse hover.
14. ^{cameraMenuItem:focus} - Controls the styling of the individual menu items of the camera dropdown menu when in focus.

Note: Additional styling and content options can be found in the next section.

‍

‍

Additional styling/content:

We provide the ability to display a header image above the camera selector (desktop view only). This allows you the option to flexibly include additional brand elements, designs and text in the form of an image.

How to use this?

• It is recommended to use an image with a width of 740px. The image height should be a maximum of 150px.
• Host the image on a server and share the URL with AHI.
• AHI will confirm once the image is attached to your scan page.

‍