Customize your Qodly interfaces with CSS
In Qodly Studio, each widget can be styled directly using its properties. However, to maintain a consistent look throughout your application, and to easily apply global styles (such as font color, text size, or the appearance of selections), CSS is your best ally.
In this article, we’ll explore the basics of using CSS in Qodly Studio, with examples from the Performance Review application.
CSS Media query for a dark or light UI
Dark mode has been gaining a lot of ground recently. That’s why we’ve added support for it in 4D v19, and mentioned a few ways you can adjust it to your needs in the related announcement.
In this blog post, we’ll focus on CSS and explain in detail how to set CSS styles for light and dark modes using CSS media queries.
Dark Mode support on macOS has arrived.
Dark Mode is awesome and creates an exciting user experience. That’s why, starting with 4D v19, 4D now supports Dark Mode, which activates automatically if Dark Mode is turned on at the macOS level.
This is just the beginning, and there is more to come in future versions such as Dark Mode support for all components (e.g. the 4D Write Pro widget) and Design Mode.
Want to see how Dark Mode transforms the look of 4D elements? Keep reading!
Preview your CSS directly in the form editor!
In 4D v18 R5, you can preview the final CSS rendering in the form editor WITHOUT running your dialog. Yes, you heard that right. Standardizing and reviving your forms has never been easier!
If you haven’t yet heard about CSS in 4D, now’s the perfect time to learn more! Introduced in 4D v18 for project applications, this concept includes enhanced and quick style sheets based on CSS. I recommend taking a look at this blog post.
Project databases: beautify your forms with style sheets
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!