# SetUICustomization Configures UI branding settings for domains with the hosted UI (classic) branding version. Your user pool must have a domain. Configure a domain with [CreateUserPoolDomain](API_CreateUserPoolDomain.md). Set the default configuration for all clients with a `ClientId` of `ALL`. When the `ClientId` value is an app client ID, the settings you pass in this request apply to that app client and override the default `ALL` configuration. This operation has no effect on managed login pages. To configure branding for domains with the managed login branding version, see [CreateManagedLoginBranding](API_CreateManagedLoginBranding.md). **Note** Amazon Cognito evaluates AWS Identity and Access Management (IAM) policies in requests for this API operation. For this operation, you must use IAM credentials to authorize requests, and you must grant yourself the corresponding IAM permission in a policy. [Signing AWS API Requests](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_aws-signing.html) [Using the Amazon Cognito user pools API and user pool endpoints](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pools-API-operations.html) ## Request Syntax ``` { "ClientId": "string", "CSS": "string", "ImageFile": blob, "UserPoolId": "string" } ``` ## Request Parameters For information about the parameters that are common to all actions, see [Common Parameters](CommonParameters.md). The request accepts the following data in JSON format. ** [ClientId](#API_SetUICustomization_RequestSyntax) ** The ID of the app client that you want to customize. To apply a default style to all app clients not configured with client-level branding, set this parameter value to `ALL`. Type: String Length Constraints: Minimum length of 1. Maximum length of 128. Pattern: `[\w+]+` Required: No ** [CSS](#API_SetUICustomization_RequestSyntax) ** A plaintext CSS file that contains the custom fields that you want to apply to your user pool or app client. To download a template, go to the Amazon Cognito console. Navigate to your user pool *App clients* tab, select *Login pages*, edit *Hosted UI (classic) style*, and select the link to `CSS template.css`. Type: String Length Constraints: Minimum length of 0. Maximum length of 131072. Required: No ** [ImageFile](#API_SetUICustomization_RequestSyntax) ** The image that you want to set as your login in the classic hosted UI, as a Base64-formatted binary object. Type: Base64-encoded binary data object Length Constraints: Minimum length of 0. Maximum length of 131072. Required: No ** [UserPoolId](#API_SetUICustomization_RequestSyntax) ** The ID of the user pool where you want to apply branding to the classic hosted UI. Type: String Length Constraints: Minimum length of 1. Maximum length of 55. Pattern: `[\w-]+_[0-9a-zA-Z]+` Required: Yes ## Response Syntax ``` { "UICustomization": { "ClientId": "string", "CreationDate": number, "CSS": "string", "CSSVersion": "string", "ImageUrl": "string", "LastModifiedDate": number, "UserPoolId": "string" } } ``` ## Response Elements If the action is successful, the service sends back an HTTP 200 response. The following data is returned in JSON format by the service. ** [UICustomization](#API_SetUICustomization_ResponseSyntax) ** Information about the hosted UI branding that you applied. Type: [UICustomizationType](API_UICustomizationType.md) object ## Errors For information about the errors that are common to all actions, see [Common Error Types](CommonErrors.md). ** InternalErrorException ** This exception is thrown when Amazon Cognito encounters an internal error. ** message ** The message returned when Amazon Cognito throws an internal error exception. HTTP Status Code: 500 ** InvalidParameterException ** This exception is thrown when the Amazon Cognito service encounters an invalid parameter. ** message ** The message returned when the Amazon Cognito service throws an invalid parameter exception. ** reasonCode ** The reason code of the exception. HTTP Status Code: 400 ** NotAuthorizedException ** This exception is thrown when a user isn't authorized. ** message ** The message returned when the Amazon Cognito service returns a not authorized exception. HTTP Status Code: 400 ** ResourceNotFoundException ** This exception is thrown when the Amazon Cognito service can't find the requested resource. ** message ** The message returned when the Amazon Cognito service returns a resource not found exception. HTTP Status Code: 400 ** TooManyRequestsException ** This exception is thrown when the user has made too many requests for a given operation. ** message ** The message returned when the Amazon Cognito service returns a too many requests exception. HTTP Status Code: 400 ## Examples ### Example The following example request applies CSS customization and a logo image (the Amazon Cognito logo) to the requested app client. #### Sample Request ``` POST HTTP/1.1 Host: cognito-idp.us-west-2.amazonaws.com X-Amz-Date: 20230613T200059Z Accept-Encoding: gzip, deflate, br X-Amz-Target: AWSCognitoIdentityProviderService.SetUICustomization User-Agent: Authorization: AWS4-HMAC-SHA256 Credential=, SignedHeaders=, Signature= Content-Length: { "ClientId": "1example23456789", "CSS": ".logo-customizable {\n\tmax-width: 60%;\n\tmax-height: 30%;\n}\n.banner-customizable {\n\tpadding: 25px 0px 25px 0px;\n\tbackground-color: lightgray;\n}\n.label-customizable {\n\tfont-weight: 400;\n}\n.textDescription-customizable {\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tdisplay: block;\n\tfont-size: 16px;\n}\n.idpDescription-customizable {\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tdisplay: block;\n\tfont-size: 16px;\n}\n.legalText-customizable {\n\tcolor: #747474;\n\tfont-size: 11px;\n}\n.submitButton-customizable {\n\tfont-size: 11px;\n\tfont-weight: normal;\n\tmargin: 20px -15px 10px -13px;\n\theight: 40px;\n\twidth: 108%;\n\tcolor: #fff;\n\tbackground-color: #337ab7;\n\ttext-align: center;\n}\n.submitButton-customizable:hover {\n\tcolor: #fff;\n\tbackground-color: #286090;\n}\n.errorMessage-customizable {\n\tpadding: 5px;\n\tfont-size: 14px;\n\twidth: 100%;\n\tbackground: #F5F5F5;\n\tborder: 2px solid #D64958;\n\tcolor: #D64958;\n}\n.inputField-customizable {\n\twidth: 100%;\n\theight: 34px;\n\tcolor: #555;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tborder-radius: 0px;\n}\n.inputField-customizable:focus {\n\tborder-color: #66afe9;\n\toutline: 0;\n}\n.idpButton-customizable {\n\theight: 40px;\n\twidth: 100%;\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-bottom: 15px;\n\tcolor: #fff;\n\tbackground-color: #5bc0de;\n\tborder-color: #46b8da;\n}\n.idpButton-customizable:hover {\n\tcolor: #fff;\n\tbackground-color: #31b0d5;\n}\n.socialButton-customizable {\n\tborder-radius: 2px;\n\theight: 40px;\n\tmargin-bottom: 15px;\n\tpadding: 1px;\n\ttext-align: left;\n\twidth: 100%;\n}\n.redirect-customizable {\n\ttext-align: center;\n}\n.passwordCheck-notValid-customizable {\n\tcolor: #DF3312;\n}\n.passwordCheck-valid-customizable {\n\tcolor: #19BF00;\n}\n.background-customizable {\n\tbackground-color: #fff;\n}\n", "ImageFile": "iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA2UExURd00TN9BV/Cmsfvm6f3y9P////fM0uqAj+yNmu6ZpvnZ3eNabuFNYuZneehzhPKzvPTAxwAAAOiMMlkAAAASdFJOU///////////////////////AOK/vxIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKDSURBVFhH7ZfpkoMgEISDHKuEw/d/2u2BQWMiBrG29o+fVsKatdPMAeZxc3Nz8w+ISekzmB++sYIw/I/tjHzrPpO2Tx62EbR2PNxFac+jVuKxRaV50IzXkUe76NOCoUuwlvnQKei02gNF0ykotOLRBq/nboeWRxAISx2EbsHFoRhK6Igk2JJlwScfQjgt06dOaWWiTbEDAe/iq8N9kqCw2uCbHkHlYkaXEF8EYeL9RDqT4FhC6XMIIEifdcUwCc4leNyhabadWU6OlKYJE1Oac3NSPhB5rlaXlSgmr/1lww4nPaU/1ylfLGxX1r6Y66ZZkCqvnOlqKWws59ELj7fULc2CubwySYkdDuuiY0/F0L6Q5pZiSG0SfZTSTCOUhxOCH1AdIoCpTTIjtd+VpEjUDDytQH/0Fpc661Aisas/4qmyUItD557pSCOSQQzlx27J+meyDGc5zZgfhWuXE1lGgmVOMwmWdeGdzhjqZV14x5vSj7vsC5JDz/Cl0Vhp56n2NQt1wQIpury1EPbwyaYm+IhmAQKoajkH51wg4cMZ1wQ3QG9efKWWOaDhYWnU6jXjCMdRmm21PArI+Pb5DYoH93hq0ZCPlxeGJho/DI15C6sQc/L2sTC47UFBKZGHT6k+zlXg7WebA0Nr0HTcLMfk/Y4Rc65D3iG6WDd7YLSlVqk87bVhUwhnClrx11RsVQwlAA818Mn+QEs71BhSFU6orsUfKhHp72XMGYXi4q9c64RXRvzkWurRfG2vI2be/VaNcNgpX0Evb/vio7nPMmj5qujkpQgSaPd1UcVqciHFDNZpOcGlcOPyi+AamCbIL9fitxAGeFN2Dl+3vZubm5u/4fH4Bd14HhIPdwZPAAAAAElFTkSuQmCC", "UserPoolId": "us-west-2_EXAMPLE" } ``` #### Sample Response ``` HTTP/1.1 200 OK Date: Tue, 13 Jun 2023 20:00:59 GMT Content-Type: application/x-amz-json-1.0 Content-Length: x-amzn-requestid: a1b2c3d4-e5f6-a1b2-c3d4-EXAMPLE11111 Connection: keep-alive { "UICustomization": { "ClientId": "1example23456789", "CSS": ".logo-customizable {\n\tmax-width: 60%;\n\tmax-height: 30%;\n}\n.banner-customizable {\n\tpadding: 25px 0px 25px 0px;\n\tbackground-color: lightgray;\n}\n.label-customizable {\n\tfont-weight: 400;\n}\n.textDescription-customizable {\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tdisplay: block;\n\tfont-size: 16px;\n}\n.idpDescription-customizable {\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tdisplay: block;\n\tfont-size: 16px;\n}\n.legalText-customizable {\n\tcolor: #747474;\n\tfont-size: 11px;\n}\n.submitButton-customizable {\n\tfont-size: 11px;\n\tfont-weight: normal;\n\tmargin: 20px -15px 10px -13px;\n\theight: 40px;\n\twidth: 108%;\n\tcolor: #fff;\n\tbackground-color: #337ab7;\n\ttext-align: center;\n}\n.submitButton-customizable:hover {\n\tcolor: #fff;\n\tbackground-color: #286090;\n}\n.errorMessage-customizable {\n\tpadding: 5px;\n\tfont-size: 14px;\n\twidth: 100%;\n\tbackground: #F5F5F5;\n\tborder: 2px solid #D64958;\n\tcolor: #D64958;\n}\n.inputField-customizable {\n\twidth: 100%;\n\theight: 34px;\n\tcolor: #555;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tborder-radius: 0px;\n}\n.inputField-customizable:focus {\n\tborder-color: #66afe9;\n\toutline: 0;\n}\n.idpButton-customizable {\n\theight: 40px;\n\twidth: 100%;\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-bottom: 15px;\n\tcolor: #fff;\n\tbackground-color: #5bc0de;\n\tborder-color: #46b8da;\n}\n.idpButton-customizable:hover {\n\tcolor: #fff;\n\tbackground-color: #31b0d5;\n}\n.socialButton-customizable {\n\tborder-radius: 2px;\n\theight: 40px;\n\tmargin-bottom: 15px;\n\tpadding: 1px;\n\ttext-align: left;\n\twidth: 100%;\n}\n.redirect-customizable {\n\ttext-align: center;\n}\n.passwordCheck-notValid-customizable {\n\tcolor: #DF3312;\n}\n.passwordCheck-valid-customizable {\n\tcolor: #19BF00;\n}\n.background-customizable {\n\tbackground-color: #fff;\n}\n", "CSSUrl": "https://auth.example.com/1example23456789/20250109170543/assets/CSS/custom-css.css", "CSSVersion": "20250109170543", "ImageUrl": "https://auth.example.com/1example23456789/20250109170543/assets/images/image.jpg", "UserPoolId": "us-west-2_EXAMPLE" } } ``` ## See Also For more information about using this API in one of the language-specific AWS SDKs, see the following: + [AWS Command Line Interface V2](https://docs.aws.amazon.com/goto/cli2/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for .NET V4](https://docs.aws.amazon.com/goto/DotNetSDKV4/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for C\$1\$1](https://docs.aws.amazon.com/goto/SdkForCpp/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for Go v2](https://docs.aws.amazon.com/goto/SdkForGoV2/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for Java V2](https://docs.aws.amazon.com/goto/SdkForJavaV2/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for JavaScript V3](https://docs.aws.amazon.com/goto/SdkForJavaScriptV3/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for Kotlin](https://docs.aws.amazon.com/goto/SdkForKotlin/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for PHP V3](https://docs.aws.amazon.com/goto/SdkForPHPV3/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for Python](https://docs.aws.amazon.com/goto/boto3/cognito-idp-2016-04-18/SetUICustomization) + [AWS SDK for Ruby V3](https://docs.aws.amazon.com/goto/SdkForRubyV3/cognito-idp-2016-04-18/SetUICustomization)