Basic Styling with CSS of the Registration Form

The default registration form simply prints out fields with labels, and isn’t exactly a visual stunner. So, I’ve toyed with CSS a bit, and came up with a fairly trivial set of CSS settings that will make the default registration form a lot better.

To give you an idea, here’s the registration form with my styling hack applied:

As you can see, I’ve just moved the text labels a bit to become right-aligned to what now are neatly left-aligned input fields. Also, labels are formatted in bold, and the added asterisk of mandatory fields (“questions” in EE parlance) is styled as bold and red to make it stand out a bit more.

Finally, I’ve added a minor tweak also to the text that appears when some mandatory field is not filled out by the registrant, as you can see here:

Instead of tinkering with the template file – not that there’s anything wrong with that, this is just a very trivial visual clean-up hack – you can include the following to your (child) theme’s style.css file:

/* Event Espresso registration form basic styling */
.event_questions label {
width: 125px;
text-align: right;
float: left;
margin-right: 5px;
font-weight: bold;
}

.event_questions label em {
color: red;
font-weight: bold;
}

.coupon_code label {
font-weight: bold !important;
}

input[type="text"] {
margin-right: 5px;
display: inline;
}

.error {
color: red;
font-weight: normal !important;
}

Hope it’s useful!