Custom CSS usage¶

To offer the utmost degree of customization, V3 allows direct addressing of all elements within the Consent Management Platform (CMP) using custom CSS.

Applying CSS changes¶

To enable the utilization of custom CSS, it is necessary to input your CSS code into the 'Custom CSS' field. This field is accessible within the Usercentrics Admin Interface under the 'Appearance' -> 'Styling' section. It is noteworthy that a key distinction between V2 and V3 lies in their handling of custom CSS. In V2, styling was limited to a predefined set of classes, while in V3, custom CSS is not parsed in any way, but is directly embedded within a <style> tag in the Shadow DOM housing the CMP.

Entry points¶

To enhance the usability of custom CSS, user-friendly selectors have been introduced for the most frequently requested elements that can be modified within the CMP. Presented below is a list of these selectors.

CMP¶

Service modal¶

When a service (or a subservice) is opened in a standalone view, a modal is generated for this specific purpose. Multiple modals can be open at the same time and they share their internal structure with the expandable cards within the CMP. As a result, .uc-details-[..] namespaced selectors such as .uc-details-title and .uc-details-description are also applicable within this context. The modal-specfic entry points are:

Conditional styling¶

The selector #uc-main-dialog designates the primary container within the CMP.

Illustration

This container may have additional classes that allow for the targeting of elements on specific CMP layers or under specific device and configuration conditions. To apply CSS targeting based on devices or layers, these classes can be concatenated with the selector for the main container. The following classes represent various device-related criteria, layer distinctions, language direction, and framework indicators available for customization on the main dialog container.

Devices¶

Layers¶

Language direction¶

Framework indicator¶

Examples (CMP)¶

#uc-main-dialog.mobile.second {
    /* Custom CSS styles for the cmp container on the second layer on mobile devices */
    /* Add your styles here */
}

If you intend to direct your styling towards a specific element within the CMP on a particular device, you can utilize the device modifier by attaching it to the main container as the root targeting element.

#uc-main-dialog.tablet .uc-expandable-card {
    /* Custom CSS styles for expandable cards on tablet */
    /* Add your styles here */
}

Service modal¶

The selector .uc-modal-overlay designates every primary modal wrapper.

Illustration

The service modal elements exist as standalone components outside the primary CMP container. As a result, the device-related classes are also present on the modal wrappers.

Examples (Modal)¶

.uc-modal-wrapper.desktop .uc-details-title {
    /* Custom CSS styles for modal service section titles on desktop */
    /* Add your styles here */
}

.uc-modal-footer button {
    /* Custom CSS styles for the modal footer button */
    /* Add your styles here */
}

Visual guide¶

CMP First Layer¶

Illustration

CMP Second Layer¶

Illustration (1 / 2)

Illustration (2 / 2)

Service Modal¶

Illustration