4D Blog

Home Product Project databases: beautify your forms with style sheets

Project databases: beautify your forms with style sheets

November 8, 2019

Product

Classic 4D binary structures let you define style sheets to specify the font, font size, and text style to use in your forms for both the macOS and Windows platforms. Project databases let you go even further by letting you define the properties of a 4-state button or specify the color and border of all line objects or even set the header height of all of an application’s list boxes! Inspired by the grammar and syntax of CSS, 4D adapted it to meet the specific needs of the forms in 4D project databases. Thanks to style sheets, you can configure all of the properties to create truly visually appealing forms. This blog post shows you how!

Style sheet database example

Platform

In project databases, you can define individual style sheets for both platforms (Windows or macOS) as well as an “overall” style sheet.

Why would you want different style sheets per platform? Because often a different font / font size is used on macOS than the font / font size used on Windows. On the other hand, the color of the text is often identical for both.

Now, you can define common styles in the “stylesheets.css” file and platform-specific styles in their own files: “stylesheets_mac.css” and “stylesheets_windows.css”.

Properties

One of the major revolutions in project databases is that all properties supported by form objects can be used in style sheets.

For example, you can create a “buttonAction” class to create 4-state buttons with the “toolbar” look, gray text, and not focusable:

.buttonAction {
  iconFrames: 4;
  style: toolbar;
  stroke: grey;
  focusable: false;
}

blank

This makes it easier to design forms for your application while maintaining the same graphic design.

Selectors

Another big change is that you can create style sheets by class, by object type, object name, or attributes.

Object type selector

With the object type selector (equivalent to the CSS element selector), you can define common properties applicable to all objects in the database. For example, all list boxes must have a 2-line header, empty lines should not be displayed, and row background colors should be gainsboro and whitesmoke:

listbox {
  headerHeight: 2em;
  hideExtraBlankRows: true;
  fill: gainsboro;
  alternateFill: whitesmoke;
} 

blank

Thanks to this selector, you can define your own look and feel for your form objects.

Attribute selector

With the attribute selector, you can define a style sheet by a property value.

For example in the input/output data forms, I have buttons to add, edit, or delete records. All of these buttons use the same icon, title, and help tips.

Why not create a style sheet for action buttons and designate a specific value for the action property? For example, if the action property is set to “editSubrecord”:

.buttonAction[action=editSubrecord] {
  icon: url("/RESOURCES/Images/Buttons/edit.png");
  tooltip: ":xliff:button_tip_EditRecord";
  text: ":xliff:button_EditRecord" !important;
}

blank

As a bonus, a live action demonstration!

 

Discuss

Tags Project, Project database, v18

Latest related posts

  • May 20, 2025

    Automatic Refresh of OEM Build Licenses

  • May 16, 2025

    New class to handle incoming TCP connections

  • April 29, 2025

    Discover your AI-powered writing assistant in 4D Write Pro

Vanessa Talbot
Vanessa Talbot
• Product Owner •Vanessa Talbot joined 4D Program team in June, 2014. As a Product Owner, she is in charge of writing the user stories then translating it to functional specifications. Her role is also to make sure that the feature implementation delivered is meeting the customer need.Since her arrival, she has worked to define key features in 4D. She has worked on most of preemptive multi-threading new features and also on a very complex subject: the new architecture for engined application. Vanessa has a degree from Telecom Saint-Etienne. She began her career at the Criminal Research Institute as a developer for the audiovisual department. She has also worked in media and medical fields as expert in technical support, production as well as documenting new features.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • 4D View Pro
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor

Tags

4D-Analyzer 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R8 20 R9 Administration Authentication Build application CI/CD Class Client/Server Code editor Collections Compatibility settings Formula Listbox Logs Mail Microsoft 365 Network Objects ORDA PDF Pictures Preemptive Programming Qodly Studio REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor
Subscribe to 4D Newsletter

© 2025 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy