Quick way to pretty up a totally unstyled asp.net application

Question

I have an asp.net app consisting of about 15 aspx pages and 30 or so user controls. For the most part it is just a basic CRUD layer on top of a database, so it consists mainly of edit forms and datagrids.

All of my edit forms are laid out in fieldsets, and I am using plain asp:GridViews for my tables (they render to an html table). Some forms are in serious need of tabs to lay out the elements. I'd really like to be able to style my GridViews with a fixed header and vertical scrollbars.

I have to do a demo in a few days but the problem is, there is no styling whatsoever applied to the html (no classes defined within the html, no CSS at all), and I am very weak with CSS.

So considering my predicament, can anyone offer some advice on how I could get this looking presentable in a very short period of time?

1. Is there such a thing as pre-existing decent generic CSS files I could download and drop on top of this app that could apply an attractive and consistent look and feel to most elements?
2. Would http://jqueryui.com/ be useful in this particular situation?
3. Would jQuery Tools http://flowplayer.org/tools/demos/index.html be useful?
4. http://www.datatables.net/ looks very attractive, can anyone comment on how easy it would be to globally wire all of my GridViews up with that?

Answer 1

Have you not come across ASP.Net Themes and Skins?

Personally, I hate it, as it put inline styles everywhere. But it's quick and easy to manage.

Answer 2

Try http://www.blueprintcss.org/

Just link to the 3 css files - screen.css, print.css (optional in ur situation), ie.css - correctly. I personally like the styles blueprintcss provided for tables. But u need to specify a CssClass="even" for your AlternatingRowStyle / AlternatingItemStyle

Answer 3

Looks like noone is considering this easy :)

[edit]

If it's only about it looking nice - people hate to see default pure html. So adding body background and nice fonts is almost enough. Then define 1px borders in tables with a nice trick:

1. set table background to the same color as border
2. set td background to the background You want and make it have a 1px margin

And add some paddings to default elements like div or p.

Your boss will be delighted ;)

Read below only if You want to make layout changes without adding anything in the html

[/edit]

You need to put some html structure information in the CSS. And the whole CSS writing is not that hard if You know how to access desired elements on the page, isn't it.

eg.

body table{
}

refers to every table that is directly in body

body div table{
}

refers to every table that has a parent div that is directly in body

For more complicated stuff look up a specification on

:first-child
:nth-child()

pseudoclasses. It can be given a lot of interesting parameters in those braces :)

nth-child@W3C first-child@W3C

caution: first-child has some old IE7 issues (but works) and nth-child doesn't work in any IE

also look here for inspiration