Css Class Field Value

+1 vote

Can you please advise what value/format is supposed to be entered in the Css Class fields?

in How To by (260 points)

1 Answer

0 votes
Best answer

The CSS Class field should be populated with a CSS Class name. See: Field Prefs/Layout

That class name must be defined in the custom CSS file that you will have setup either for the entire dbFront site or the dbFront database. See:


Suppose you had a specific set of fields that were customer comments that needed to be highlighted. You would:

  • Open the settings [Help] / [Settings] / [Website] and set "Site Css File" to the value "css/customSite.css",
  • Create or edit the CSS class file c:\inetpub\dbFront\css\customSite.css,
  • Add a CSS class named "customerComment",

     /* New CSS Class Named "customerComment" */
     .customerComment {  
         color: red !important;
         background-color: yellow !important;
         background-image: none !important;
  • Set the class name on all appropriate fields to "customerComment".

One you refresh the screen in dbFront then all of the fields with the class "customerComment" would appear as intended.

Trouble shooting:

  • We fixed a bug in dbFront versions earlier than which would cause the Css Class names on some fields to be ignored.
  • If no changes are visible then it is likely that the browser can't find the CSS file. Please verify the paths. You can also open the browser developer tool via "F12" and look at the console window for specific errors.
by (64.3k points)
edited by
Thanks for confirming, that's very helpful and I'm now able to apply a custom CSS to a field.  Unfortunately, this appears to be affecting the field and also other areas of the UI
CSS can be quite powerful but also trouble some.   Let me know if you get stuck.
@ColinGraham, I just added the ability to apply the styling to the table/grid columns as well.   Please see:
Welcome to the dbFront Q&A site, where you can ask questions and receive answers from other members of the community.
 | Minimalist Answer Theme by Digitizor Media
Powered by Question2Answer