Gridview Pager style using CSS in asp.net

 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