Styling The Consent Manager

Customize the appearance of your Consent Manager in the Styles tab. Adjust the banner, widget, drawer, and do not sell modal to match your website's design.

The Styles Tab

The Styles tab allows you to customize certain aspects of your Consent Manager's appearance.

From here, you can customize various aspects of the consent manager, including:

1. The Banner (cookie popup)

2. The Drawer (storage preferences center)

3. The Widget (icon that triggers the drawer)

4. The Do Not Sell (do not sell modal) - optional Premier-only feature [See How to set up the do not sell modal for instructions]

Styles Page

From "Styles" you can choose:

• If the Banner is a box or a banner.

• The positioning of the Banner, Widget, and Drawer.

• The Banner Timeout on/off toggle and timeout duration settings for the Banner that displays on a timer see **[Banner 1 only** [locations].

• The coloration of various aspects of the Banner, Drawer, and the Do Not Sell (via preset theme or using the color selector).

• The Privacy Policy link on/off toggle to display in the Drawer.

• The Banner, Drawer, Widget, and, if applicable, the Do Not Sell buttons to view a preview of the various components of the consent manager based on your selected settings.

• The Template dropdown allows you to preview how your cookie banner and storage preferences will look for different regions. Selecting a template is for viewing purposes only and does not affect which banner is served to users. (Note: Osano automatically detects a user’s location and displays the banner template that best aligns with local privacy requirements.)

• You can use the Locale dropdown to see how the language will display on the cookie banner and storage preferences for end-users. (Note: The end-user's browser preferences will determine the language displayed.)

• The URL field is used to generate an image from the specified URL, providing a more realistic view of how your cookie banner and storage preferences will appear.

• Use the Clear URL button to reset the generated URL image, and then use the Load URL button to create a new URL image.

• The Full Screen or Expand button allows you to view your style choices in a full-screen mode. This will enable you to get a better idea of how the dialog and drawer will look in real-time, providing a clear indication of the scale and potential user experience.

Publishing your Configuration Changes

Once you are ready to publish your customizations to your configuration, select Save Changes and then Publish.

Important Note: Browser caching may delay these changes for returning visitors for about 24 hours. If you would like to see these changes immediately, you can do so in a private or incognito window.

See [Changes in Osano Cookie Consent Manager Not Reflected on Website if having trouble viewing your changes].

Advanced CSS Customizations

If you would like to make specific customizations to your consent manager overlay, you can do so using CSS.

All advanced CSS customization must be done outside of the Osano application, directly within your site's HTML or an installed stylesheet. For additional details, you can refer to our comprehensive list of Osano Classes or view our prewritten Common CSS Changes.