gridview stylesheet code?

Posted on 2011-10-20
Medium Priority
Last Modified: 2012-05-12
Following is some of the stylesheet code supplied by our graphic designer for a table on my web form.  She was working from a screenshot, but what I was really using is a gridview.

How can I achieve the same visual effects on a gridview?  Ideally, I should be able to add the code you give me into her style sheet and then just set my gridview CSSClass to the new type.

/* --[ TABLE/GRID ]----------------------------------------------------- */
#main #tblData {
	width: 100%; }

#main #tblData td {
	vertical-align: top; 
	padding: 5px;
	border: 1px solid #d1d7e2; }

#main #tblData td.edit {
	font-size: 10px;
	width: 20px;
	background-color: #d1d7e2; }

#main #tblData tr.altrow {
		background-color: #e6edfc; }

#main #tblData tr.hover td {
	background-color: #d1d7e2;
	cursor: pointer; }
#main #tblData thead tr td {
	border: 0px;
	font-weight: bold;
	color: #666666;
	background-color: #ffffff;

Open in new window

Question by:codefinger
  • 4
  • 3
LVL 28

Accepted Solution

strickdd earned 2000 total points
ID: 36999815
You can add all these CSS values to the Skin file in the project. A simple example of my is below. Don't forget to reference the skin file in your web.config pages section.

<asp:GridView runat="server" BackColor="White" >
	<AlternatingRowStyle BackColor="#D1D1D1" />
	<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="true" />

Open in new window


Author Comment

ID: 37000490
Interesting.  I have not used skins before....first time hearing of them.

What would the web config entry look like?

LVL 28

Expert Comment

ID: 37000501
<pages theme="MainStyle"/> with "MainStyle" being the name of your skin file.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 37000593
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Content ('<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="true"') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed.

Source Error:

Line 16: <asp:GridView runat="server" SkinId="gridViewSkin" BackColor="Red" >
Line 17:    <AlternatingRowStyle BackColor="#D1D1D1" />
Line 18:       <HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="true"
Line 19: </asp:GridView>


Source File: /MyChartInternal/App_Themes/VSSkin/VSSkin.skin    Line: 18

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1
LVL 28

Expert Comment

ID: 37000665
You're missing the " />" at the end of the line.

Author Comment

ID: 37000744
DOH!  Having a Homer moment....sorry....

Author Closing Comment

ID: 37000767
Works beautifully and taught me something I did not know before...nice...

strickdd....having a problem with a radiobuttonlist I am sure you can help me with, but I will shortly be asking about that in a related question...please keep an eye out for it.


Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question