Css Class Field Value

Question

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

Answer 1

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:

• Database specific CSS File: Custom Css File
• Full Site CSS File: Custom Css File

Example:

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

Comments

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: https://dbfront.com/qa/1074/conditionally-style-table-columns-based-on-values