Introduction
Here you can change the old style page number with new modern style look in gridview[ASP.NET] using CSS .
Using the code
So First i show code step by step and then all together ,so relax and read .
1) First i am styling the pager style in gridview like padding , width , etc .
i am using css class here .
.gridview{
background-color:#fff;
padding:2px;
margin:2% auto;
}
2) Now for changing the the link color i.e if you have total 5 pages then at bottom it appears like - 1 2 3 4 5
so for the this add this css class
.gridview a{
margin:auto 1%;
border-radius:50%;
background-color:#444;
padding:5px 10px 5px 10px;
color:#fff;
text-decoration:none;
-o-box-shadow:1px 1px 1px #111;
-moz-box-shadow:1px 1px 1px #111;
-webkit-box-shadow:1px 1px 1px #111;
box-shadow:1px 1px 1px #111;
}
3) if you want hover effect on link not for the one that is selected by default
use this.
.gridview a:hover{
background-color:#1e8d12;
color:#fff;
}
4) Now for the one that is selected by default that is 1
for this use class
.gridview span{
background-color:#ae2676;
color:#fff;
-o-box-shadow:1px 1px 1px #111;
-moz-box-shadow:1px 1px 1px #111;
-webkit-box-shadow:1px 1px 1px #111;
box-shadow:1px 1px 1px #111;
border-radius:50%;
padding:5px 10px 5px 10px;
}
Here span is the default selected number it can any that you have selected .
So put all this at one place in your stylesheet or embedded in page your wish .
5)And Finally you have to add this class in your gridview as shown below
<asp:gridview id="g1" runat="server" gridlines="None" autogeneratecolumns="False" allowpaging="True" onpageindexchanging="g1_PageIndexChanging">
<pagerstyle cssclass="gridview">
</pagerstyle>
As you see , you have add an property of gridview as i mention above and add css class in it which we made .
All done run your page see modern pager style ,
Change color or other things as per requirement or wish .
© Narendra