Custom Styling
Relevant source files
The following files were used as context for generating this wiki page:The consent-manager library provides a default, ready-to-use user interface for managing consent preferences through the GrantsInterface module. This interface, which includes a consent banner and a detailed preferences modal, is styled via a provided SCSS stylesheet. This allows for a consistent look and feel out-of-the-box.
Developers have the flexibility to either use the default compiled CSS, customize the provided SCSS file to match their project's design system, or create their own styles from scratch by targeting the specific CSS classes applied to the UI's DOM elements. This document outlines the structure of the UI components, the CSS classes available for targeting, and the build process for the stylesheets.
Sources: src/modules/GrantsInterface.ts, src/styles.scss, README.md:105-112
Styling Architecture
The styling architecture is straightforward: the GrantsInterface class programmatically creates HTML elements for the banner and modal and assigns specific CSS classes to them. The src/styles.scss file contains style rules that target these classes to define the appearance and layout of the UI.
The following diagram illustrates the relationship between the TypeScript module that creates the DOM and the SCSS file that styles it.
This diagram shows that GrantsInterface.ts generates the HTML structure, which is then styled by the CSS compiled from styles.scss.
Sources: src/modules/GrantsInterface.ts, src/styles.scss
UI Components and Selectors
The GrantsInterface generates several distinct UI components, each with its own set of elements and corresponding CSS classes. These classes serve as stable hooks for custom styling.
Sources: src/modules/GrantsInterface.ts:58-271, src/styles.scss
Consent Banner
The consent banner is displayed when a user has not yet customized their preferences. It is a fixed-position element at the bottom of the screen.
The DOM structure for the banner is created within the showBanner method.
This diagram depicts the HTML element hierarchy of the consent banner.
The following table lists the key CSS selectors for styling the banner.
| Selector | Description | Source File(s) |
|---|---|---|
.consent-manager--banner-wrapper | The main container for the entire banner. Styled as a fixed-position box. | src/styles.scss:1-11, src/modules/GrantsInterface.ts:108 |
.consent-manager--banner-info | A flex container for the informational text content. | src/styles.scss:13-17, src/modules/GrantsInterface.ts:71 |
.consent-manager--banner-actions | A container for the action buttons (Accept, Reject, More). | src/styles.scss:19-21, src/modules/GrantsInterface.ts:105 |
.consent-manager--banner-accept | The "Accept All" button. Has a default border style. | src/styles.scss:23-37, 39-41, src/modules/GrantsInterface.ts:75 |
.consent-manager--banner-reject | The "Only required" button. | src/styles.scss:23-37, src/modules/GrantsInterface.ts:83 |
.consent-manager--banner-more | The "More options" button, which opens the preferences modal. | src/styles.scss:23-37, src/modules/GrantsInterface.ts:91 |
Preferences Modal
The preferences modal allows for detailed customization of consent grants. It appears as a centered overlay on the page.
The DOM structure for the modal is created within the showModal method.
This diagram shows the HTML element hierarchy of the preferences modal.
The following table lists the key CSS selectors for styling the modal.
| Selector | Description | Source File(s) |
|---|---|---|
.consent-manager--modal-backdrop | The full-screen semi-transparent overlay that contains the modal. | src/styles.scss:61-70, src/modules/GrantsInterface.ts:262 |
.consent-manager--modal-container | The main modal dialog box. | src/styles.scss:72-80, src/modules/GrantsInterface.ts:259 |
.consent-manager--modal-header | The header section containing the title and close button. | src/styles.scss:82-87, src/modules/GrantsInterface.ts:221 |
.consent-manager--modal-title | The <h2> title of the modal. | src/styles.scss:89-92, src/modules/GrantsInterface.ts:211 |
.consent-manager--modal-close | The '×' button to close the modal. | src/styles.scss:94-97, src/modules/GrantsInterface.ts:215 |
.consent-manager--modal-actions | The footer section containing the "Accept All" and "Only required" buttons. | src/styles.scss:99-101, src/modules/GrantsInterface.ts:255 |
.consent-manager--modal-accept | The "Accept All" button in the modal footer. | src/styles.scss:103-115, src/modules/GrantsInterface.ts:243 |
.consent-manager--modal-reject | The "Only required" button in the modal footer. | src/styles.scss:103-115, src/modules/GrantsInterface.ts:250 |
Consent Table
The consent table is generated by the generateConsentTable method and is used inside the preferences modal to list the available consent categories.
Sources: src/modules/GrantsInterface.ts:131-204
The following table lists the key CSS selectors for styling the consent table.
| Selector | Description | Source File(s) |
|---|---|---|
.consent-manager--table | The <table> element containing the consent categories. | src/modules/GrantsInterface.ts:133 |
.consent-manager--row | A <tr> element for a single category row. | src/modules/GrantsInterface.ts:139 |
.consent-manager--table-toggle-col | The <td> containing the checkbox toggle. | src/modules/GrantsInterface.ts:147 |
.consent-manager--table-toggle | The <input type="checkbox"> for enabling/disabling a category. | src/styles.scss:43-46, src/modules/GrantsInterface.ts:148 |
.consent-manager--table-label-col | The <td> containing the category label and description. | src/modules/GrantsInterface.ts:151 |
.consent-manager--table-label | The <span> for the category's main label (e.g., "Analytics Cookies"). | src/styles.scss:48-54, src/modules/GrantsInterface.ts:153 |
.consent-manager--table-description | The <sub> element for the category's description text. | src/styles.scss:48-51, src/modules/GrantsInterface.ts:154 |
Build Process and Usage
The project uses Sass to compile the src/styles.scss file into standard CSS. The build process is defined in the scripts section of package.json.
Sources: package.json:30-35
Two build scripts are provided for styles:
build:styles: Compilessrc/styles.scssinto an uncompresseddist/consent-manager.css.build:styles-min: Compilessrc/styles.scssinto a compresseddist/consent-manager.min.css.
"scripts": {
"build:styles": "sass src/styles.scss:dist/consent-manager.css",
"build:styles-min": "sass src/styles.scss:dist/consent-manager.min.css --style compressed",
}
Sources: package.json:33-34
To use the default styles, you can include the compiled CSS file in your HTML document's <head> section, either from a local build or a CDN.
<!-- From a public CDN -->
<link rel="stylesheet" href="https://unpkg.com/consent-manager@1/dist/consent-manager.min.css">
Sources: README.md:111-112
Summary
Customizing the appearance of the consent-manager UI is achieved by overriding the default styles provided in styles.scss. Developers can leverage the well-defined CSS class structure applied by the GrantsInterface module to create a theme that aligns with their application's branding. By understanding the DOM structure of the banner and modal, and the available CSS selectors, full control over the UI's presentation is possible.