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.

Note:
This was submitted by a member in our support forums. It is provided for reference. We cannot support customizations to your theme or the Event Espresso plugin without the purchase of a support token.

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

registration form

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:
missing information

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!