The Color and Style screen allows you to customize the appearance of the Axeptio consent widget. Changes are saved automatically and applied at the next publication.
At the top of the screen, a selector lets you switch between Classic Design and New Design, and preview each version independently.
Button Style
Use a custom button
By default, the yellow Axeptio button is displayed. By enabling this option, you can replace it with a button with custom visuals and/or text. You can also customize the size and appearance of the button, visual, and text.
Option | Description |
Image size | Width of the image displayed in the button (in px). |
Label | Text displayed in the button. |
Button height (Padding Y) | Internal vertical spacing of the button (in px). |
Button width (Padding X) | Internal horizontal spacing of the button (in px). |
Font size | Size of the button text (in px). |
Font weight | Font thickness (e.g.: 400 = normal, 700 = bold). |
Line height | Line height, unitless (e.g.: 1.25). |
Border radius | Rounding of button corners (in px). A high value gives a pill-shaped button. |
Text color | Color of the button text. |
Background color | Background color of the button. |
Use transparent background | Makes the button background transparent. |
Add drop shadow | Adds a drop shadow under the button. |
Widget position
By default, the banner is displayed at the bottom left. But you can move it to the right if you prefer.
Button horizontal offset (offset X)
You can shift the button left or right. Useful to prevent the button from overlapping other elements of your interface.
Button vertical offset (offset Y)
You can shift the button up or down. Useful to prevent the button from overlapping other elements of your interface.
Browser scroll hijacking on mobile
By default, Axeptio controls the page scroll when the widget is displayed, to keep it visible and avoid annoying display effects.
Most of the time, this is convenient and we therefore recommend leaving this option disabled if you do not encounter any particular problems. But on some sites, this can be inconvenient. You can try enabling this option if you observe the following typical undesired behaviors:
inability to scroll the page, especially on mobile, where scrolling can be blocked while the banner is displayed
behavior with site elements such as menus, pop-ins or modals
When this option is enabled, Axeptio no longer controls page scrolling and lets the browser manage scroll normally.
Widget root position in the body
Defines where in the HTML code of the page Axeptio inserts the widget: at the beginning or at the end of the <body> tag.
By default, the widget is inserted at the end of the <body>. This positioning is recommended in most cases.
However, it is possible to insert the widget at the beginning of the <body> if you encounter compatibility issues with the site structure, certain global CSS styles or JavaScript scripts. This option is mainly intended for specific cases and generally has no visible impact for users.
Overlay
The overlay is a semi-transparent background displayed behind the Axeptio widget when it is open. It highlights the consent banner and reduces distractions related to page content.
The parameters available in this section allow only to customize the appearance of the overlay (opacity, colors, style). Entering these values does not by itself activate the overlay display.
For the overlay to be displayed, one of the following features must be enabled:
the contextual consent wall, which can be added from an existing configuration
the Display the widget in the center of the screen (like the consent wall) option, available in a configuration via Embed on your site
The overlay colors (gradient or solid color) can be customized further down the page, in Colors > Overlay.
Overlay background opacity
Defines the transparency level of the background displayed behind the widget.
The expected value is a decimal value between 0 and 1, where:
0 corresponds to a completely transparent background
1 corresponds to a completely opaque background
Overlay fill style
Lets you choose the type of background used:
Radial: a gradient centered around the widget, with a softer and more progressive effect
Solid color: a uniform background across the entire page
Colors
The Colors section allows you to customize all colors used by the Axeptio widget.
Paint blob
The paint blob is the colored circular graphic element visible in the background of widget illustrations. By modifying it, you automatically generate a coherent color palette for the entire widget. Each color can then be adjusted individually.
Base colors
These settings allow you to define the colors used for general widget elements:
Option | Description |
Primary | Dominant theme color, used for accents and interactive elements. |
Texts | Color of standard text. |
Titles | Color of titles. |
Widget background | Main background of the widget. |
Card background | Background of cards and internal blocks. |
Unselected checkbox background color | Color of toggles in OFF position. |
Selected checkbox background color | Color of toggles in ON position. |
Base buttons
These options define the appearance of secondary buttons (e.g.: "Reject All", "Customize"):
Option | Description |
Button text | Text color. |
Button text on hover | Text color on hover. |
Button border | Border color. |
Button background | Background color. |
Button background on hover | Background color on hover. |
Primary button
These settings apply specifically to the primary action button (e.g.: "Accept All"). They allow you to highlight the main action offered to the user.
Option | Description |
Primary button text | Text color. |
Primary button text on hover | Text color on hover. |
Primary button background | Background color. |
Primary button background on hover | Background color on hover. |
Consent button
These options control the appearance of consent buttons displayed in the vendors list. They allow you to precisely adjust the appearance of consent and rejection actions.
Option | Description |
Consent buttons background | Background color. |
Consent buttons background on hover | Background color on hover. |
Consent buttons text | Text color. |
Consent buttons text on hover | Text color on hover. |
Consent buttons outline | Border color. |
Consent buttons outline on hover | Border color on hover. |
Overlay
These settings define the colors used for the background displayed behind the widget, when the fill style is set to Radial:
Option | Description |
Overlay gradient center | Color of the gradient center. |
Overlay gradient outside | Color of the gradient outside. |
Widget style
Border Radius (rounded corners)
Defines the rounding level applied to the widget corners, expressed in pixels.
A high value produces more rounded corners, while a low value gives a more angular appearance.
Border radius of consent buttons
Controls the rounding of consent buttons displayed in the widget.
This setting allows you to harmonize the appearance of buttons with the overall style of the site.
Rounded corners of the close button
Defines the rounding of the button that allows you to close the widget.
This parameter is independent of other border radius settings.
Title size
Defines the size of titles displayed in the widget, expressed in pixels.
This setting has a direct impact on visual hierarchy and content readability.
Body size
Defines the size of the main widget text, expressed in pixels.
A size that is too small can affect readability, especially on mobile.
Drop shadow
Allows you to define the shadow style applied to the widget. The shadow helps visually detach the widget from page content and enhance its visibility.
Default shadow: standard shadow applied by Axeptio
None: no shadow
Custom: free entry of a CSS
box-shadowvalue
Typography
The Typography section allows you to define the fonts used in the Axeptio widget, for titles and for text.
These settings allow you to align the widget's appearance with the site's typography.
Title font
Allows you to define the font used for titles displayed in the widget.
You can choose a Google font or another font by entering its name directly (font-family).
If the chosen font is not already loaded on the page, the Let Axeptio load the font on the site option allows Axeptio to load it automatically.
Text font
Allows you to define the font used for widget text, independently of the title font. Like titles, you can use a Google font or a custom font via its name.
If the font is not already available on the site, Axeptio can load it automatically via Google Fonts by enabling the corresponding option.
Loading additional fonts can impact site performance and compliance and should be used carefully.