My Account - Login & Signup
Give your My Account feature a stylish, different look!
Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):
__________________________________________________________________________________
/*Account - Create Acc & After login*/
/*Use List configuration in My Account module setting*/
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > section.avatar.text-center.padding {
background-image: linear-gradient(360deg, #eee, #f9f9f9); /*You can change the colors of image background*/
border-radius: 0% 0% 30% 30% !important;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 0px 0px 15px 15px;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up img {
border: 3px white solid;
border-radius: 100px;
clip-path: circle;
padding: 0px;
width: 150px;
height: 150px;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list {
width: 95%;
margin: auto;
margin-top: 30px;
/*margin-bottom: 20px;*/
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > div,
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list > label {
border: 1px #009fe3 solid;
margin-bottom: 10px;
border-radius: 8px;
text-align: left;
padding-left: 8px;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list input {
padding-right: 8px;
color: black;
font-weight: normal;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.list label.checkbox-custom {
font-size: 14px;
text-align: center;
margin: auto;
margin-bottom: 10px;
border: none;
background-color: transparent;
color: white !important;
border-radius: 10px;
}
/*form[name="accountForm"].slide-top > div:nth-child(2) div.item.item-custom.item-icon-left.ng-binding {
background-color: #eee;
color: white;
text-align: center;
border: none;
}
form[name="accountForm"].slide-top > div:nth-child(2) label.checkbox-custom {
border: none;
background-color: transparent;
text-align: center;
}
form[name="accountForm"].slide-top > div:nth-child(3) {
width: 95%;
margin: auto;
}
form[name="accountForm"].slide-top > div:nth-child(3) div.item.item-divider.item-divider-custom {
display: none;
}
form[name="accountForm"].slide-top > div:nth-child(3) div.item.item-custom.item-icon-left.ng-binding {
padding-left: 16px;
border: none;
border-radius: 8px;
background-color: grey;
color: white;
}*/
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up button.button.button-positive.button-positive-custom.ng-binding.button-full {
border: none;
width: 95%;
margin: auto;
margin-top: 10px;
background-color: #009fe3; /*You can change color for submit button*/
border-radius: 8px;
color: white;
text-transform: uppercase;
font-weight: normal;
margin-top: 0;
min-height: 30px;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div.padding.text-center.ng-binding > span {
display: block;
border: none;
width: 100%;
margin: auto;
margin-top: 10px;
border-radius: 8px;
color: white;
text-transform: uppercase;
padding: 10px;
background-color: #009fe3;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div > div.padding.text-right {
text-align: center;
}
ion-modal-view.customer-view.customer-layout1.modal.has-background-image.slide-in-up div.input-label.ng-binding {
font-weight: inherit;
}
__________________________________________________________________________________
NOTES:
Elements in BOLD can be updated.
- Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
- URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.