Customize your Qodly interfaces with CSS



Tips

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.

Performance Review Application

What is CSS ?

CSS (Cascading Style Sheets) is a style language for controlling the visual appearance of HTML elements on a web page. They are used to define colors, fonts, margins, animations, and much more, to create consistent, aesthetically pleasing and adaptable interfaces.

In this blog, we’ll just show you how to use and create a CSS class in Qodly Studio, as well as a few simple examples. If you want to learn how to write CSS, there are numerous documentation sources, training courses and videos on the subject.

How to use a CSS class in Qodly

Create a CSS class

Qodly allows you to add CSS classes directly to your project. Here’s how:

  • Go to the Styling menu in Qodly Studio.
  • Create a CSS class.
  • Specify whether it is local or shared.
  • Write the CSS definition.

 

CSS types in Qodly

Qodly offers three types of CSS for maximum flexibility:

  • Local: Applied only to a specific component or page.
  • Theme-based: Shared across multiple components to maintain consistency within a section of your application.
  • Shared: Available globally throughout the entire project.

 

These options give you great flexibility in structuring and managing your styles.

Apply a CSS class

Once you’ve created your CSS, you can apply a class to different widgets in just a few steps:

  • Select the widget in Qodly Studio.
  • Go to the Properties tab.
  • Look for the CSS Class option and enter the name of the class defined in your CSS file.

Real-life use cases

Let’s take the Login page from the Performance Review application as an example.

This is a login page for a "Performance Review" system. The design is split into two sections: Left Side (Red Background) Displays the Performance Review title with an icon of a building and a person. Right Side (White Background) Contains a "Welcome!" message. Two input fields for Email and Password, with the password field having an eye icon to toggle visibility. A "Forgot your password?" link. A red "Sign in" button for user authentication. It has a clean and modern design with a red and white color scheme. Let me know if you need any insights or modifications!

Example 1: Styling a Login Button

We want to style the login button with:

  • White text
  • Red background
  • Rounded corners
  • Hover effect with a darker red

 

We create a “button-full” class.

blank

We enter the following CSS description:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #FFFFFF;
}

In Qodly Studio, apply this style using the “button-full” class on your buttons.

blank

Example 2: Adaptive Buttons for Light & Dark Modes

With media queries, you can create adaptive styles that automatically adjust based on the user’s light or dark theme.

For dark mode, we want a darker red with a lighter hover effect. This is easily achieved using the @media (prefers-color-scheme: dark) selector:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  self {
    border-radius: 4px;
    border: 1px solid #c32232;
    background-color: #c32232;
    color: #ffffff;
    transition-duration: 0.4s;
  }
	
  self:hover {
    border: 1px solid #dd3c4c;
    background-color: #dd3c4c;
    color: #ffffff;
    }
}

The result in images:

Light theme

blank

Dark theme

blank

Example 3: Using CSS Variables

CSS variables allow you to define reusable constants, making style management easier and more dynamic.

For example, you can centralize color management and apply them dynamically based on light or dark mode.

Step 1: Define a Shared Stylesheet

Create a shared stylesheet and define all your constants:

:root {
   --main-bg-color: #FFFFFF;
   --main-fg-color: #000000;
   --accent-color1: #dd3c4c;
   --accent-color2: #c32232;

  @media (prefers-color-scheme: dark) {
    --main-bg-color: #121212;
    --main-fg-color: #E0E0E0;
    --accent-color1: #c32232;
    --accent-color2: #dd3c4c;
  }
}

Step 2: Apply the variable to the button-full class.

To use a variable in a CSS class, simply use the var() function:

self {
  border-radius: 4px;
  border: 1px solid var(--accent-color1);
  background-color: var(--accent-color1);
  color: var(--text-color1);
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid var(--accent-color2);
  background-color: var(--accent-color2);
  color: var(--text-color1);
}

Now, whenever you update the color variables, all styled elements will automatically update, ensuring a consistent theme across the application.

Example 4: Responsive Component Styling

The following example demonstrates how to create a responsive design that adjusts based on screen width.

The login panel consists of three Style Boxes:

  • A box for the application title.
  • A box for login and password fields.
  • A container wrapping both boxes.

 

The container uses display: flex; and flex-wrap: wrap; to ensure responsiveness. If the boxes become too wide, they stack vertically instead of being side by side.

A dark-themed user interface panel labeled "Display," containing various layout configuration options. The "Direction" dropdown is set to "Row." Below it, there is a "Gap" input field with "PX" as the unit. Several sets of alignment controls are displayed, including: - "Justify" with multiple icons representing different content positioning options. - "Align" with icons for vertical alignment choices. - "Wrap" with toggle icons for wrapping behavior. - "Content" with additional alignment options.

Then, for the other two boxes, the width is changed between 50% and 100% depending on screen size. For aesthetic reasons, the border is also modified.

Here’s the CSS example of the box positioned on the left or on top, depending on the screen:

self {
    border-radius: 10px 0 0 10px;
    width: 50%;
    height: 100%;
}

@media screen and (max-width: 800px) {
    self {
      border-radius: 10px 10px 0 0;
      width: 100%;
      height: fit-content;
    }
}

The result in images:

A login form for a "Performance Review" system with a red header containing an icon of a building and a person. Below the header, "Welcome!" is displayed in bold text. The form includes two labeled input fields: "Email" and "Password," with the password field featuring a visibility toggle icon. A "Forgot your password?" link is present below the input fields. At the bottom, a red "Sign in" button is centered.

A Quick Tip to Get Started

If you’re unsure how to structure your CSS, Qodly provides a handy feature. You can define styles via widget properties and export them as CSS.

blank

This allows you to see how a CSS rule looks and easily create and modify your own CSS classes.

Go further

We hope these examples have demonstrated the power and flexibility of CSS in Qodly Studio. To explore further, check out these additional resources:

 

With CSS, you can transform your Qodly applications into unique, professional visual experiences, while simplifying the management of your styles. Get started and share your creations or ask your questions on the 4D Forum!

Discuss

Tags , , , , , ,

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.