setting gridview header color

Question

i am working in asp.net and c# i have a grid view. i have 10 columns in that grid view. I have some problems with grid view header text color. some of the columns header have link (for sorting). the color of such header text is a light blue.after clicking the blue color change to another color.

some of columns header does not have link. the color of such header text is gray.

i want to make the color of entire header text to single color like gray. after clicking the link it must be in same color. thanks in advance

ismailperim · Accepted Answer · 2010-10-13 07:44:24Z

You may define css class in your css file. After defined your class, you may set your grid CssClass property with your class name. For ex.;

.GridStyle
{
    border: 6px solid rgb(217, 231, 255);
    background-color: White;
    font-family: arial;
    font-size: 12px;
    border-collapse: collapse;
    margin-bottom: 0px;
}
.GridStyle tr
{
    border: 1px solid rgb(217, 231, 255);
    color: Black;
    height: 25px;
}
/* Your grid header column style */
.GridStyle th
{
    background-color: rgb(217, 231, 255);
    border: none;
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    padding: 4px;
    color:Black;
}
/* Your grid header link style */
.GridStyle tr th a,.GridStyle tr th a:visited
{
        color:Black;
}
.GridStyle tr th, .GridStyle tr td table tr td
{
    border: none;
}

.GridStyle td
{
    border-bottom: 1px solid rgb(217, 231, 255);
    padding: 2px;
}

Tim B James · Accepted Answer · 2010-10-13 08:17:54Z

11

You can apply styles and css classes to different elements of a GridView rather than just applying a css class to the main GridView.

<AlternatingRowStyle CssClass="style1" />
<RowStyle CssClass="style2" />
<HeaderStyle CssClass="style3" />
<FooterStyle CssClass="style4" />
<SelectedRowStyle CssClass="style5" />

If you look at the HTML which is generated for the GridView, you can then identify which elements are given the classes, then from this you can apply any styling you wish.

Mainly styling tr, th, td within the table.

answered Oct 13, 2010 at 8:17

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Comments

Taryn · Accepted Answer · 2012-02-16 14:04:18Z

2

You need to add this to CSS:

.grid-header a 
{ 
  color: White; 
  font-weight: bold;
}

and this to gridviews that are sortable: HeaderStyle CssClass="grid-header" to sort the blue on blue problem ...

edited Feb 16, 2012 at 14:04

Taryn

249k57 gold badges374 silver badges409 bronze badges

answered Feb 15, 2012 at 16:09

Jim

1511 silver badge2 bronze badges

Collectives™ on Stack Overflow

setting gridview header color

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related