0% found this document useful (0 votes)
38 views2 pages

AWS Cognito UI Customization Guide

The document contains CSS code to customize the UI of an AWS Cognito user pool. The CSS code styles various elements like the logo, banner, buttons, labels, fields, and background. It sets properties like colors, sizes, positions etc. to control the look and feel of the user interface.

Uploaded by

Hrithik Sawhney
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
38 views2 pages

AWS Cognito UI Customization Guide

The document contains CSS code to customize the UI of an AWS Cognito user pool. The CSS code styles various elements like the logo, banner, buttons, labels, fields, and background. It sets properties like colors, sizes, positions etc. to control the look and feel of the user interface.

Uploaded by

Hrithik Sawhney
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

aws cognito-idp set-ui-customization --user-pool-id us-east-1_b4v7jbR5K --client-id

52kv8gqpis4ska13bsr4p6lld4 --css ".logo-customizable{ max-width: 60%; max-height:


30%;}.banner-customizable{ padding: 30px 0px 30px 0px; background-color: rgba(0, 0,
0, 0); margin: 0; background-position: 40px 40px; background-size: 200px 20px;
background-repeat: no-repeat; background-image: url([Link]
[Link]/nexus/image/Logo_Amagi-
[Link]);}.label-customizable{ font-weight: 400; color: white !important;
padding-top: 20px;}.textDescription-customizable{ padding-top: 10px; padding-
bottom: 10px; display: block; font-size: 16px; color: white;}.idpDescription-
customizable{ padding-top: 10px; padding-bottom: 10px; display: block; font-size:
16px; color: white;}.legalText-customizable{ color: #747474; font-size: 11px;
display:}.submitButton-customizable{ font-size: 18px; font-weight: 600; margin: -
40px 0px 0px 0px; height: 40px; width: auto; color: rgb(54, 63, 69); background-
color: rgb(247, 208, 2); font-family: Roboto, sans-serif; text-transform:
uppercase;}.submitButton-customizable:hover{ color: black; background-color:
rgb(255, 230, 2);}.errorMessage-customizable{ padding: 5px; font-size: 14px; width:
100%; background: #F5F5F5; border: 2px solid #D64958; color: #D64958;}.inputField-
customizable{ width: 100%; height: 34px; color: #555; background-color: #2e2e2e;
border: 1px solid #474747;}.inputField-customizable:focus{ border-color: #66afe9;
outline: 0;}.idpButton-customizable{ height: 40px; width: 50% !important; text-
align: center; margin-bottom: 15px; color: rgb(54, 63, 69); background-color:
rgb(247, 208, 2); border-color: rgb(247, 208, 2); font-family: Roboto, sans-serif;
font-size: 16px; font-weight: 600; margin-left: 30px; text-transform: uppercase;
border-radius: 4px;}.idpButton-customizable:hover{ color: black; background-color:
rgb(255, 230, 2);}.socialButton-customizable{ border-radius: 2px; height: 40px;
margin-bottom: 15px; padding: 1px; text-align: left; width: 100%;}.redirect-
customizable{ text-align: right; color: #e7e7e7; display: inline-block; width:
500px; margin-right: 50px; padding-top: 20px;}.passwordCheck-notValid-customizable{
color: #DF3312;}.passwordCheck-valid-customizable{ color: #19BF00;}.background-
customizable { background-color: #f0f0f0; background-position-y: 0px; position:
fixed; width: 100vw !important; padding-bottom: 0; margin-left: 0; margin-top: 0;
padding-left: 0; padding-right: 0; padding-top: 0; display: none; top: 0; left: 0;
bottom: 0; right: 0; background-image: url([Link]
[Link]/nexus/image/banner2_cp.jpeg); background-size: 100vw 100vh; min-
height: 100vh; overflow-y: auto;}"

aws cognito-idp set-ui-customization --user-pool-id us-east-1_b4v7jbR5K --client-id


52kv8gqpis4ska13bsr4p6lld4 --css ".logo-customizable{ max-width: 60%; max-height:
30%;}.banner-customizable{ padding: 30px 0px 30px 0px; background-color: rgba(0, 0,
0, 0); margin: 0; background-position: 40px 40px; background-size: 200px 20px;
background-repeat: no-repeat; background-image: url([Link]
[Link]/nexus/image/Logo_Amagi-
[Link]);}.label-customizable{ font-weight: 400; color: white !important;
padding-top: 20px;}.textDescription-customizable{ padding-top: 10px; padding-
bottom: 10px; display: block; font-size: 16px; color: white;}.idpDescription-
customizable{ padding-top: 10px; padding-bottom: 10px; display: block; font-size:
16px; color: white;}.legalText-customizable{ color: #747474; font-size: 11px;
display: none;}.submitButton-customizable{ font-size: 18px; font-weight: 600;
margin: -40px 0px 0px 0px; height: 40px; width: auto; color: rgb(54, 63, 69);
background-color: rgb(247, 208, 2); font-family: Roboto, sans-serif; text-
transform: uppercase;}.submitButton-customizable:hover{ color: black; background-
color: rgb(255, 230, 2);}.errorMessage-customizable{ padding: 5px; font-size: 14px;
width: 100%; background: #F5F5F5; border: 2px solid #D64958; color:
#D64958;}.inputField-customizable{ width: 100%; height: 34px; color: #555;
background-color: #2e2e2e; border: 1px solid #474747;}.inputField-
customizable:focus{ border-color: #66afe9; outline: 0;}.idpButton-
customizable{ height: 40px; width: 50% !important; text-align: center; margin-
bottom: 15px; color: rgb(54, 63, 69); background-color: rgb(247, 208, 2); border-
color: rgb(247, 208, 2); font-family: Roboto, sans-serif; font-size: 16px; font-
weight: 600; margin-left: 30px; text-transform: uppercase; border-radius:
4px;}.idpButton-customizable:hover{ color: black; background-color: rgb(255, 230,
2);}.socialButton-customizable{ border-radius: 2px; height: 40px; margin-bottom:
15px; padding: 1px; text-align: left; width: 50% !important; margin-left:
30px;}.redirect-customizable{ text-align: right; color: #e7e7e7; display: inline-
block; width: 720px; margin-right: 50px; padding-top: 20px;}.passwordCheck-
notValid-customizable{ color: #DF3312;}.passwordCheck-valid-customizable{ color:
#19BF00;}.background-customizable { background-color: #f0f0f0; background-position-
y: 0px; position: fixed; width: 100vw !important; padding-bottom: 0; margin-left:
0; margin-top: 0; padding-left: 0; padding-right: 0; padding-top: 0; display: none;
top: 0; left: 0; bottom: 0; right: 0; background-image: url([Link]
[Link]/nexus/image/banner2_cp.jpeg); background-
size: 100vw 100vh; min-height: 100vh; overflow-y: auto;}.socialButton-
[Link]-button > span:nth-child(2){visibility: hidden;}"

.background-customizable > div:nth-child(2){ margin-top: 20px; margin-left: 50%;


margin-right: 3%; overflow: auto; border-radius: 8px; backdrop-filter: blur(12px);
background-color: rgba(64, 64, 64, 0.9); display: block;}

.[Link]-button > span:nth-child(2){visibility: hidden;}

You might also like