Using Style Sheets with DBApps

You can customize your DBApp with style sheets. The DBApps can be modified through various unique selectors, which are diagrammed below. It is assumed that the reader is familiar with style sheets and DBApps.

Selectors for DBApp spreadsheet view dbapp  style sheet selectors diagram
Selectors for DBApp guestbook view dbapp guestbook style sheet selectors diagram
Selectors for DBApp single entry view dbapp single entry style sheet selectors diagram
Selectors for DBApp entry form or search form dbapp entry form style sheet selectors diagram

There are many more selectors available in addition to the ones diagrammed above. Many of the DIV.CLASS containers enclose corresponding SPAN.CLASS containers. Table cells and DIV.FIELD containers are also classed according to the datatype they enclose (textfield, textarea, checkbox, ...). Below is the style sheet that was used to mark up the diagrams above. Feel free to copy and modify it.

div {
        margin:1ex;
        padding:1ex; }

div.buttons {
        border:1px dashed black;
        width:10em;
        margin:1em auto;
        padding:3px;
        text-align:center;  }

button {
        background-color:white;
        border:1px solid black }

table.data {
        margin:auto;
        border:1px solid black;
        padding:3px;
        border-spacing:1ex }

thead { border: 1px dashed blue }

th,td { padding:3px }
th { background-color:#aaf; }
td { background-color:#ddf; }
td.checkbox { text-align:center; }


div.data  {
        border:1px dashed gray;
        width:20em; margin:auto  }

div.entry {
        border:1px solid black;
        margin-bottom:3em }

div.entry_date { border:1px solid red }
span.entry_date { background-color:#fcc }

div.fields { border:1px dashed black }
div.field { border:1px solid red }
div.fieldname { border:1px solid green }
div.fieldvalue { border:1px solid blue }

div.more {
        text-align:center;
        font-size:120% }

div.single_entry, 
div.entryform,
div.searchform {
        border:1px solid black;
        width:20em;
        margin:auto }

div.single_entry div.fieldname { 
        font-weight:bold }

div.single_entry div.fieldvalue {  
        padding-left:2em }

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