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.

  1. 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.
  2. 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.

Still need help? Contact Us Contact Us