Conditional Row Color & Styling

dbFront 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 colour and style to your table grid.

The following instructions contain the steps to customize your table grids with row-specific colour 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 row's styling in any way chosen.

Custom CSS

As a first step, you need to set up a custom CSS file. For instructions 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

tr.Blue, tr.AD_PRES {
   background-color: #5edcffff !important;
}
tr.Silver, tr.AD_VP {
   background-color: #84fffdff !important;
}
tr.Green, tr.AC_ACCOUNT, tr.FI_ACCOUNT {
   background-color: #caff67ff !important;
}
tr.Yellow, tr.AD_ASST {
   background-color: #fff78dff !important;
}
tr.Orange, tr.HR_REP {
   background-color: #ffca61ff !important;
}
tr.Red, tr.AC_MGR, tr.FI_MGR, tr.MK_MAN, tr.PU_MAN, tr.SA_MAN, tr.ST_MAN {
   background-color: #ffa8a6ff !important;
}
tr.Pink, tr.PU_CLERK, tr.SH_CLERK, tr.ST_CLERK {
   background-color: #ff8aceff !important;
}
tr.Purple, tr.MK_REP, tr.PR_REP, tr.SA_REP {
   background-color: #e7b3ffff !important;
}
tr.Violet, tr.IT_PROG {
   background-color: #bc81ffff !important;
}

The CSS selector should specify the tag <tr> followed by the custom data class. For example: tr.IT_PROG. The !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 good to choose colour combinations that are pleasing, don't wash out the foreground colour, and are not too loud.

The colour palettes chosen for the demo site were created using the online tool Coolors. The following link should give you a good starting point. Demo colors at Coolors.co

Troubleshooting

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.