Customize Widgets Using CSS
You can fully customize the visual theme of embedded widgets using CSS. For examples, see the Qrvey Codepen.
Naming Convention
The flags are keys, and any valid CSS variable is the value.
{ "--qv-main-color": "#000" }
Use the following naming convention for CSS variables:
--qv-[module]-[property]-[attribute]
-
--qv-: Every CSS variable in Qrvey must start with the prefix-qv-. This minimizes the risk of name collision when embedding widgets and helps to identify Qrvey variables. -
module: Refers to sections or areas in which the product is divided. It is necessary for variables that only affect a specific area of the product.- Global variables use this global word:
-qv-global-. - Variables that apply only to the chart start with:
-qv-chart-.
- Global variables use this global word:
-
property: The CSS property to which the variable applies (color, font, margin, padding, border, and so on). Examples:-qv-color--qv-chart-color
-
attribute: Additional context or detail of the variable's purpose. Examples:--qv-global-color-main--qv-global-color-text--qv-global-color-title--qv-global-color-main-hover--qv-global-font-size--qv-global-font-family--qv-global-border-border--qv-global-border-radius-radius--qv-chart-font-family--qv-chart-font-size-label--qv-chart-font-size-title--qv-chart-font-font-size-tooltip
Priority and Fallback
Some components can depend on more than one CSS variable or custom property, which requires you to define which one takes precedence. In addition, you should always define a fixed value as a fallback. For example:
.cl1 {
background-color: var(--qv-global-color-main, orange)
}
.cl2 {
background-color: var(--qv-chart-cell-color-main, var(--qv–global-color-main, orange))
}
For .cl1, if the variable --qv-color-main does not exist, the fixed value orange is applied.
For .cl2, if --qv-cell-color-main does not exist, --qv-color-main is evaluated. If it does not exist, orange is applied.
Inheritance
CSS variables are cascading in nature. The value of a variable is inherited from its parent.
Codepen Example: inheritance.
You can also assign the inline CSS variables in a closer node or element.
Qrvey widgets usually assign CSS variables in the <body/> or in the :root{} pseudo-class.
:root {
--qv-color-main: blue;
--qv-cell-color-main: pink;
}
.overwrite {
--qv-color-main: red;
}
.cl1 {
background-color: var(--qv-color-main, orange)
}
.cl2 {
background-color: var(--qv-cell-color-main, var(--qv-color-main, orange))
}
Qrvey Component Library
Most of the library components depend on the main color, and this is applicable for the default Qrvey theme. However, you can assign buttons a different shade than the main color. In this case, provide a main variable and an optional variable. For example:
var(--qv-btn-color-main, var(–qv-color-main, orange))
For more information on the design system, see Qrvey Design System.
Backward Compatibility
To support legacy variables, assign each variable in a node. For example, to support --qv-main-color, assign the variable using the following technique:
body {
-–qv-main-color: var(--qv-global-main-color, orange);
}
Colors
Among the customization variables we find the color variables, which let you change the main colors of the theme:
| Variable Name | Functionality | Example |
|---|---|---|
--qv-main-color | Modifies the main color of the Theme. The default is #E6773D. | |
--qv-main-text-color | Modifies the main color of the Theme fonts. The default is white. | |
--qv-secondary-color | Modifies the secondary color of the Theme. The default is is #25486F. | |
--qv-tab-bar-color | Modifies the background of the Navigation Tab Bar. The default is is #25486F. | |
--qv-info-notification-color | Modifies the color of the informative notifications. The default is #4FA6DA. | |
--qv-success-notification-color | Modifies the color of successful notifications. The default is #7DC58C. | |
--qv-warning-notification-color | Modifies the color of warning notifications. The default is #FFB75D. | |
--qv-error-notification-color | Modifies the color of error notifications. The default is #C23934. | |
--qv-info-color | Modifies the color of notifications and information components. The default is #4FA6DA. | |
--qv-success-color | Modifies the color of notifications and success components. The default is #7DC58C. | |
--qv-warning-color | Modifies the color of notifications and warning components. The default is #FFB75D. | |
--qv-error-color | Modifies the color of notifications and error components The default is #C23934. | |
--qv-an-chart-border-color | Modifies the border color of the chart panes. | |
--qv-an-chart-background-color | Modifies the background color of the chart panels. | |
--qv-an-chart-header-border-color | Modifies the color of the bottom border of the header of the chart panels. | |
--qv-an-chart-header-border-color-options | Modifies the border color of the header options of the chart panels. | |
--qv-an-chart-header-background-color-options | Modifies the background color of the chart panel header options. | |
--qv-an-chart-header-background-color-hover-options | Modifies the background color in hover state of the chart panel header options. | |
--qv-global-close-modal-color | Modifies the color of the modal close icon. | |
--qv-global-close-modal-hover-color | Modifies the color of the close modal icon in hover state. | |
--qv-global-overlay-color | Modifies the modal overlay color. | |
--qv-global-threedots-icon-color | Modifies the color of the options (three-dot) icon. | |
--qv-global-tooltips-background-color | Modifies the background color of tooltips. |
Fonts
To modify the font type of the components inside the widget, use the following global CSS variable:
| Variable Name | Functionality | Example |
|---|---|---|
--qv-global-font-family | Changes the font family across the complete interface |
Custom Font Family On Visualizations
Version 8.3 of the Qrvey platform introduced visualizations using echarts, which you cannot manipulate through CSS. Instead, those charts render with canvas. In version 8.2 and earlier, visualizations worked by SVG and allowed immediate changes by elements. By themes performance, constant requests cannot be made to monitor the immediate changes by CSS. In response, Qrvey requires that the user has the custom variable of --qv-global-font-family declared in advance, or should reload the theme or widget to apply the changes when selecting the default option from the font dropdown of the themes modal.
Chart Panel Font
The following table lists the font variables specific to chart panels:
| Variable Name | Functionality | Example |
|---|---|---|
--qv-an-font-size-chart-panel-title | Modifies the font size of the chart panel title (default is 13px) | |
--qv-an-font-weight-chart-panel-title | Modifies the font weight of the chart panel title (default is normal) | |
--qv-an-font-size-chart-panel-options | Modifies the font size of the icons of the chart panel options (default is 13px) |
Positions
To modify the location of specific components in the navigation menu, use the position variables. The following table lists the available position variables:
| Variable Name | Functionality | Example |
|---|---|---|
--qv-global-position-toast-right | Modifies the horizontal position of the notification component. | |
--qv-global-position-toast-top | Modifies the vertical position of the notification component. | |
--qv-global-position-modal-top-offset | Modifies the distance of the modal with respect to the height of the browser window. | |
--qv-position-floatingmenu-right | Modifies the horizontal position of the floating menu component. | |
--qv-position-floatingmenu-bottom | Modifies the vertical position of the floating menu component. |
Borders
To modify the border radius of the components that are inside the widget, use the following global CSS variable:
--qv-global-border-radius
The following table lists specific border variables for each component:
| Variable Name | Functionality | Example |
|---|---|---|
--qv-global-border-radius | Modifies the border radius globally. | |
--qv-global-border-radius-button | Modifies the border radius of the button component. | |
--qv-global-border-radius-card | Modifies the border radius of the application card component. | |
--qv-global-border-radius-dropdown | Modifies the border radius of the drop-down list component. | |
--qv-global-border-radius-input | Modifies the border radius of the textboxes component. | |
--qv-global-border-radius-modal | Modifies the border radius of the modals component. | |
--qv-global-border-radius-toast | Modifies the border radius of the Notifications component. | |
--qv-global-border-radius-pills | Modifies the border radius of the pills component. | |
--qv-global-border-radius-tags | Modifies the border radius of the tags component. | |
--qv-global-border-radius-table | Modifies the border radius of the table component. | |
--qv-global-border-radius-dropdown-list | Modifies the border radius of the list component. | |
--qv-global-border-radius-tooltips | Modifies the border radius of the tooltips component. | |
--qv-global-border-radius-qvdatepicker | Modifies the border radius of the calendar component. | |
--qv-global-border-radius-switch | Modifies the border radius of the switch button component. | |
--qv-global-border-radius-color-picker | Modifies the border radius of the color selection component | |
--qv-global-border-radius-color-picker-preview | Modifies the border radius of color selection preview component. | |
--qv-global-border-radius-value-list | Modifies the border radius of the value list component. | |
--qv-global-border-radius-input-box | Modifies the border radius of the input box component. | |
--qv-global-border-radius-rich-editor | Modifies the border radius of the advanced text input component. | |
| Analytic Widget | ||
--qv-an-border-radius-chart-panel | Modifies the border radius of the Chart Panels component. | |
--qv-an-border-radius-cb-action-chart | Modifies the border radius of the Chart Builder action list component. | |
--qv-an-border-radius-cb-item-values | Modifies the border radius of the Chart Builder dataset list component. | |
| Dashboard: | ||
--qv-at-border-radius-db-menu-icons | Modifies the border radius of the Legacy Dashboard menu component. | |
--qv-at-border-radius-db-draganddrop | Modifies the border radius of the drag-n-drop component in Legacy Dashboard. | |
--qv-at-border-radius-db-input-box | Modifies the border radius of the menu component inside Legacy Dashboard. | |
--qv-at-border-radius-db-draggable-dataset | Modifies the border radius of the drag component in Legacy Dashboard. | |
--qv-at-border-radius-db-expandable-card | Modifies the border radius of the expandable card component inside Legacy Dashboard. | |
--qv-at-border-radius-db-image | Modifies the border radius of the image component inside Legacy Dashboard. | |
--qv-at-border-radius-db-grid-item | Modifies the border radius of the grid component inside Legacy Dashboard. | |
| User Management (Legacy Dashboard) | ||
--qv-at-border-radius-qum-card | Modifies the border radius of the card component in User Management. | |
| Workflows: | ||
--qv-at-border-radius-workflows-card | Modifies the border radius of the card component in workflows. | |
--qv-at-border-radius-workflows-sms-cont | Modifies the border radius of the SMS component in workflows. | |
--qv-at-border-radius-workflows-email-cont | Modifies the border radius of the email component in workflows. | |
--qv-at-border-radius-workflows-item-sidebar | Modifies the border radius of the sidebar list component. | |
--qv-at-border-radius-workflows-log-details | Modifies the border radius of the log details component. | |
--qv-at-border-radius-workflows-expandible-card | Modifies the border radius of expandable card component. |
To modify the border width of the chart panel header, use the following.
| Variable Name | Functionality | Example |
|---|---|---|
--qv-an-border-width-chart-panel-header | Modifies the width of the bottom border of the header of the chart panels. |
Padding
To modify the internal space of supported components, use the padding variables.
| Variable Name | Functionality | Example |
|---|---|---|
--qv-an-padding-chart-panel-header | Modifies the internal space of the header of the chart panel component |
Dashboards
| Variable Name | Functionality |
|---|---|
--qv-db-border-radius-draganddrop | Drag and drop in Dashboard (Legacy) |
--qv-db-border-radius-grid-element | Grid components in Dashboard (Legacy) |
--qv-db-border-radius-image | Images inside Dashboard (Legacy) |
--qv-db-border-radius-menu-icons | Dashboard menu icons |
Z-Index
| Variable Name | Functionality |
|---|---|
--qv-db-z-index-modal | Z-index of modals for Dashboard (default: 999) |
--qv-db-z-index-toast | Z-index of toasts for Dashboard (default: 1000) |
Interaction Toolbar
Use the following variables to customize the dashboard toolbar display when in Interact mode.
| Variable Name | Functionality |
|---|---|
--qv-db-main-color-interaction-toolbar | Modifies the Save Changes button, Interact/Design switch, and the arrow displayed when the toolbar is hidden. |
--qv-db-main-text-color-interaction-toolbar | Modifies the color of toolbar text and the Undo/Redo, Hidden Items, and options (three-dot) icons on the toolbar. |
--qv-db-font-weight-interaction-toolbar | Modifies font weight for toolbar text. |
--qv-db-font-size-interaction-toolbar | Modifies font size for toolbar text. |
--qv-db-border-color-button-interaction-toolbar | Modifies border color for toolbar buttons, including the Design/Interact switch. This does not affect the current version display. |
--qv-db-background-color-button-interaction-toolbar | Modifies the background color for toolbar buttons. This does not affect the Save Changes button, the Design/Interact switch, or the version indicator. |
--qv-db-border-radius-version-interaction-toolbar | Modifies the border radius of the version indicator. |
--qv-db-background-color-source-version-interaction-toolbar | Modifies the background color of the version indicator displayed for the source version of a dashboard. |
--qv-db-border-color-source-version-interaction-toolbar | Modifies the border color of the version indicator displayed for the source version of a dashboard. |
--qv-db-background-color-personalized-version-interaction-toolbar | Modifies the background color of the version indicator displayed for a personalized version of a dashboard. |
--qv-db-border-color-personalized-version-interaction-toolbar | Modifies the border color of the version indicator displayed for a personalized version of a dashboard. |
--qv-db-background-color-interaction-toolbar | Modifies the background color for the toolbar, any of its displayed menus, and the indicator for the hidden toolbar. |