Monday, August 1, 2011

Gidview Css

1.Open Notepad and paste the style given below.


.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;
}

2.Save it .js Type.
3.Use this like this in header edit the src location.
4.And Gridview design

<asp:GridView ID="viewtsk" runat="server" AutoGenerateColumns="false" OnRowCommand="viewtsk_RowCommand"
OnRowDataBound="viewtsk_RowDataBound" AllowPaging="True" OnPageIndexChanging="viewtsk_PageIndexChanging">
<RowStyle CssClass="RowStyle" />

<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />

No comments:

Post a Comment