I have been working on automating the creation of user pools in AWS Cognito. To accomplish this, I am utilizing a yaml file to configure all aspects of the process including user attributes and IDPs. However, I am facing some challenges when it comes to customizing the sign-in page. I understand that I need to add CSS to certain classes, but I am unsure about where exactly to do so and what format to follow.
This is the method I used to accomplish it. You are now able to utilize the AWS::Cognito::UserPoolIdentityProvider resource
UserPoolUICustomization:
Type: AWS::Cognito::UserPoolUICustomizationAttachment
Properties:
UserPoolId: !Ref CognitoUserPool
ClientId: !Ref CognitoUserPoolClient2
CSS: ".logo-customizable {
max-width: 100%;
max-height: 100%;
}
.banner-customizable {
padding: 0px 0px 5px 0px;
background-color: #fff;
}
.label-customizable {
font-weight: 400;
}
.textDescription-customizable {
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: 16px;
}
.idpDescription-customizable {
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: 16px;
}
.legalText-customizable {
color: #747474;
font-size: 11px;
}
.submitButton-customizable {
font-size: 14px;
font-weight: bold;
margin: 20px 0px 10px 0px;
height: 40px;
width: 100%;
color: #fff;
background-color: #337ab7;
}"
You have the ability to customize the css classes provided and push updates using AWS CLI.
background-customizable
banner-customizable
errorMessage-customizable
idpButton-customizable
idpButton-customizable:hover
inputField-customizable
inputField-customizable:focus + more.
AWS gives you a list of classes used on cognito user pool UI that are customizable.
By using
--css ".classname{field : value}"aws cognito-idp set-ui-customizationFor example:
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>;}"
Currently, I am working on a Bootstrap website that is supposed to be a one-page site with a navigation bar at the top. However, I am facing an issue where the navbar is sticky only for the first section and then disappears as I scroll down. How can I make ...
I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...
I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...
When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...
I'm trying to set up a sidebar in Bootstrap that overlaps with a column. The goal is for the sidebar to appear when a button is clicked and disappear when the close button x is clicked. Despite using a Bootstrap row and column layout, I encountered is ...
Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout. The middle div has a minimum width defined. As a ...
My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...
Page Broken I've searched all over Stack Overflow for a solution to resolve this background image issue. I'm using Bootstrap for the boxes and removed any margins. The problem arises when setting the background as cover; in IE8, it doesn't ...
I was hoping to hide the first DIV if the second DIV is displayed on the front end, and vice versa upon page load. If the first DIV is set to 'block,' then the second DIV should be set to 'none.' And If the second DIV is set to &apos ...
I've created a wrapper div with a text div and an image div floating to the right. It should have been a simple task, but for some reason I can't seem to get it to work tonight. I'm completely stuck. Take a look at how it appears currently: ...
Is there a way to change the color of text in my navigation bar to #b3b3b3? It seems like I am limited to the colors provided by bootstrap. How can I work around this limitation? <nav class="navbar" style="color: #b3b3b3; background-col ...
I'm in the process of developing a user-friendly dashboard that incorporates Bootstrap 5.3.1's nested nav feature. However, I've encountered a problem where the navigation disappears when there is too much content on the page. To address thi ...
I am struggling with creating the bootstrap collapse menu. <div className='collapse' id='mobile-menu'> <button clasNames='navbar-toggler' type='button' data-togg ...
Right now, I am engaged in a process that involves: creating a canvas and attaching it to a division applying a background image through CSS to that canvas. drawing a hex grid on the canvas placing PNGs on the canvas. animating those PNGs to show "movem ...
I am working on implementing a modal for displaying an image gallery. The initial modal showcases thumbnails, and upon clicking a thumbnail, a secondary modal should open on top with larger images displayed in a carousel. The issue I'm facing is that ...
I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p> tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text si ...
I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...
Received an HTML sample from another company () and now I am attempting to create a web form based on it (). Using the same scripts, the basic structure mirrors the sample closely. After meticulously comparing the code, I can't find any discrepancies. ...
Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...
Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...