# Apply branding to managed login pages Branding and customization You might want to provide a consistent user experience between your authentication service and your application. You can accomplish this goal either with custom forms and back-end API operations in an AWS SDK, or with managed login. Managed login and the classic hosted UI are web front ends for the component of your application that serves authentication with user pools. To synchronize your managed authentication services with your application UX, you have two customization options: the branding editor and hosted UI branding. You can choose your preferred experience in the Amazon Cognito console and with user pool API operations. **The branding editor** The [branding editor](managed-login-brandingeditor.md) is the newest customization option for the newest user pools UI experience, [managed login](cognito-user-pools-managed-login.md). The branding editor is a no-code visual editor for managed login assets and style, and a set of API operations for programmatic configuration of a large number of configuration options. User pools that you configure with a [domain](cognito-user-pools-assign-domain.md) and managed login automatically render the branding-designer version of your login pages. **Hosted UI (classic) branding** The [hosted UI (classic) branding experience](hosted-ui-classic-branding.md) has two options: to modify a cascading stylesheets (CSS) file with a fixed set of style options, and to add a custom logo image. You can set these options in the Amazon Cognito console or with the [SetUICustomization](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) API operation. At the time that the service launched, Amazon Cognito had only this option. User pools that you configure with a [domain](cognito-user-pools-assign-domain.md) and the hosted UI branding version automatically render the classic version of your login pages. Your [feature plan](cognito-sign-in-feature-plans.md) might also support only the hosted UI. **Note** The branding editor and the classic branding experience modify the visual properties of your hosted authentication service. Currently, you can't modify the text that's displayed on your managed login pages, except to apply localization into one of several languages. For more information about localization, see [Managed login localization](cognito-user-pools-managed-login.md#managed-login-localization). ## Choose a branding experience and assign styles In the Amazon Cognito console, new user pools default to the **Managed login** branding experience. User pools that you set up before managed login was available will have **Hosted UI (classic)** branding. You can switch between managed login and hosted UI branding. When you change your **Branding version**, Amazon Cognito immediately applies the change to the user-interactive pages of your user pool domain. With managed login and the hosted UI, your user pool can have a style for each app client. Each app client can have a distinct branding *style*, but a user pool domain serves either managed login or the hosted UI. A style is the set of customization settings applied to an app client. You can set up one [custom domain](cognito-user-pools-add-custom-domain.md) and one [prefix domain](cognito-user-pools-assign-domain-prefix.md) per user pool. You can assign different branding versions to your custom and prefix domains. However, a prefix domain isn't fully functional when you also have a custom domain—the `.well-known` OIDC discovery endpoints *only* present custom-domain paths. You can only use the prefix domain for operations that don't require endpoint discovery (`openid-configuration`) in a user pool with this configuration. Because of these properties of user pools, you can effectively choose one branding version per user pool. You can assign styles to the app clients in a user pool where a domain is set to the managed login branding version. Styles are a set of visual settings made up of image files, display options, CSS values. When you assign a style to an app client, Amazon Cognito immediately pushes your updates to your user-interactive login pages. Amazon Cognito renders your user-interactive pages with your chosen branding version and the customization that you have applied to it. ### Update and delete styles When you create a style, you link it to an app client. To change a style assignment for an app client, you must first delete the original style. Currently, you can't copy settings between styles. You must do this programmatically. To replicate settings between styles and app clients, get the settings for a style with the [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) API operation and apply them with [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) or [UpdateManagedLoginBranding](https://docs.aws.amazon.com/). You can't change the assigned styles of an app client—you can only delete the original and set a new one. For more information about managing styles with API and SDK operations, see [API and SDK operations for managed login branding](managed-login-brandingeditor.md#branding-designer-api). **Note** Programmatic requests that create or update branding style must have a request size of no more than 2 MB. If your request is larger than this limit, break your request up into multiple `UpdateManagedLoginBranding` requests for groups of parameters that don't exceed the maximum request size. These requests don't result in unspecified parameters being set to default, so you can send partial requests without any effect on existing settings. You delete a style in the Amazon Cognito console from the **Managed login** menu. Under **Styles**, choose the style that you want to delete and choose **Delete style**. At a high level, the process of assigning branding to a domain consists of the following steps. 1. [Create a domain and set the branding version](cognito-user-pools-assign-domain.md). 1. Create a branding style and assign it to an app client. **To assign a style to an app client** 1. In the **Domain** menu of your user pool, create a domain and set the **Branding version** to **Managed login**. 1. Navigate to the **Managed login** menu. Under **Styles**, choose **Create a style**. 1. Choose the app client that you want to assign your style to, or create a new [app client](user-pool-settings-client-apps.md). 1. To start configuring your branding settings, choose **Launch branding editor**. **Topics** + [ ## Choose a branding experience and assign styles ](#managed-login-branding-choose) + [ # The branding editor and customizing managed login ](managed-login-brandingeditor.md) + [ # Customizing hosted UI (classic) branding ](hosted-ui-classic-branding.md) # The branding editor and customizing managed login Managed login branding The branding editor is a visual design and editing tool for your managed login webpages. It's built in to the Amazon Cognito console. In the branding editor, you start with a preview of your login pages and can proceed into a quick-setup option or a detailed view with advanced options. You can modify and preview style parameters or add a custom background image and logo. You can configure light mode and dark mode. ![\[A preview of the branding editor visual editor for Amazon Cognito user pools.\]](http://docs.aws.amazon.com/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) To begin, create a style that you can apply to your user pool or an app client. **To get started with the branding editor** 1. [Create a domain](cognito-user-pools-assign-domain.md) from the **Domain** tab, or update your existing domain. Under **Branding version**, set your domain to use **Managed login**. 1. Delete the existing app client style, if any. 1. In the **App clients** menu, select your app client. 1. Under **Managed login style**, select the syle assigned to your app client. 1. Choose **Delete style**. Confirm your selection. 1. Navigate to the **Managed login** menu in your user pool. If you haven't already, follow the prompt to select a [feature plan](cognito-sign-in-feature-plans.md) that includes managed login. You can also select **Preview this feature** if you want to check out the branding editor without making changes. 1. Under **Styles**, choose **Create a style**. 1. Choose the app client that you want to assign your style to and select **Create**. You can also create a new app client. 1. The Amazon Cognito console launches the branding editor. 1. Choose a tab where you want to start editing, or select **Launch editor** and enter [quick setup](#branding-designer-quick-setup). The following tabs are available: **Preview** See how your current selections look in your managed login pages. **Foundation** Set an overall theme, configure links to external identity providers, and style form fields. **Components** Configure styles for headers, footers, and individual UI elements. 1. To make choices about initial settings, enter quick setup. Select **Change settings category** and choose **Quick setup**. When you select **Proceed**, the branding editor launches with a set of basic options for you to configure. ## Text and localization You can't modify or localize text in the branding editor. Instead, add a `lang` query parameter to the URL that you distribute to users. This parameters causes your managed login pages to be localized into one of several available languages. For more information, see [Managed login localization](cognito-user-pools-managed-login.md#managed-login-localization). ## Quick setup The **Launch branding editor** button loads a visual editor for your managed login configuration where you can select from a variety of primary customization options. As you make selections, Amazon Cognito renders your managed login changes in a preview window. To return to the detailed settings menu, select the **Change settings category** button. **What should be the overall look and feel?** Configure basic theme settings for managed login. **Display mode** Choose a light-mode, dark-mode, or adaptive experience for your managed login. The adaptive settings defers to the user's browser preference when Amazon Cognito renders managed login. When you choose a browser-adaptive mode, you can choose different colors and logo images for light and dark mode. **Spacing** Set the default spacing between elements in the page. **Border radius** Set the rounding depth of the outer border of elements. **How should the page background look?** **Background type** The **Show image** checkbox indicates whether you want a background image or to set a solid background color. 1. To use an image, select **Show image** and choose a background image for light and dark modes. You can also set a dark-mode and light-mode **Page background color** for areas of the background that aren't covered by the image. 1. To use only a color for the background, deselect **Show image** and choose a light-mode and dark-mode **Page background color**. **How should forms look?** Configure settings for the form elements of managed login. Examples of form items are login and code prompts. **Horizontal alignment** Set the horizontal alignment of form fields. **Form logo** Set the positioning of your logo image. **Logo image** Choose a logo image file to include in the form element for light and dark modes. To upload an image, select the **Logo image** dropdown, choose **Add new asset**, and add a logo file. **Primary branding color** Set a theme color for light and dark modes. This color will be applied as the background color to all elements classified as primary. **How should headers look?** Choose whether you want to include a header in your managed login pages. The header can contain a logo image. **Header logo** Set the position of the logo image in your header. **Logo image** Choose a logo position and a logo image file to include in the header. To upload an image, select the **Logo image** dropdown, choose **Add new asset**, and add a logo file. **Header background color** Set the light and dark mode colors for the background of the header. ## Detailed settings In the detailed settings view, you can modify individual components in the **Foundation** and **Components**. The **Preview** tab displays a preview of managed login in the current context with your customizations. ![\[An AWS Management Console screenshot of detailed configuration of managed login components.\]](http://docs.aws.amazon.com/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) To enter the visual editor for a component, choose the edit icon in the tile for the component. From the theme studio editor, you can switch between components with the **Change setting category** button. ### Foundation **App style** Configure the basics of your managed login configuration. This category has settings for the overall theme, text spacing, and the page header and footer. **Display mode** Choose a light-mode, dark-mode, or adaptive experience for your managed login pages. When you choose a browser-adaptive mode, you can choose different colors and logo images for light and dark mode. **Spacing** Set the default spacing between elements in the page. **Authentication behavior** Configure styles for the buttons that connect your users to external identity providers (IdPs). This section includes the option **Domain search input** to have managed login prompt users for an email address and match them with their [SAML identity provider identifier](cognito-user-pools-managing-saml-idp-naming.md). **Form behavior** Configure styles for input forms: the positioning of inputs, colors, and alignment of elements. ### Components **Buttons** Styles for buttons that Amazon Cognito renders on managed login pages. **Divider** Styles for divider lines and boundaries between managed login elements like the input form and the external-provider sign-in selector. **Dropdown** Styles for dropdown menus. **Favicon** Styles for the image that Amazon Cognito provides for the tab and bookmark icon. **Focus rings** Styles for the highlights that indicate a currently-selected input. **Form container** Styles for the elements that bound a form. **Global footer** Styles for the footer that Amazon Cognito displays at the bottom of managed login pages. **Global header** Styles for the header that Amazon Cognito displays at the top of managed login pages. **Indications** Styles for error and success messages. **Option controls** Styles for checkboxes, multi-selects, and other input prompts. **Page background** Styles for the overall background of managed login. **Inputs** Styles for form-field input prompts. **Link** Styles for hyperlinks in managed login pages. **Text for page** Styles for in-page text. **Text for field** Styles for the text around form inputs. ## API and SDK operations for managed login branding API operations You can also apply branding to a managed login style with the API operations [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) and [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html). These operations are ideal for creating identical or slightly-modified versions of a branding style for another app client or user pool. Query the managed login branding of an existing style with the API operation [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html), then modify the output as needed and apply it to another resource. The `UpdateManagedLoginBranding` operation doesn't change the app client that your style is applied to. It only updates the existing style that's assigned to an app client. To completely replace the style for an app client, delete the existing style with [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html) and assign a new style with `CreateManagedLoginBranding`. In the Amazon Cognito console, the same is true: you must delete the existing style and create a new one. Setting up managed login branding in an API or SDK request requires that your settings be embedded in a JSON file that's converted to a `Document` datatype. The following is guidance for images that you can add and for generating programmatic requests to configure a branding style. ### Image assets [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) and [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) include an `Assets` parameter. This parameter is an array of image files in base64-encoded binary format. **Note** Programmatic requests that create or update branding style must have a request size of no more than 2 MB. The assets in your request might make it exceed this limit. If this is the case, break your request up into multiple `UpdateManagedLoginBranding` requests for groups of parameters that don't exceed the maximum request size. These requests don't result in unspecified parameters being set to default, so you can send partial requests without any effect on existing settings. Some assets have limitations on the filetypes that you can submit. **** | Asset | Accepted file extensions | | --- | --- | | FAVICON\$1ICO | ico | | FAVICON\$1SVG | svg | | EMAIL\$1GRAPHIC | png, svg, jpeg | | SMS\$1GRAPHIC | png, svg, jpeg | | AUTH\$1APP\$1GRAPHIC | png, svg, jpeg | | PASSWORD\$1GRAPHIC | png, svg, jpeg | | PASSKEY\$1GRAPHIC | png, svg, jpeg | | PAGE\$1HEADER\$1LOGO | png, svg, jpeg | | PAGE\$1HEADER\$1BACKGROUND | png, svg, jpeg | | PAGE\$1FOOTER\$1LOGO | png, svg, jpeg | | PAGE\$1FOOTER\$1BACKGROUND | png, svg, jpeg | | PAGE\$1BACKGROUND | png, svg, jpeg | | FORM\$1BACKGROUND | png, svg, jpeg | | FORM\$1LOGO | png, svg, jpeg | | IDP\$1BUTTON\$1ICON | ico, svg | Files of the SVG type support the following attributes and elements. ------ #### [ Attributes ] ``` accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan ``` ------ #### [ Elements ] ``` svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence ``` ------ ### Tools for managed login branding operations Amazon Cognito manages a file in the [JSON-Schema format](https://json-schema.org/docs) for the managed-login branding settings object. The following is how to programmatically update your branding style. **To update branding in the user pools API** 1. In the Amazon Cognito console, create a default managed login branding style from the **Managed login** menu of your user pool. Assign it to an app client. 1. Record the ID of the app client that you created the style for, for example `1example23456789`. 1. Retrieve the settings for the branding style with a [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API request with `ReturnMergedResources` set to `true`. The following is an example request body. ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. Modify the output of `DescribeManagedLoginBrandingByClient` with your customizations. 1. The response body is wrapped in a `ManagedLoginBranding` element that isn't part of the syntax for create and update operations. Remove this top level of the JSON object. 1. To replace images, replace the `Bytes` value with the Base64-encoded binary data of each image file. 1. To update settings, modify the output of the `Settings` object and include it in your next request. Amazon Cognito ignores any values in your `Settings` object that aren't in the schema that you receive in your API response. 1. Use the updated response body in a [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) or [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) request. If this request exceeds 2 MB in size, separate it out into multiple requests. These operations work in a `PATCH` model where original settings remain unchanged unless you specify otherwise. # Customizing hosted UI (classic) branding Hosted UI (classic) branding You can use the AWS Management Console, or the AWS CLI or API, to specify classic customization settings for the hosted UI. You can upload a custom logo image to be displayed in the app. You can also apply some cascading style sheets (CSS) options to the look and feel of the UI. You can customize the UI defaults and override individual [app clients](cognito-terms.md#term-appclient) with specific settings. Amazon Cognito applies the default configuration to every app client that doesn't have client-level settings. In the Amazon Cognito console and in API requests, the request that sets your UI customization must not exceed 135 KB in size. In rare cases, the sum of request headers, your CSS file, and your logo might exceed 135KB. Amazon Cognito encodes the image file to Base64. This increases the size of a 100 KB image to 130 KB, keeping five KB for request headers and your CSS. If the request is too large, the AWS Management Console or your `SetUICustomization` API request returns a `request parameters too large` error. Adjust your logo image to be no greater than 100KB and your CSS file to be no larger than 3 KB. You can't set CSS and logo customization separately. **Note** To customize your UI, you must set up a domain for your user pool. ## Specifying a custom logo in classic branding Amazon Cognito centers your custom logo above the input fields at the [Login endpoint](login-endpoint.md). Choose a PNG, JPG, or JPEG file that can scale to 350 by 178 pixels for your custom hosted UI logo. Your logo file can be no larger than 100 KB in size, or 130 KB after Amazon Cognito encodes to Base64. To set an `ImageFile` in [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) in the API, convert your file to a Base64-encoded text string or, in the AWS CLI, provide a file path and let Amazon Cognito encode it for you. ## Specifying CSS customizations in classic branding You can customize the CSS for the hosted app pages, with the following restrictions: + You can use any of the following CSS class names: + `background-customizable` + `banner-customizable` + `errorMessage-customizable` + `idpButton-customizable` + `idpButton-customizable:hover` + `idpDescription-customizable` + `inputField-customizable` + `inputField-customizable:focus` + `label-customizable` + `legalText-customizable` + `logo-customizable` + `passwordCheck-valid-customizable` + `passwordCheck-notValid-customizable` + `redirect-customizable` + `socialButton-customizable` + `submitButton-customizable` + `submitButton-customizable:hover` + `textDescription-customizable` + Property values can contain HTML, except for the following values: `@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. + **color** is the text color. Must be a [legal CSS color value](https://www.w3schools.com/cssref/css_colors_legal.php). **Input fields** + **width** is the width of the containing block as a percentage. + **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 CSS 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. + **color** is the text color. Must be a [legal CSS color value](https://www.w3schools.com/cssref/css_colors_legal.php). **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 four 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 four 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 four 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 three 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 CSS color value. + **border-color** is the color of the button border. It can be any standard CSS 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. + **color** is the text color for IdP section headers for example **Sign in with your corporate ID**. Must be a [legal CSS color value](https://www.w3schools.com/cssref/css_colors_legal.php). **Legal text** + **color** is the text color. It can be any standard CSS color value. + **font-size** is the font size. When you customize **Legal text**, you are customizing the message **We won't post to any of your accounts without asking first** that is displayed under social identity providers in the sign-in page. **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. + **background-color** is the color of the background for logs with transparent sections. Must be a [legal CSS color value](https://www.w3schools.com/cssref/css_colors_legal.php). **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. ## Customizing the hosted UI with classic branding in the 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:///login?response_type=code&client_id=&redirect_uri=` 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 **App integration** tab under **Domain**. Your app client ID and callback URL are shown under **App clients**. **To specify app UI customization settings** 1. Sign in to the [Amazon Cognito console](https://console.aws.amazon.com/cognito/home). 1. In the navigation pane, choose **User Pools**, and choose the user pool you want to edit. 1. [Create a domain](cognito-user-pools-assign-domain.md) from the **Domain** tab, or update your existing domain. Under **Branding version**, set your domain to use **Hosted UI (classic)**. 1. Choose the **Managed login** menu. 1. To customize UI settings for all app clients, locate **Style** under **Hosted UI settings** and select **Edit**. 1. To customize UI settings for one app client, go to the **App clients** menu and select the app client you want to modify, then locate **Hosted UI (classic) style** and select **Override**. Select **Edit**. 1. To upload your own logo image file, choose **Choose file** or **Replace current file**. 1. To customize hosted UI CSS, download **CSS template.css** and modify the template with the values you want to customize. Only the keys that are included in the template can be used with the hosted UI. Added CSS keys will not be reflected in your UI. After you have customized the CSS file, choose **Choose file** or **Replace current file** to upload your custom CSS file. ## Customizing the hosted UI with classic branding in the user pools API and with the AWS CLI 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, use the following API operations.** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **To set the UI customization settings for a user pool's built-in app UI, use the following API operations.** + AWS CLI from image file: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI with image encoded as Base64 binary text: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)