Styling 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.
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.