Customize Error Header Help Needed

[DenverUX]

I'm using a standard error header but I want to customize the out-of-the-box look and feel with some custom CSS.

Existing:

<asp:ValidationSummary HeaderText="Oops! Please correct the following errors and re-submit." ID="vldSummary" runat="server" DisplayMode="BulletList" CssClass="ErrorHeader" />

Which renders like this:

<div id="ctl00_cphMain_errList_vldSummary" class="ErrorHeader" style="color:Red;">Oops! Please correct the following errors and re-submit.
<ul>
<li>bla bla.</li>
</ul>
</div>

What I want to also add is something like this:

<div class="ErrorHeaderTop"></div>
<div class="ErrorHeader">Oops! Please correct the following errors and re-submit.
<ul>
<li>bla bla.</li>
</ul>
</div>
<div class="ErrorHeaderBottom"></div>

Any advise is greatly appreciated!

[lmf232s]

DemverUX,

Have you looked at applying a skin to the validation summary control.
(you can do this without the skin by just setting some of the properties of the control.


'skin
<asp:ValidationSummary runat="server"
SkinID="ValidationSummary1"
cssClass="ValaditionSummary1"
HeaderText="<img src='/images/red-error.gif' alt='errors' align='bottom' /> The Following Errors Have Occurred:"/>

'css
.ValaditionSummary1
{
color: Red;
font-size: 14px;
background-color: darkkhaki;
border-right: red thin dotted;
border-top: red thin dotted;
border-left: red thin dotted;
border-bottom: red thin dotted;
margin-bottom: 10px;
padding: 3px;
font-weight: bold;
}


Not sure if thats what you were looking for