Skip to main content

Styles Library

After placing a component on the Canvas, you have the freedom to tailor its appearance using a variety of styling tools.

Overview

The Styles Library provides a powerful way to style your components. You can do this by simply dragging CSS classes from the Styles Library and dropping them onto the components.

The Styles Library provides three distinct types of CSS classes:

  • Local: These CSS classes are specific to the Webforms in which they are created and do not have an icon next to them.
  • Theme: Predefined CSS classes designed for standard themes, which can be applied across all Webforms in your application. You can recognize them by this icon styles-library.
  • Shared: CSS classes that are shareable and can be used across all Webforms within your application. These are identifiable by this unique icon styles-library.
styles-library

Managing CSS Classes

Adding a CSS Class

To add a CSS class, click the styles-library button, give it a name, and then choose the appropriate type:

  • For a local CSS class: Leave the "Create as Shared" option unchecked.

  • For a shared CSS class: Check the "Create as Shared" option.
styles-library
info
An alternative method to establish a new CSS class is through the properties panel, within the Style category. You can input your desired name, for example "newCssClass", into the CSS field.
If this name doesn't correspond to any existing CSS classes, you will be prompted with the option to create a new one.
styles-library

Editing a CSS Class

To edit a CSS class code, click the edit button styles-library within the Styles Library next to the class's name. This action will open it in the contextual panel.
styles-library
  • Both Local and Shared CSS class codes can be modified in the Contextual panel at the interface's bottom.

    styles-library


info

The changes will affect all the components utilizing this CSS class.

  • Theme classes, however, are non-editable, they can only be viewed by clicking on the styles-library button next to their name in the Styles Library.
    styles-library
info
An alternative approach to edit a CSS class is to navigate to the Style category, where you can check which CSS classes affect your component and access them using the edit button styles-library.
styles-library

Renaming a CSS Class

Inside the Contextual panel, you'll find a field with the class name styles-library and an edit button styles-library next to it. Click on it to rename the class.

info

Theme CSS classes cannot be renamed.

Deleting a CSS Class

To remove a CSS class, click the delete button styles-library next to its name in the Styles Library.

info

Theme CSS classes cannot be deleted.

Removing Unused CSS Classes

An unused CSS class is a local class that is declared but never called from any part of the webform. Click on the Delete Unused Elements button in the header of the CSS Classes area to remove all the useless local CSS declaration code from your webform:
styles-library
.

Converting a Local CSS Class to Shared

Inside the Contextual panel, you'll find a field with the class name styles-library and a share button styles-library next to it. Click on it to transform a local CSS class into a shared one.

Tracking CSS Classes Usage

The Inspect option allows you to see where your CSS classes are used within your webforms.
explorer
Toggle the option by clicking the button, then hover over a CSS class to highlight its location in your webform.
explorer

Working with CSS

Using CSS Classes

After selecting a component, you can adjust its properties using the properties panel. This involves style properties, and there is a clear distinction between component properties and styling.

Associating a CSS class with a component can be accomplished in two ways:

  • Drag and drop a CSS class onto your component from the Styles Library.

  • Using the Properties panel, link a CSS class to the component through the CSS section under the Style category. This can be done either by

explorer

The provided example demonstrates applying a CSS class named ratingStars to the embedded element Slider Container of the Range Input component. This modification transforms the standard slider into a star rating slider, suitable for rating activities or services. The corresponding code for this CSS class is shown below:


self::before {
content: "\2606 \2606 \2606 \2606 \2606"; /* Unicode representation of empty star */
color: #ccc;
}
/* Fill the stars based on the 'aria-valuenow' attribute */
self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="1"] )::before{
content: "\2605 \2606 \2606 \2606 \2606";
color: #6d5dfc;
}

self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="2"] )::before{
content: "\2605 \2605 \2606 \2606 \2606";
color: #6d5dfc;
}

self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="3"] )::before{
content: "\2605 \2605 \2605 \2606 \2606";
color: #6d5dfc;
}

self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="4"] )::before{
content: "\2605 \2605 \2605 \2605 \2606";
color: #6d5dfc;
}

self:has( [data-cy="cypress_slider_thumb"][aria-valuenow="5"] )::before{
content: "\2605 \2605 \2605 \2605 \2605";
color: #6d5dfc;
}

self [data-cy="cypress_slider"]{
position: absolute !important;
width: inherit;
opacity: 0;
}

info

The size of the stars is determined by the value specified in the Font category.

Exporting Styles as CSS Class

To reuse the style of a component, you can export it as a CSS class by following these steps:

  1. Select a component on the canvas, triggering the appearance of the tooltip.
  2. Click the CSS icon styles-library within the tooltip and provide a name for the new CSS class.
  3. If you wish to export a shared CSS class, enable the Create as Shared option.
  4. Click the Export button.
styles-library
info

This process exports only styles defined in the properties panel and not those from any other assigned CSS class.

Exporting styles instantly assigns the new CSS class to the component, removing the styles from the properties panel that are now defined in the assigned CSS class.

CSS Class Naming Priority

When assigning both a shared and a local CSS class with the same name:

  • The component is assigned both the local and shared CSS classes, regardless of the selection.

  • However, the shared CSS class takes precedence, and its styles are prioritized over those of the local class.

  • Consequently, if styles in the local CSS class are defined but not present in the shared class, they are still applied to the component.

