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.

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.

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.

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.

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:

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.

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 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.

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:

• Customizing Button Style
• Customizing CheckBox Styles
• Customizing DataTable style
• Customizing Matrix Styles
• Customizing Select Box Styles
• Customizing Radio Styles
• Customizing Text Input Styles

 

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!