This example shows the use of the GlobalCSS property. Note that the Grid width and the Form width are fixed, thus providing a better consistency effect.
  LastName FirstName
1 Davolio Nancy
2 Fuller Andrew
3 Leverling Janet
4 Peacock Margaret
5 Buchanan Steven
6 Suyama Michael
EmployeeId 1
LastName Davolio
FirstName Nancy
Title Sales Representative
BirthDate 12/8/1948
 First   Prev   Next   Last   Search 
Records 1 to 6 of 10. Page 1 of 2.
This is the code implementing the example:
<!--#include file="VBSdb/inc.asp"-->
<%
   VbsDbNew objVbsDb
   objVbsDb( "MdbPath" ) = "data/nwind.mdb"
   objVbsDb( "Sql" ) = "select EmployeeId,LastName,FirstName,Title,BirthDate from Employees"
   objVbsDb( "GlobalCSS" ) = "GlobalCSSExample.css"
   objVbsDb( "GridFields" ) = "LastName;FirstName"
   objVbsDb( "GridPageSize" ) = 6
   VbsDb objVbsDb
%>
This demonstrative program connects to Nwind.mdb, the well known Microsoft Access sample database: the names of companies, products, people, characters, and/or data mentioned herein are fictious and are in no way intended to represent any real individual, company, product, or event. To download a copy of Nwind.mdb, please visit Microsoft's site.

To get the effect shown above, just really a few simple changes have to be applied to the standard VbsDb.css file (provided along with VBSdb):

  • the WIDTH property of the #grid unique identifier is set to 200px. This fixes the Grid to a constant width (not depending on the Grid contents)
  • the COLOR property of the .GridSelectedIndex unique identifier is set to brown. This emphasizes the foreground color of the current selected index anchor
  • the BACKGROUND-COLOR property of the following classes
    • .GridSelectedIndex
    • .GridOddRowSelected
    • .GridEvenRowSelected
    is set to #CED30C. This way, the current selected record Grid row is emphasized (by changing the Grid row background)
  • the WIDTH property of the TABLE#form unique identifier is set to 250px. This fixes the Form to a constant width (not depending on the Form contents)
  • the WIDTH property of the .FormLeftColumn class is set to 250px. This fixes the Form left column to a constant width (not depending on the displayed Form headers)

Here you can download the CSS file so obtained.