info
When both css classes are assigned, the icon of the CSS class changes to symbolize that it is both local and shared. You can choose which one to edit from the dropdown list.
styles-library

Qodly Studio permits the use of the same name for both a local and shared CSS class.

However
It does not allow the creation of CSS classes that resemble the name of a theme CSS class. More details can be found at Tailwind CSS.
styles-library

Overriding Style Properties

A priority-based scenario determines which styles take precedence over others:

  • When assigning the theme CSS class bg-red-500 to a component, the background property displays rgb(239,68,68).

  • Subsequently assigning a local CSS class to the same component, featuring a different background color, will override the initial value set by the theme CSS class.

  • A shared CSS class takes precedence, prioritizing its styles over those of the local class, thereby overriding the initial value set by the local CSS class.

  • Modifying this value with another background color from the properties panel will lead to the theme, local and shared CSS classes being overridden.

Customizing DataTable Styles

The DataTable component styles can be customized by leveraging specific CSS classes that target various elements of the table:

data-table

CSS Table Classes

The following specific CSS classes are supported:

AreaClass nameApplies to
Header.headerThe entire header
.header-cellAll cells in the header
.header-evenHeader of even columns
.header-datasourceName (*)The header of the corresponding datasource
Row.rowAll rows
.selectedThe selected row
.row-evenAll even rows
.hoverThe hovered row
Cell.cellAll cells
Column.col-datasourceName (*)The column of the corresponding datasource
.col-evenEven columns
.sortedSorted colums
.sorted-ascAscending sorted columns
.sorted-descDescending sorted columns

(*) Example: .header-lastname, .header-employer-name (use a - instead of . for relations)

Examples

The following CSS definitions enable the design of custom DataTable components.

Example 1 - Blue Headers

blue-headers

self {
border-radius: 10px;
box-shadow: 0 0 40px 0 rgb(0 0 0 / 15%);
}

self .header .header-cell {
background-color: #6c7ae0;
color: #fff;
font-weight: bold;
padding: 1.25rem 2rem;
}

self .row {
align-items: center;
}

self .row .cell {
padding: 0.5rem 2rem;
}

self .row .cell > span {
justify-content: flex-start;
}

self .row.selected {
background-color: #d2d7f5;
}

self .row-even:not(.selected):not(:hover) {
background-color: #f8f6ff;
}

self .header .resizable > :not([hidden]) ~ :not([hidden]),
self .row > :not([hidden]) ~ :not([hidden]),
self .Grid .innerScrollContainer,
self .Grid .innerScrollContainer > :not([hidden]) ~ :not([hidden]) {
border-width: 0;
}

Example 2 - Green Headers

green-headers

self .header .header-cell {
background-color: #324960;
color: #fff;
font-weight: bold;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}

self .header .header-even {
background-color: #4fc3a1;
}

self .row {
align-items: center;
}

self .row .cell {
font-size: 14px;
text-align: center;
}

self .row .cell > span {
justify-content: center;
}

self .row.selected {
background-color: #caede2;
}

self .row-even:not(.selected):not(:hover) {
background-color: #f8f8f8;
}

self .header .resizable > :not([hidden]) ~ :not([hidden]),
self .row > :not([hidden]) ~ :not([hidden]),
self .Grid .innerScrollContainer,
self .Grid .innerScrollContainer > :not([hidden]) ~ :not([hidden]) {
border-width: 0;
}

Example 3 - Dark Mode DataTable

This example assumes that the DataTable contains a column associated with a lastname datasource.

dark-mode-datatable

self {
background-color: rgb(61, 54, 61);
}

self .row {
align-items: center;
}

self .header {
font-weight: bold;
}

self .header .header-cell {
background-color: transparent;
border-top: none;
border-bottom: none !important;
color: #fff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2rem;
}

self .row {
background-color: rgba(0, 0, 0, 0.1);
color: #777;
transition: 0.3s all ease;
}

self .row:hover {
background-color: rgba(0, 0, 0, 0.1);
color: white;
}

self .row:hover .col-lastname {
color: #b474e4;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
}

self .row.row-even {
background-color: unset;
}

self .row .cell > span {
justify-content: flex-start;
}

self .header,
self .header .resizable > :not([hidden]) ~ :not([hidden]),
self .row > :not([hidden]) ~ :not([hidden]),
self .Grid .innerScrollContainer,
self .Grid .innerScrollContainer > :not([hidden]) ~ :not([hidden]) {
border-width: 0;
}

info

These style examples are the same as those applied to the DataTables found in the templates categorized under DataTables.

Progress Bar

Displaying the Progress Bar

The Progress Bar is triggered when the front end anticipates at least one REST request response. This visual element is crafted to signify active server-side processes, offering a clear indication, particularly during the execution of REST queries.

Tailoring the Progress Bar

Customizing the appearance of the progress bar is facilitated through the following methods:

  • Creating a shared CSS class named qodly-progress:

    self {
    background-color: blue;
    height: 20px;
    }
  • Creating a custom named CSS class and targeting the div element with the class qodly-progress:

    div.qodly-progress {
    background-color: blue;
    height: 20px;
    }

See also

If you're not familiar with CSS properties and styles, or you need a refresher, here are a few useful links and tools: