Menu
Amazon Cognito
Developer Guide (Version Last Updated: 08/26/2017)

Specifying App UI Customization Settings for Your User Pool

You can use the AWS Management Console, or the AWS CLI or API, to specify customization settings for the built-in app UI experience. You can upload a custom logo image to be displayed in the app. You can also choose many CSS customizations.

You can specify app UI customization settings for a single client (with a specific clientId) or for all clients (by setting the clientId to ALL). If you specify ALL, the default configuration will be used for every client that has no UI customization set previously. If you specify UI customization settings for a particular client, it will no longer fall back to the ALL configuration.

Note

To use this feature, your user pool must have a domain associated with it.

The maximum allowable size for a logo image file is 100 KB.

Specifying CSS Customizations for the App

You can customize the CSS for the hosted app pages, with the following restrictions:

  • The CSS class names can only be from the following list:

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • Property values cannot contain HTML, @import, @supports, @page, or @media statements or Javascript.

You can customize the following CSS properties.

Labels
  • font-weight is a multiple of 100 from 100 to 900.

Input fields
  • width is the width as a percentage of the containing block.

  • height is the height of the input field in pixels (px).

  • color is the text color. It can be any standard CSS color value.

  • background-color is the background color of the input field. It can be any standard color value.

  • border is a standard CSS border value that specifies the width, transparency, and color of the border of your app window. Width can be any value from 1px to 100px. Transparency can be solid or none. Color can be any standard color value.

Text descriptions
  • padding-top is the amount of padding above the text description.

  • padding-bottom is the amount of padding below the text description.

  • display can be block or inline.

  • font-size is the font size for text descriptions.

Submit button
  • font-size is the font size of the button text.

  • font-weight is the font weight of the button text: bold, italic, or normal.

  • margin is a string of 4 values indicating the top, right, bottom, and left margin sizes for the button.

  • font-size is the font size for text descriptions.

  • width is the width of the button text in percent of the containing block.

  • height is the height of the button in pixels (px).

  • color is the button text color. It can be any standard CSS color value.

  • background-color is the background color of the button. It can be any standard color value.

Banner
  • padding is a string of 4 values indicating the top, right, bottom, and left padding sizes for the banner.

  • background-color is the banner's background color. It can be any standard CSS color value.

Submit button hover
  • color is the foreground color of the button when you hover over it. It can be any standard CSS color value.

  • background-color is the background color of the button when you hover over it. It can be any standard CSS color value.

Identity provider button hover
  • color is the foreground color of the button when you hover over it. It can be any standard CSS color value.

  • background-color is the background color of the button when you hover over it. It can be any standard CSS color value.

Password check not valid
  • color is the text color of the "Password check not valid" message. It can be any standard CSS color value.

Background
  • background-color is the background color of the app window. It can be any standard CSS color value.

Error messages
  • margin is a string of 4 values indicating the top, right, bottom, and left margin sizes.

  • padding is the padding size.

  • font-size is the font size.

  • width is the width of the error message as a percentage of the containing block.

  • background is the background color of the error message. It can be any standard CSS color value.

  • border is a string of 3 values specifying the width, transparency, and color of the border.

  • color is the error message text color. It can be any standard CSS color value.

  • box-sizing is used to indicate to the browser what the sizing properties (width and height) should include.

Identity provider buttons
  • height is the height of the button in pixels (px).

  • width is the width of the button text as a percentage of the containing block.

  • text-align is the text alignment setting. It can be left, right, or center.

  • margin-bottom is the bottom margin setting.

  • color is the button text color. It can be any standard CSS color value.

  • background-color is the background color of the button. It can be any standard color value.

  • border-color is the color of the button border. It can be any standard color value.

Identity provider descriptions
  • padding-top is the amount of padding above the description.

  • padding-bottom is the amount of padding below the description.

  • display can be block or inline.

  • font-size is the font size for descriptions.

Legal text
  • color is the text color. It can be any standard CSS color value.

  • font-size is the font size.

Logo
  • max-width is the maximum width as a percentage of the containing block.

  • max-height is the maximum height as a percentage of the containing block.

Input field focus
  • border-color is the color of the input field. It can be any standard CSS color value.

  • outline is the border width of the input field, in pixels.

Social button
  • height is the height of the button in pixels (px).

  • text-align is the text alignment setting. It can be left, right, or center.

  • width is the width of the button text as a percentage of the containing block.

  • margin-bottom is the bottom margin setting.

Password check valid
  • color is the text color of the "Password check valid" message. It can be any standard CSS color value.

Specifying App UI Customization Settings for Your User Pool (AWS Management Console)

You can use the AWS Management Console to specify UI customization settings for your app.

Note

You can view the hosted UI with your customizations by constructing the following URL, with the specifics for your user pool, and typing it into a browser: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> You may have to wait up to one minute to refresh your browser before changes made in the console appear.

Your domain is shown on the Domain name tab. Your app client ID and callback URL are shown on the App client settings tab.

To specify app UI customization settings

  1. Sign in to the Amazon Cognito console.

  2. In the navigation pane, choose Manage your User Pools, and choose the user pool you want to edit.

  3. Choose the UI customization tab.

  4. Under App client to customize, choose the app you want to customize from the dropdown menu of app clients that you previously created in the App clients tab.

  5. To upload your own logo image file, choose Choose a file or drag a file into the Logo (optional) box.

  6. Under CSS customizations (optional), you can customize the appearance of the app by changing various properties from their default values.

Specifying App UI Customization Settings for Your User Pool (AWS CLI and AWS API)

Use the following commands to specify app UI customization settings for your user pool.

To get the UI customization settings for a user pool's built-in app UI

To set the UI customization settings for a user pool's built-in app UI

  • AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <path-to-logo-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API: SetUICustomization