The login and register pages don’t match design-wise even after updating both pages with custom codes of a similar kind. I want the register page (https://fitnessnbalance.com/account/register) to look like the login page, (https://fitnessnbalance.com/account/login), but no matter how much I try, the register page is not changing, what might be causing the issue?
Also, the button color on the bottom of the login page doesn’t match with the top button. How do I change it?
Image for reference:
If it helps, this was the code that I used for the login page
Main Login (New - Sample)
{{ 'customer.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
h1#login {
font-family: 'Whitney';
font-size: 23px;
font-weight: 700;
text-align: left;
margin-bottom: 24px;
}.welcome-header-small {
font-size: 18px;
font-weight: 400;
color: #535766;
}.field__input, .customer .field input {
font-size: 14px;
border: 1px solid #d4d5d9;
padding: 11px 12px;
line-height: 16px;
color: #282c3f;
}.field__label, .customer .field label {
left: calc(var(--inputs-border-width) + 2rem);
top: calc(1rem + var(--inputs-border-width));
margin-bottom: 0;
pointer-events: none;
position: absolute;
transition: top var(--duration-short) ease,font-size var(--duration-short) ease;
color: rgba(var(--color-foreground),.75);
letter-spacing: .1rem;
line-height: 1.5;
color: #94969f;
font-size: 16px;
position: absolute;
pointer-events: none;
}.midtitle {
display: flex;
font-size: 14px;
}.midtitle a {
display: contents;
cursor: pointer;
color: #000000;
font-weight: 700;
font-size: 13px;
}.midLinks {
display: flex;
margin: 19px 0 5px 0;
font-size: 13px;
color: rgba(40,44,63,.8);
}.midLinks a {
cursor: pointer;
color: #000000;
font-weight: 700;
font-size: 13px;
}.customer button {
cursor: pointer;
background-color: #262626;
text-align: center;
padding: 12px;
color: #fff;
font-weight: 700;
font-size: 14px;
line-height: 16px;
margin: 1rem 0 1.5rem;
border-radius: 6px;
}.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
min-width: 100%;
min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}footer.footer.color-background-1.gradient.section-footer-padding {
display: none !important;
}.footer__content-bottom {
display: none !important;
}.customer:not(.account):not(.order) {
padding-bottom: 7rem;
padding-top: 6rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
}.customer.login {
background-color: #fff;
}.midtitle {
margin: 2px;
}.midLinks {
margin: 40px 0 0 0px !important;
}a.signup {
background-color: #ededed;
width: 100%;
padding: 4px;
border-radius: 6px;
}h1#recover {
font-family: 'Whitney';
font-size: 23px;
font-weight: 700;
text-align: center;
margin-bottom: 24px;
}input:hover {
border: none !IMPORTANT;
}
@media screen and (max-width: 750px) {
.login a {
display: contents !important;
}
}
@media screen and (min-width: 750px) {
.customer:not(.account):not(.order) {
padding-left: 3.5rem !important;
padding-right: 3.5rem !important;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
#
{{ 'customer.recover_password.title' | t }}
{{ 'customer.recover_password.subtext' | t }}
{%- form 'recover_customer_password' -%}
{% assign recover_success = form.posted_successfully? %}
{%- if form.errors -%}
<small>
{{ form.errors.messages['form'] }}
</small>
{%- endif -%}
{{ 'customer.login_page.cancel' | t }}
{%- endform -%}
#
{{ 'customer.login_page.title' | t }} or Signup
{%- if recover_success == true -%}
###
{{ 'customer.recover_password.success' | t }}
{%- endif -%}
{%- form 'customer_login', novalidate: 'novalidate' -%}
{%- if form.errors -%}
##
{{ 'accessibility.error' | t }}
{{ 'templates.contact.form.error_heading' | t }}
{{ form.errors | default_errors }}
{%- endif -%}
{%- if form.password_needed -%}
{{ 'customer.login_page.forgot_password' | t }}
Reset
By continuing, I agree to the Terms of Use & Privacy Policy
{%- endif -%}
Create account
{%- endform -%}
{%- if shop.checkout.guest_login -%}
---
## {{ 'customer.login_page.guest_title' | t }}
{%- form 'guest_login' -%}
{%- endform -%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.main-login.name",
"settings": [
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}
