This document explains how to integrate style sheets with DBApps that use a spreadsheet layout. The DBApps can be modified through various unique selectors, which are explained below. It is assumed that the reader is familiar with style sheets and DBApps.

If you elect to use no style sheet, then your DBApp will look like the following:

If you use a style sheet, then your DBApp could look like this:

Below is the style sheet that was used for the table above. Feel free to copy and modify it.

TABLE.entries_table {
	border: 1px solid gray;
}

TD.field_header {
	background-color: #CCC;
	text-align: right;
	font-weight: bold;
}

TR.entry_row {
	background-color: #DDD;
}

TD.field_value {
	padding-left: 1em;
	padding-right: 1em;
	background-color: #DDD;
}

TD.more {
	padding-left: 0px;
	padding-right: 0px;
	font-size: smaller;
}

A.field_value, A.more, A:VISITED  {
	color: black;
}

A.field_header {
	color:            black;
	text-decoration:  none;
}

A:HOVER {
	background-color: #FFF;
}

A.field_header:HOVER {
	background-color: #77F;
}

Below is a diagram which illustrates style sheet selectors with their corresponding elements:

Please post questions regarding style sheets and DBApps on the WebApp Forum.

Back to Using Style Sheets with the DBApps

Copyright © Server Corporation. All Rights Reserved.