GridView : Selected page button (number) style

Question

    <asp:GridView ID="GridView2" runat="server" 
        DataSourceID="SqlDataSource1" Width="100%" 
        ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333" 
        GridLines="both" onrowdatabound="GridView2_RowDataBound" 
        HorizontalAlign="Center" AllowPaging="True"  PageSize="25" 
        onrowcreated="GridView2_RowCreated">
        <PagerSettings Mode="NumericFirstLast" PageButtonCount="25" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Center" 
            VerticalAlign="Middle" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" 
            VerticalAlign="Middle" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" 
            HorizontalAlign="Center" VerticalAlign="Middle" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" HorizontalAlign="Center" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" 
            HorizontalAlign="Center" />
    </asp:GridView>

I select 6 page ... But I can't see some difference between selected and not selected page buttons :( How can I set different fonts for selected and not selected page buttons ?

Answer 1

Hai nCdy,

Try setting

     <PagerSettings FirstPageText="First" LastPageText="Last" 
    Mode="NumericFirstLast" PageButtonCount="3" position="Bottom" />
  <PagerStyle CssClass="pagination" HorizontalAlign="Center" 
 VerticalAlign="Middle"/>

CSS:

.pagination {
            font-size: 80%;
        }

.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}

Now you will see selected page number...