your database front-end

Conditional Row Color & Styling

dbFront - Colorful Table Rows

dbFront (1.1.0.3232) 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.

Custom CSS

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

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 important that you choose color combinations that are pleasing, don't wash out the foreground color, and are not too loud.

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

Content you want the user to see goes here.
close