Success Note appears Red as Error Note

Highlighted
Tourist
11 0 0

I'm building a store using a theme I purchased from ThemeForest and among other issues, I have these two that I can't seem to fix.

 

1) When a customer creates an account he/she gets a RED note whether their registration was successful or not. Both Success and Error Notes come in red. I'm not giving you my store's URL because it is in greek and you probably won't understand a single word but here's my code:

 

customers/register.liquid

<!-- /templates/customers/register.liquid -->

<div class="grid">

<div class="grid__item large--one-third push--large--one-third text-center">

<h1>{{ 'customer.register.title' | t }}</h1>

<div class="form-vertical">
{% form 'create_customer' %}

{{ form.errors | default_errors }}

<label for="FirstName" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="FirstName" class="input-full" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>

<label for="LastName" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="LastName" class="input-full" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words">

<label for="Email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
<input type="email" name="customer[email]" id="Email" class="input-full{% if form.errors contains 'email' %} error{% endif %}" placeholder="{{ 'customer.register.email' | t }}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">

<label for="CreatePassword" class="hidden-label">{{ 'customer.register.password' | t }}</label>
<input type="password" name="customer[password]" id="CreatePassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}" placeholder="{{ 'customer.register.password' | t }}">

<p>
<input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full">
</p>
<a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

{% endform %}
</div>

</div>

</div>

 

 

 

timber.scss.liquid
/*============================================================================
#Notes and Form Feedback
==============================================================================*/
.note,
.errors {
border-radius: $radius;
padding: 6px 12px;
margin-bottom: $gutter / 2;
border: 1px solid transparent;
font-size: 0.9em;
text-align: left;
 
ul,
ol {
margin-top: 0;
margin-bottom: 0;
}
 
li:last-child {
margin-bottom: 0;
}
 
p {
margin-bottom: 0;
}
}
 
.note {
border-color: $colorBorder;
}
 
.errors {
ul {
list-style: disc outside;
margin-left: 20px;
}
}
 
.form-error,
.errors {
color: $errorRed;
background-color: $errorRedBg;
border-color: $errorRed;
 
a {
color: $errorRed;
text-decoration: underline;
 
&:hover {
text-decoration: none;
}
}
}
 
.successes {
border-radius: $radius;
padding: 6px 12px;
margin-bottom: $gutter / 2;
border: 1px solid transparent;
font-size: 0.9em;
text-align: left;
 
ul,
ol {
margin-top: 0;
margin-bottom: 0;
}
 
li:last-child {
margin-bottom: 0;
}
 
p {
margin-bottom: 0;
}
}
 
.note {
border-color: $colorBorder;
}
 
.successes {
ul {
list-style: disc outside;
margin-left: 20px;
}
}
 
.form-success,
.successes {
color: $successGreen;
background-color: $successGreenBg;
border-color: $successGreen;
 
a {
color: $successGreen;
text-decoration: underline;
 
&:hover {
text-decoration: none;
}
}
}
 
.form-success {
color: $successGreen;
background-color: $successGreenBg;
border-color: $successGreen;
 
a {
color: $successGreen;
text-decoration: underline;
 
&:hover {
text-decoration: none;
}
}
}

 

 

 


2) When a customer creates an account he/she can use any password they want. Even if that is 1 character. Can I change it to "minimum of 5 characters?"

 

Any suggestions are welcome! 

Thank you in advance,
Nat.

0 Likes