Customise Widget Styling

Widgets in DataGuard CPM are highly customisable and can be styled using CSS to match your organisation’s branding and design guidelines. Whether you're working with the Sign Up, Manage, or History widgets, applying custom styles allows you to create a seamless user experience that aligns with your brand identity.

Styling Options

CSS Styling: Both the Sign Up and Manage Widgets share the same HTML structure and CSS classes, making it easy to apply consistent styles across these widgets. The History Widget, however, has a different structure, so styling it will require separate CSS rules.
Branding Styling: If your organisation needs to match your brand but lacks the technical skills to do so with CSS, you can apply branding using the built-in options provided by DataGuard CPM. For more details on how to apply branding without CSS, see the Branding documentation page.

How to Style the Widgets

Inspecting HTML and CSS Classes

After rendering a widget on your page, you can use your browser’s developer tools to inspect the HTML structure and CSS classes:

Inspect the Widget: Right-click on the widget and select "Inspect" from the context menu. This opens the browser's inspector tool, allowing you to view the HTML elements and the CSS classes applied to them.
Identify Classes: Use the inspector to identify the specific CSS classes you want to target for styling.

Using the Default Style Sheet

For the Sign Up and Manage Widgets, you can refer to the default style sheet provided by DataGuard CPM. This style sheet lists many of the available classes that can be styled:

Default Style Sheet: https://scripts.consentric.io/capture-point.css

Reviewing this style sheet can give you a good starting point for understanding how the widgets are structured and which classes are available for customization.

Removing Default Styling

If you prefer to style the widget entirely from scratch, you can disable the default styling:

display.applyDefaultStyle Property: Set this property to false in your widget configuration to remove the default styles. This gives you full control over the appearance of the widget, allowing you to apply your own CSS without any pre-existing styles interfering.

Summary

Customising the styling of widgets in DataGuard CPM provides you with the flexibility to create a user interface that aligns perfectly with your brand. Whether you choose to build on the default styles or create a custom design from the ground up, the tools and options provided make it easy to achieve the look and feel you desire. If you're not comfortable with CSS, the branding features offer an alternative way to ensure your widgets match your brand.