首页 > 解决方案 > 通过 cognitoConfig.yaml 文件自定义 AWS cognito 登录页面 CSS

问题描述

我正在自动化 AWS Cognito 中的创建用户池过程。我正在使用 yaml 文件来设置整个内容(即用户属性、IDP 等...)。我需要自定义登录页面,并且我知道我需要将 CSS 添加到特定的类列表中。我不明白在哪里或格式。

标签: cssyamlamazon-cognito

解决方案


我就是这样做的。您现在可以使用 AWS::Cognito::UserPoolIdentityProvider 资源

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;
  }"

推荐阅读