Live Demo
Overview
I have been following Matt Berseth's posts covering DataGrid designs and decided to try a create my own theme. This theme is entirely CSS based on a standard GridView control using .NET 2.0. I've only tested it with Firefox 2 and IE7 so far, so there may be some lingering CSS issues to resolve.
Installation
Once you drag a default GridView onto the page, you will need to set the appropriate CSSclass for the GridView and each RowStyle as well as set GridLines to None:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CssClass="GridViewStyle" GridLines="None">
<Columns>
<!-- Bound field parameters go here -->
</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>
If you do not already have a stylesheet attached to your page, you will need to create one using "Add New Item" and make sure it is referenced in the <head> of you web page. Assuming you named your stylesheet the default "Stylesheet.css", your <head> tag should look something like this:
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
And here is the CSS:
/*GridViewCSS*/
.GridViewStyle
{
font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 5px solid;
}
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
background-image: url(Images/HeaderGlassBlack.jpg);
background-position:center;
background-repeat:repeat-x;
background-color:#1d1d1d;
}
.HeaderStyle th
{
padding: 5px;
color: #ffffff;
}
.HeaderStyle a
{
text-decoration:none;
color:#ffffff;
display:block;
text-align:left;
font-weight:normal;
}
.PagerStyle table
{
text-align:center;
margin:auto;
}
.PagerStyle table td
{
border:0px;
padding:5px;
}
.PagerStyle td
{
border-top: #1d1d1d 3px solid;
}
.PagerStyle a
{
color:#ffffff;
text-decoration:none;
padding:2px 10px 2px 10px;
border-top:solid 1px #777777;
border-right:solid 1px #333333;
border-bottom:solid 1px #333333;
border-left:solid 1px #777777;
}
.PagerStyle span
{
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
padding:2px 10px 2px 10px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
}
.RowStyle td
{
background-color: #c9c9c9;
}
.AltRowStyle td
{
background-color: #f0f0f0;
}
.SelectedRowStyle td
{
background-color: #ffff66;
}
The last step is to create a folder in your root directory titled "Images" and add the background image "HeaderGlassBlack.jpg" to it. That should do it!