Articles in this section

See more

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

Stephanie Kolcun
  • Updated
Follow

Note: This document references views and actions that are only available to Echo Administrators

Echo allows you to customize your domain's look and feel to suit your needs. From the Themes panel in the domain settings, you can

  • Change the icon that appears in the browser tab
  • Change the touch icon that is displayed on mobile devices when a user saves their Echo url book mark to their homescreen.
  • Change the logo that appears on the left side of the upper menu bar
  • Change the login logo that appears in the main area of the sign-in screen next to the school name
  • Change the menu logo that appears at the top of Echo's main menu
  • Select a different main menu icon (default is three bars)
  • Select a custom color for the main tool bar and application tabs
  • Select a predefined color theme for the entire domain or limit themes that users can select to personalize Echo.
  • Replace the entire lower panel of the login page with custom text or an embedded web page.

...

Considerations:

  • All Domain configuration, including images and themes, are inherited by all subdomains unless explicitly overwritten by a subdomain. By default, configurations at the district domain level will roll down to school domains.
  • 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.

...

Themes Control Panel

From the Domain tab the Admin app, open the More menu in the upper menu bar and select Domain settings.

Scroll down to locate the Theme card.

...

Icon

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

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

...

Touch Icon (Mobile Devices)

For mobile devices. a touch icon can be specified. This image is displayed on the mobile device's when the user saves their Echo website to their homescreen.

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

...

Toolbar Color

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

...

Application Tabs Color

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

...

Theme

Instead of manually selecting colors, you can also select from 19 pre-defined color themes that are applied throughout the platform including toolbars, buttons, etc. To select a theme, choose the desired default theme colors from the dropdown.

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. You can also choose to limit the themes available to users (see next section).

...

Limit Themes

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

...

Login Page

The custom login page feature allows you to dramatically change the login screen for your users. Rather than the large blue (or theme colored) panel, users can see an image or website. Schools can use exiting web pages or build custom pages that provide useful information and links.

There are three options for adding custom login page content:

  1. URL Option: Use an exiting web page (i.e. your school homepage) by entering the desired web address. Changes made to the website will be displayed inside Echo. For security reasons, the website must be hosted on a secured server (https not http). Note: Google doesn't allow Sites pages to be embedded in other apps.
    ...
  2. Text Option: The Text option provides you with a rich text editor which can be used to author custom content and images. TIP: When embedding .pdf documents into the rich text editor, you can use the code view (click the <> icon) to turn off the .pdf toolbar by inserting the following code into the image's attributes - #toolbar=0&navpanes=0&scrollbar=1
    ...
  3. File (.html) Option: The file option allows you to upload a .html file. This allows you to build an entirely customized page that is stored in Echo without the need for an external website. Once your webpage is completed, upload the file using the the File option.
  • Notes On Building A Custom .html File:
    • If not externally hosted on a secure website, page resources (images, videos, etc) must be uploaded to the Resources tab of the Admin app. To keep things organized, create a folder to hold the resources (i.e. "loginpage"). Click here to learn more about managing domain resources.
      ...
    • To reference domain resources within the .html document, use
               /Resource/<DomainId>/<PathToFile>
      where <DomainId> is the ID of the domain containing the resources and <PathToFile> is the relative path to file.
      ...
    • The following example is a simple .html document that references one image named "login_image.png" which is housed in the "loginpage" folder of the Resources tab in a domain who's ID is "987654321".

<!DOCTYPE html>
<html>
<body>
<img src="/Resource/987654321/loginpage/login_image.png" alt="Login Page Image">
</body>
</html>

...

...

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.

Related articles

Comments

0 comments

Please sign in to leave a comment.