Styled error messages

This commit is contained in:
Jef van Schendel 2011-05-28 21:02:34 +02:00
parent 9ef7c0f737
commit 716a0ac3f1
2 changed files with 67 additions and 63 deletions

View File

@ -1,9 +1,9 @@
body { body {
background-color: #272727; background-color: #272727;
color: #f7f7f7; color: #f7f7f7;
font-family: sans; font-family: sans;
padding:none; padding:none;
margin:0px; margin:0px;
} }
/* Carter One font */ /* Carter One font */
@ -18,15 +18,13 @@ body {
/* text styles */ /* text styles */
h1 { h1 {
font-family: 'Carter One', arial, serif; font-family: 'Carter One', arial, serif;
margin-bottom: 20px; margin-bottom: 20px;
margin-top:40px; margin-top:40px;
} }
28px
a { a {
color: #86D4B1; color: #86D4B1;
} }
label { label {
@ -36,82 +34,90 @@ label {
/* website structure */ /* website structure */
.mediagoblin_header { .mediagoblin_header {
width:100%; width:100%;
height:36px; height:36px;
background-color:#393939; background-color:#393939;
padding-top:14px; padding-top:14px;
margin-bottom:40px; margin-bottom:40px;
} }
.icon { .icon {
vertical-align:middle; vertical-align:middle;
margin-right:10px; margin-right:10px;
} }
.mediagoblin_container { .mediagoblin_container {
width: 960px; width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.mediagoblin_header_right { .mediagoblin_header_right {
float:right; float:right;
} }
.button { .button {
font-family:'Carter One', arial, serif; font-family:'Carter One', arial, serif;
height:32px; height:32px;
min-width:99px; min-width:99px;
background-color:#86d4b1; background-color:#86d4b1;
box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000;
border-radius:5px; border-radius:5px;
border:none; border:none;
color:#272727; color:#272727;
margin:10px; margin:10px;
font-size:1em; font-size:1em;
float:left; float:left;
display:block; display:block;
text-align:center; text-align:center;
padding-left:11px; padding-left:11px;
padding-right:11px; padding-right:11px;
} }
/* common website elements */ /* common website elements */
.dotted_line { .dotted_line {
width:100%; width:100%;
height:0px; height:0px;
border-bottom: dotted 1px #5f5f5f; border-bottom: dotted 1px #5f5f5f;
position:absolute; position:absolute;
left:0px; left:0px;
margin-top:-20px; margin-top:-20px;
} }
/* forms */ /* forms */
.form_box { .form_box {
width:300px; width:300px;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
background-color:#393939; background-color:#393939;
padding:0px 83px 83px; padding:0px 83px 83px;
border-top:5px solid #d49086; border-top:5px solid #d49086;
font-size:18px; font-size:18px;
} }
.form_box h1 { .form_box h1 {
font-size:28px; font-size:28px;
} }
.form_field_input input { .form_field_input input {
width:300px; width:300px;
font-size:18px; font-size:18px;
} }
.form_field_box { .form_field_box {
margin-bottom:20px; margin-bottom:24px;
} }
.form_field_label { .form_field_label,.form_field_input {
margin-bottom:4px; margin-bottom:4px;
}
.form_field_error {
background-color:#87453b;
border:none;
font-size:16px;
padding:9px;
margin-top:8px;
} }

View File

@ -26,13 +26,11 @@
{%- endif %} {%- endif %}
<div class="form_field_input">{{ field }}</div> <div class="form_field_input">{{ field }}</div>
{%- if field.errors -%} {%- if field.errors -%}
<div class="form_field_errors"> {% for error in field.errors %}
<ul> <div class="form_field_error">
{% for error in field.errors %} {{ error }}
<li>{{ error }}</li> </div>
{% endfor %} {% endfor %}
</ul>
</div>
{%- endif %} {%- endif %}
</div> </div>
{% endfor %} {% endfor %}