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
