Pode mudar a aparência padrão deste recurso, algo mais elegante se assim achar, diferente!
Saiba que não podemos personalizar ou ajustar este CSS para si, no entanto, o processo de entrada é simples e direto:
- copie e cole o seguinte código na parte final da seção Cores (na parte inferior da página):
/*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;
}
__________________________________________________________________________________
NOTAS:Os elementos em NEGRITO podem ser atualizados.
- Cores - você pode substituir os códigos HEX pelas cores desejadas. Você pode usar tags de seção em BOLD para ver a qual seção o elemento CSS pertence.
- URLs - você pode enviar suas imagens usando o Image Uploader em Modules > Image Uploade. Use os URLs gerados e substitua os URLs das imagens atuais em NEGRITO.