Using custom CSS - Font Size, UI Element Colors...

0 votes

I am not very familiar with CSS. How do I determine what properties are available for modifying? Is it possible to use the custom CSS options to, for example, change the font settings on a specific table?

What about modifying specific UI elements? For example, I want to change the bar that contains the different child tables, to make it more distinct. Maybe even change the colors of the entire child table/form sections. Is this possible?

in How To by (2.3k points)

1 Answer

0 votes

Below are some pointers on how you can get started with CSS in dbFront. dbFront is a web application so nearly everything you see in the browser can be tweaked in one way or another using CSS.

Step 1. Choose / Create a Theme

The most important step is to choose or create a theme that gets you close to what you need. For instruction see: Theme Setup

Step 2. Add a custom CSS file

The next step is to add a Custom CSS file. You can add a single file that covers your entire dbFront install or you can specify database specific CSS files.

For instructions on adding a CSS file see: Custom CSS Files

Step 3. Add custom CSS classes

Once you have a place to add the CSS then the next step is to determine how you can target the specific elements you want to change.

Some changes are global but often you need to modify the styling of a specific table, field or row.

The best way to target the elements is by using your own custom css classes. It is possible to target areas of dbFront position or other means but that gets risky because future versions of dbFront may break your styling efforts.

dbFront allows you to assign a CSS class name to tables, fields and rows:

  • Table: Use Css Class on the Layout tab on the table preferences,
  • Form: same as Table class name,
  • Button: Use Css Class on the Main tab of the button preferences,
  • Field: Use Css Class on the Layout tab of the field preferences,
  • Row: Use Row CSS Class on the Table Fields tab on the table preferences.

Step 4. Used Browser Developer Tools

Once you have the class names set then you can experiment in your Browser's Developer tools .

For instructions on using the Chrome Browser tools see: Viewing and Changing CSS.

Step 5. Applying your changes

Once you have a style change you are happy with then you can save it to your CSS file and reload your browser to see the changes in action.

You may need to hit CNTRL-F5 to force your browser to reload the server files.

CSS Tutorials

Below are some CSS Tutorial Sites

by (64.4k points)
edited by
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