🖍️Customize styles

Using Webfonts

With the @import statement, you can incorporate externally hosted web fonts into your QuickDEV projects.

In the Workspace CSS or App CSS editor, you have the option to include Font Family Import Statements.

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

Using the "Font Family" text property, you can activate the designated font family across various components within your apps.

Add Web fonts with a CSS @import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); statement.

You can also add here any else CSS. Use .root-container as prefix for your style selectors, to limit the effect to your apps only.

At the property Font Family, you can now enter the name of your Font, which you did embed with CSS before.

Customize component styles with CSS

With CSS, you can extensively customize the design of components. You have the flexibility to use the same CSS editor for each individual app or at the workspace level for all apps collectively.

QuickDEV enables you to define styles at a global level, granting you the ability to customize the appearance of not only the admin area but also the editor interface.

To restrict the impact of customized styling to your apps exclusively, employ the prefix class root-container in your selectors.

// Use the prefix-class in your Selectors to limit the customized CSS to your Apps only.

// will have an effect for all Buttons of your QuickDEV Apps only
.root-container .button1 {
    border-radius: 50px;
}

// will have an effect for all Buttons of QuickDEV (Editor + Apps)
.button1 {
    border-radius: 50px;
}

Application-level CSS

In the app editor, locate and click on the gear icon ⚙️ situated on the left sidebar. From there, select Scripts and style > CSS, where you can then input CSS code specific to the current app.

For instance, if you insert a text component named text1, you can utilize .text1 as the element name and adjust its CSS style accordingly.

It's advisable to modify component styles within Properties > Style because the DOM of an adjusted CSS style might undergo changes as the system iterates.

Workspace-level CSS

In QuickDEV, workspace admins have the capability to set pre-loaded CSS styles for all apps within the workspace. To accomplish this, navigate to Settings, then proceed to Advanced > Preload CSS.

It is highly recommended to use CSS selectors as follows:

Class name	Description
top-header	Top navigation bar
root-container	Root container of the app

Each component's name serves as its class name. For instance, for the text1 component, you can utilize .text1 as its class name and define CSS code accordingly. Additionally, class names follow a consistent format: ui-comp-{COMP_TYPE}. For instance, .ui-comp-select can be used to style all select components. Below is a list of all the components' class names:

tree
treeSelect
audio
video
drawer
carousel
fileViewer
divider
qrCode
form
jsonSchemaForminput
textArea
image
custom
module
jsonExplorer
jsonEditor
container
tabbedContainer
modal
listView
password
richTextEditor
numberInput
slider
progress
progressCircle
navigation
iframe
rangeSlider
rating
switch
select
multiSelect
cascader
checkbox
radio
segmentedControl
file
date
dateRange
time
timeRange
button
link
table
dropdown
toggleButton
text
collapsibleContainer
chart
imageEditor
scanner

It's recommended to avoid using class names that may change with iterations, such as "xc-djiXaF" and "bfTYyhO." QuickDEV supports CSS pre-processors, enabling you to utilize CSS nesting for improved efficiency. For example:

.text1 {
    span {
        color: green;
        font-weight: bold;
    }
}

The space #app-{APP_ID} contains all custom CSS for apps, while the space #module-{MODULE_ID} contains all custom CSS for modules. Higher priority theme or component styles may override your preload CSS if it's not working properly. Use the browser's Inspect feature to diagnose this.