Not Changing Header Text Color In Gridview through using CSS

3
votes

I am using asp.net c#. I am using gridview to display the data. i am controlling all formating through CSS. In gridview i have define itemtemplate + edititemtemplate + footertemplate and doing sorting through bind column at template field. My problem is the column name which dispalay as header that color is not changed through CSS, font size,type all things going ok but fore color is fix as Blue is any body help me out how can i change forecolor of header which is allow to sorting.

My code looks like : asp:TemplateField HeaderText="Slsmn No." HeaderStyle-CssClass="GridHeaderStyle" SortExpression="Profile_Var"

Problem is "Slsmn No." Display blue color and under line but in css i gave color:red

Thanks

5
c#asp.netgridview
If you have the option I would use the ListView control instead. If you want control of the CSS and your already using template fields anyway. - bendewey
Can you also show us the CSS code - Jaime Garcia

5 Answers

3
votes

The CSS class you've assigned (GridHeaderStyle) is being applied to the header cells, not the header links. It sounds like the default link color is being applied.

Add the following to your CSS file:

.GridHeaderStyle a {color: red;}

This should change the link color in the headers.

Hope this helps!

1
votes

At first I tried Jeremy's solution, but it didn't work for me. This is because the .asp code generated forces a <style="color: #333333"> tag in the header when you make it sortable.

Here's how to solve the problem:

.GridHeaderStyle a {color: white!important}

The !important qualifier will override the style that asp puts in.

0
votes

This happens because you have not defined a CSS rule which says anything about the link color.

Add the following to your stylesheet:

.GridHeaderStyle a {
    color: #f0f; /* or whatever */
}
0
votes

This post still doesn't have a best answer. I found below code in the same forum which is answered by ismailperim.

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

It will solve the problem for sure

0
votes

Not worked ANY of solutions. I solved this problem very simply. Added "HeaderStyle" attribute in the end of grid definition. How it looks like :

... </Columns>
...
<HeaderStyle ForeColor="Red" />
<SelectedRowStyle ...
</asp:GridView> ...