I am automating the creating userpool process in AWS Cognito. I am using a yaml file to set the whole thing (i.e. user attributes, IDP, etc...). I need to customize the sign in page, and I know enough that I need to add CSS to specific list of classes. I don't understand where or the format.
This is how I did it. You can now make use of 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 can modify the css classes provided and use AWS CLI to push updates.
background-customizable
banner-customizable
errorMessage-customizable
idpButton-customizable
idpButton-customizable:hover
inputField-customizable
inputField-customizable:focus + few more.
AWS provides the list of classes used on cognito user pool UI which you can modify.
use --css ".classname{field : value}" with aws cognito-idp set-ui-customization command to update.
Like :-
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>;}"
Related
Recently started to work with Prettier in VSC and so far so good; the only issue I found is the "diagram" of the ID. How can I adjust the format?. My Prettier: Print Width's value is 120, so is not that.
Exp. (Prettier on)
#mail_user,
#pass_user,
#name_user,
#cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
I'm looking something like:
#mail_user, #pass_user, #name_user, #cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
Few lines and just simply like it more. Thx in advance.
I have created a web app using plotly with CCS files in my assets folder. When running the app locally it all looks great. However, when uploading to AWS on Elastic Beanstalk my font sizes get quite a lot bigger. Most notably within bootstrap components (banner and modal). I have found several people asking this question, and I have tried their solutions (webpage zooming and media min-width) but it doesn't seem to work. Does anyone have any ideas? I would be very appreciative as the deployed app doesn't look very good at all!
Below is the relevant code (I think)
CSS
body {
background-color: white;
color: black;
margin: 0px;
padding-left: 1vw;
padding-right: 1vw;
font-size: 10px;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-family: "Open Sans";
font-weight: bold;
letter-spacing: 0.2em;
font-size: 2.2em;
padding-left: 0.9em;
}
h2 {
font-family: "Open Sans";
font-weight: bold;
letter-spacing: 0.3em;
font-size: 1.7em;
padding-left: 0em;
padding-bottom: 0.6em;
}
.username-login {
float: right;
padding-right: 1vw;
padding-top: 3vh;
display: inline-block;
justify-content: left;
text-align: left;
}
.username-text {
text-align: center;
padding-right: 0.5vw;
display: inline-block;
color: grey;
line-height: 25px;
/*justify-content: center;*/
}
Python code:
app = dash.Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{
'charset': 'utf-8',
},
{
'name': 'viewport',
'content': 'width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1'
}
]
)
#Info is the modal css but written as a python dictionary
info_overall = {
'zIndex': '100',
'max-width': 'none',
'overflow-y': 'auto',
'max-height': '80vh',
'position': 'relative',
'margin': 'auto',
'width': '80vw',
'background': '#1e1e1e',
'top': '18%',
}
info_body={
'background':'grey',
'display': 'grid',
'grid-template-columns':'auto auto auto auto auto',
'grid-template-rows': 'auto auto auto auto',
}
You can see that the modal is bigger on the deployed app (overlaps a button) as well as the name and logout text. Many thanks in advance! As you can probably tell I am very new to this!
Deployed APP:
Local APP:
Just an idea here, this could be caused by having different versions of a library in your local and production environments eg. dash-bootstrap-components.
You can use your browser's developer tools to get the css and html code from both versions, and use diff to see if there is any difference, this could also help you narrow down the problem.
So someone has asked something fairly similar before but didn't get an answer.
I am learning SASS and am using the live sass compiler in vs code but it is not updating anything. The only way I can get the app.css file to show the changes is to press the watching button and basically reset the thing. It didn't used to do this. All changes were shown as soon as I saved the file. There doesn't seem to be anything in the output terminal that shows an issue. Is this the only way to see live changes in sass files when working in a local environment or is there a better way.
.header {
height: 8vh;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
align-items: center;
display: flex;
color: #fff;
padding: 30px 20px;
&__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
}
&__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 35px;
}
&__searchIcon {
padding: 5px;
height: 36px !important;
width: 36px !important;
background-color: #cd9042;
border-radius: 0 6px 6px 0 !important;
}
&__searchInput {
padding: 10px;
border: none;
width: 100%;
border-radius: 6px 0 0 6px !important;
}
&__nav {
display: flex;
justify-content: space-evenly;
}
&__boxes {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
margin: 0 10px;
text-transform: capitalize;
text-align: left;
}
&__boxesFirstLine {
font-size: 12px;
line-height: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
}
&__boxesSecondLine {
font-size: 14px;
font-weight: 700;
line-height: 15px;
padding-bottom: 5px;
padding-right: 9px;
}
&__basketText {
color: #fff;
font-size: 14px;
line-height: 15px;
font-weight: 700;
padding-bottom: 5px;
padding-right: 9px;
text-transform: capitalize;
}
}
For all those facing issues with Live Sass Compiler not watching. Here is the solution.
After our extension is installed in VScode, we are going to look at some settings.
Go to settings (Click on the settings icon on bottom-left corner of your VSCode, and in the menu that appears click on settings).
Then a Search field will appear at the top, we will type and search for Live Sass Compiler.
Click on Live Sass Compiler once it appears and again click on Edit in Settings.json link and add following json:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css"
}
],
Save and we are good to go.
STEPS: Providing Images for ease.
Now FOLDER STRUCTURE:
a) After creating your project folder in any of your Disk drives. Open it in VSCode and create the dist folder within project folder/ root of your project. And create an index.html file within the dist folder.
b) Then create another folder within the root folder and we are going to name it scss and within here we are going to create a main.scss.
c) Then we can click on Watch Sass at the bootom of VSCode, Now Live Sass Compiler will keep watching for any changes in the main.scss and based on our path set in settings.json, it will automatically create the css folder within the dist folder and a main.css file as well which ultimately goes to production.
This might be a stupid or wrong question but what is the scope of an NPM package's default styling? If I'm using an NPM package but want to modify the color of one of their displays how do I got about doing that?
In my own index.css file and in the package's css file I've changed a background color of one of the divs. It works in my local environment but not in deployment-- it reverts back to the default.
In my index.css file:
.react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
In my node-modules/react-slideshow-image/components/general.css file:
.react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
This is correct. I wouldn't edit the node module directly. However, you should increase specificity to prioritize your custom CSS. For example:
.your-custom-container .react-slideshow-container + div.indicators > .each-slideshow-indicator {
width: 7px;
height: 7px;
margin: 0 5px 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
In the event that in the production site the style sheet does not reflect right away, consider refreshing your cache as necessary (e.g., ctrl+f5).
I am using jqueryInputToken and acts-as-taggable-on gem. I was able to make the back-end work. However, as part of using the jqueryTokenInput plugin, my text_area became so slim and looks more like a tiny text_field.
Here is a picture of what my text_area looks like as a result of the jQueryInput plugin without hovering:
And when you hover the "X" sign to delete the tag apears like in the picture below:
I want to modify the css so that the text_area becomes big and the token looks exactly like below:
How should I modify the css below to reach my desired look for the text_field and tokens ?
Here is the css:
/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
position: relative;
overflow: hidden;
height: auto !important;
cursor: text;
font-size: 12px;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-mac span {
color: #231C34;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
/* TOKENS */
li.token-input-token-mac {
position: relative;
display: inline-block;
width: auto !important;
font-size: 8pt;
line-height: 12pt;
margin: 0px 3px 3px 0px;
padding: 4px 10px;
background: none;
background-color: #0F004E;
color: #fefefe;
cursor: default;
float: left;
font-weight: bold;
}
li.token-input-highlighted-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-input-token-mac {
border: none;
background: transparent;
float: left;
padding: 0;
margin: 0;
}
li.token-input-input-token-mac input {
width: 100px;
padding: 3px;
margin: 0;
}
div.token-input-dropdown-mac {
position: absolute;
border-top: none;
left: -1px;
right: -1px;
background-color: #fefefe;
overflow: hidden;
cursor: default;
font-size: 10pt;
}
div.token-input-dropdown-mac p {
font-size: 8pt;
margin: 0;
padding: 0 10px;
color: #fff;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-size: 10pt;
font-weight: bold;
border: none;
padding: 0 5px;
margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none;
cursor: pointer;
background: none;
background-color: #fefefe;
margin: 0;
padding: 0 0 0 10px;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right;
font-size: 8pt;
font-style: italic;
padding: 0 10px 0 0;
color: #999;
text-transform: uppercase;;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold;
text-decoration: underline;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background: #0F004E;
color: #bb8322; //Official Red
text-transform: uppercase;
font-weight: bold;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}
I have been trying to do something like this and have at least a rough version of something working, so I'll put this here in case it's useful. I used the Facebook theme - it looks like you used a different theme. I mention that because this influences things like class names in my answer. Also I think that Facebook might be more of what you're after (see the cosmetic stuff below).
I'll split this into two parts: a structural part first, and then a cosmetic part.
Structure
Part of my problem was due to the fact that the token input code replaces your HTML with some of its own. I wrote this HTML
<div id="searchBar">
<input type="text" id="bigTextInput" />
</div>
and the combination of the insert-token-input-here call:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',...
and the user entering a couple of things, made it look like this (with my comments):
<div id="searchBar">
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook"> <!-- one of these per user input -->
<p>first thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-token-facebook">
<p>second thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-input-token-facebook"> <!-- 1 on the end for entering the next selection -->
<input id="token-input-Y"> <!-- Y = whatever Id you gave to the original input (bigTextInput in my case) -->
</li>
</ul>
<input id=Y display:none /> <!-- the thing you created, but then is hidden and replaced by the ul etc. -->
</div>
The input I created has been hidden away, and in its place there's now a ul, with an li per thing the user entered and an extra li for the user to add more things.
To change the height successfully I had to set the height I wanted on the ul:
$("ul.token-input-list-facebook").height(newHeight + "px");
Bonus structure stuff - auto-resizing
I started with just a large box, but this didn't look good if the user had entered only a small amount of stuff. So I thought I'd try to make it start small (a single line high) and then grow on demand.
To do this I made sure that the ul wouldn't create scrollbars:
ul.token-input-list-facebook {
overflow-x: hidden;
overflow-y: hidden;
}
and then if the content overflowed, I would re-size things. I checked for overflow by adding a handler to the add and delete events of the token input:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',
onAdd: function(){
growSearchBoxSizes();
},
onDelete: function(){
shrinkSearchBoxSizes();
}
});
The best way I found to detect overflow in growSearchBoxSizes was to compare the offsetHeight and scrollHeight properties of the enclosing div:
var heightA = parseFloat($("#searchBar")[0].offsetHeight);
var heightB = parseFloat($("#searchBar")[0].scrollHeight);
I suggest you write these to console.log, experiment with what they show when the input does and doesn't overflow, and have code to add 1 line's height when they show you that there is overflow.
I couldn't come up with a good way to detect when it was time to shrink (e.g. after the user had deleted a line's worth of stuff), so in the delete handler I shrink the box down to its starting size and then grow it back up to whatever height is needed, i.e. until there is no overflow. (A hack, but it seems to work.)
Actually, I was already using a handler for the add and delete events because of wanting to prevent what the user had already entered from showing up in the auto-completion list for later inputs, which you might want to also consider.
Cosmetic
The reason why I suggested that you might want to switch to the Facebook theme is that it has the X present all the time as you want. The colours and shapes aren't as you want them, but I hope that this should be a matter of just defining overrides in your CSS as appropriate.