How do I customize my domain's styles and themes?

Open the vertical menu in the toolbar of Domain Details, select Domain settings

Upload the image to use for the application favicon. A favicon is used in a browser's address bar and/or next to the site name in bookmarks.

• Required file type: PNG
• Ideal size: 42x42

Upload the image to use when a user saves their Echo website to their homescreen.

• Required file type: PNG
• Ideal size: 192x192

Upload the image to use for the application logo. This appears in the upper left corner of your login screen.

• Required file type: PNG or JPG
• Ideal size: 72x72

Upload the image to use in the main area of the the sign-in screen. If not specified, the Logo image is used.

• Required file type: PNG or JPG
• Ideal size: 256x256

Upload the logo displayed in the Main Menu when expanded.

• Recommended file type: PNG
• Ideal size: 260x56

Change your Main Menu Icon; review your icon options (the default value is "fa-bars" from the Font Awesome Pro library).

If you want to change the color of your main toolbar throughout the domain, enter that color name here. All CSS colors are valid; click for a list of colors.

• Note: Specifying a color here overrides the ability for students and other users to choose their own theme colors (with the exception of the High Contrast setting).

If you want to change the color of your sub-toolbar throughout the domain, enter that color name here. All CSS colors are valid; click for a list of colors.

• Note: Specifying a color here overrides the ability for students and other users to choose their own theme colors (with the exception of the High Contrast setting).

Choose the app's default theme colors from the dropdown. These colors are applied throughout the platform, including toolbars, buttons, etc.

• Note: Specifying a color is just a default. Students and other users can choose their own theme colors to override this (with the exception of the High Contrast setting). If you want remove this option, you can specify the Toolbar and Application tabs colors above.

If you want to limit the theme color choices, enter the colors that you want to allow as options in this field. Separate colors with commas.

Indicate whether you want to use a File or URL for a custom login page background image. Upload the file or provide the URL in the field.

To reference images, or other resources, from within a relative HTML page (File), use the absolute prefix /Resource/<DomainId>/public/shadow/app/echo/<PathToFile>, where <DomainId> is the ID of the domain containing the resource and <PathToFile> is the relative path to the file.

Notes

• Domain configuration is inherited by all subdomains unless explicitly overwritten by a subdomain.
• For better display on high-density screen, store any image with a resolution two times the rendered size. For better performance, store large images as compressed JPG files.

Echo is constantly being improved based on the feedback from users and we strive to keep our documentation up to date.  If this document doesn’t match what you are seeing in Echo, please let us know.