Changing the Color of Column Headers

In This Topic

You can easily use themes to customize the grid's appearance. For more information about themes and available themes, see the Themes topic. In the following steps, you'll learn to customize the appearance of the Grid control other than using themes.

Note: These steps assume that you have already created an Asp.Net project containing a GridView. For more information, see the GridView for ASP.NET Web Forms Quick Start topic.

Complete the following steps:

Click the Source button to switch to Source view.

Add the following code inside the <head> tag on your page:

    <style type=”text/css”>
            .wijgridth {
                background-image: none !important;
                background-color: Yellow !important;
                height: 27px;
                text-align: -moz-center;
                border: solid 1px #4c535c;
                vertical-align: middle;
                border-right: none;
                font-weight: normal;
                color: #000;
                border-top: none;
            }
        </style>

Note: ASP.NET controls contain images in its background; therefore before making any changes to the background of a control’s element like header, toolbar or cell, you need to remove the image first.

What You've Accomplished
Run your application and observe that the column headers now appear yellow: