How to use your own custom stylesheet (CSS)

How to add custom styling (CSS) to Qonfi

It is now possible to add custom styling (CSS) within Qonfi. This feature allows you to override existing classes that are not available in the styling tab, as well as define and apply custom styling values.

Navigate to Preview & Styling → Styling tab and click the Custom CSS button at the bottom of the page. This will open a text editor where you can write and apply your custom CSS.

How to use your own custom stylesheet (CSS)

You can add your own custom stylesheet to completely fine-tune your Qonfi styling.

You can do this by adding the data-qonfi-stylesheet attribute with the url to your stylesheet to your Qonfi element on your page.

<div style="min-height: 286px;" data-qonfi-uuid="your_qonfi_id" data-qonfi-stylesheet="https://www.yourdomain.com/custom-qonfi-stylesheet.css">

Please note: Qonfi will automatically use the font defined on your website.

Overriding CSS variables

Qonfi uses many CSS variables that you can use to easily change the global styling. To see which variables are available, select the element in the inspector and check out the :host selector under "Styles" in your developer console.

For example, to change global border colors and primary button background color, we can simply add a css file with:

:host {
    --primary-button-background-color: #F7A415;
    --border-color: #D3CDD8;
}

Overriding CSS classes

You can also override specific CSS classes. For example, if you specifically want to change the single/multi-select card title colors, you can add the following to your css file:

.qw-single-multi-select-option-title {
    color: green;
}