Conditional Row Color & Styling
dbFront (18.104.22.16832) allows you to assign a data specific CSS class to table rows. On the Table Fields tab of the Table Preferences, you can choose a specific field and assign it to set the Row CSS Class.
This simple setting can be used to introduce a world of color and style to your table grid.
The following instructions contain the steps to customize your table grids with row specific color and style.
How It Works
When you select a field to provide the Row CSS Class, then dbFront will take the raw field value and strip it to remove all characters other than "a-zA-Z0-9_-" to create a safe CSS class name. If the resulting string does not start with a letter then a "z" will be added to the beginning. For example:
- "Fred is Red!" becomes "FredisRed",
- "1234" becomes "z1234"
The resultant CSS class name will be added to the <tr> tag for that table row.
Using custom CSS you can then affect that rows styling in any way chosen.
As a first step, you need to set up a custom CSS file. For instruction see: Custom CSS File.
Once you have created a custom CSS file then you can add the code needed to format the specific table rows. The following CSS is used on the demo site to format the HR database shown above. For a live example see: Demo HR JobType table
The CSS selector should specify the tag <tr> followed by the custom data class. For example:
!important should be specified otherwise it may not be able to override the existing row styling.
Styling Suggestions & Warnings
Using CSS to style your table rows is both reasonably safe and very powerful. The CSS can't mess with the actual data but it can significantly alter the position and appearance of the table rows. For that reason, avoid any CSS like Bold or Font-Sizing which can adversely affect the table layout.
It is also important that you choose color combinations that are pleasing, don't wash out the foreground color, and are not too loud.
- Styling changes don't appear to be working
Browsers will cache and reuse old CSS files so you may need to hit CNTRL-F5 in the browser to force it to reload all of the changes.