Custom CSS usage¶

Applying CSS changes¶

To enable custom CSS, follow these steps:

1. Open the Usercentrics Admin Interface
2. Navigate to Appearance - Styling.
3. Add your CSS code into the 'Custom CSS' field.

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¶

CMP¶

The following selectors can be modified within the CMP:

Service modal¶

When a service or 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¶

GPC message¶

The GPC message appears when the banner recognizes a GPC signal.

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 */
}

To direct your styling towards a specific element within the CMP on a particular device, you can use 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