CSS Styles

This is a basic set of styles that maps the controls in this library.

Custom Attributes

I've used some custom HTML attributes to mark some controls instead of creating classes. These custom attributes are ignored by the HTML but not by CSS and Javascript make it a safe way to mark the controls.

Here is a sample code:

<% using (var form = Html.ActionForm("Update", "Home", new { id = Model.Id })) {%>
	<%: form.ValidationSummary().ExcludePropertyErrors().DefaultMessage("Default Message").Render()%>
	<fieldset>
		<legend>New Way</legend>
		<div class="editor">
			<%: form.DisplayText(m => m.Id).AddLabel().Render()%>
		</div>
		<div class="editor">
			<%: form.TextBox(m => m.Name).AddLabel().AddValidationMessage().Render()%>
		</div>
		<div class="editor">
			<%: form.LabelFor(m => m.Email).Render()%>
			<%: form.TextBox(m => m.Email).AddLabel().Render()%>
			<%: form.ValidationMessageFor(m => m.Email).Render()%>
		</div>
		<div class="editor">
			<%: form.RadioButtonSet(m => m.Deleted).Options(true, false).AddLabel().Render()%>
		</div>
		<div class="editor">
			<%: form.CheckBoxList(m => m.Deleted).Options("Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6").Columns(2).AddLabel().Render()%>
		</div>
		<div class="editor">
			<%: form.TextArea(m => m.AdditionalInfo).AddLabel().Render()%>
		</div>
		<div class="actions">
			<%: form.SubmitLink("Save").Render() %> | <%: form.ResetLink("Reset").Render() %>
		</div>
	</fieldset>
<% } %>

/*generic format*/
input {
    font-size: 10px;
    font-family: Verdana, Helvetica, Sans-Serif;
    color: #696969;
}

textarea {
    font-size: 10px;
    font-family: Verdana, Helvetica, Sans-Serif;
    color: #696969;
}

select {
    font-size: 10px;
    font-family: Verdana, Helvetica, Sans-Serif;
    color: #696969;
}

/*fields*/
/*field box*/
.editor { border: 1px solid black; }

/*generic disabled field*/
.editor > *[disabled="disabled"] { }

/*generic required field*/
.editor > *[required="required"] { font-weight: bold; }

/*label*/
.editor > label { border: 1px solid darkgreen; }

/*static text field*/
.editor > span[type=displayText] { border: 1px solid navy; }

/*text field*/
.editor > input[type=text] { }

/*password field*/
.editor > input[type=password] { }

/*checkbox field*/
.editor > input[type=checkbox] { }

/*multi-line text field*/
.editor > textarea { }

/*combo box field*/
.editor > select[single="single"] { }

/*list box field*/
.editor > select[multiple="multiple"] { }

/*checkbox list and redio botton set options box*/
.editor > div[type=optionList] { border: 1px solid navy; }

/*button bar*/
.actions {
    margin-bottom: 20px;
    line-height: 16px;
}

/*link*/
.actions> *[type=submit] { }
.actions> *[type=reset] { }

/*validation*/
.validation-summary-errors { color: red; }
label.input-validation-error { background-color: inherit; }
.input-validation-error { background-color: #FFCCCC }
.field-validation-error { color: red; }

Last edited Jul 28, 2010 at 2:35 PM by AndreVianna, version 8

Comments

No comments yet.