# Customize a Banner Safely

Use the banner style settings to change colors, typography, position and animation. These changes are saved as a draft. Preview the draft on the intended page, then publish when you are ready.

## Match your website

Use readable text and button colors, with at least 4.5:1 contrast for normal text. Keep accept, reject and preferences controls easy to find. Check the preferences dialog and its toggles as well as the initial banner.

“Inherit from site” uses the website's font, so choose it to match a brand font your website already loads. The other options are web-safe font stacks. Consent Pro does not download fonts or install stylesheets.

## Preserve consent behavior

On Webflow sites with custom banner components, keep the existing `fs-consent-*` attributes and their values on the elements they describe. See the [HTML attributes reference](/runtime/attributes) before changing the component structure. Preserve the banner and preferences containers, form controls, category toggles, action buttons, and the control that reopens preferences after a choice.

Change classes, spacing and visual styles without replacing consent buttons with decorative elements. Keep controls keyboard accessible, retain visible focus, and do not hide essential actions behind hover. Preserve labels and accessible names. Avoid CSS that overrides the runtime's visibility behavior or permanently hides the preferences dialog.

Changing the banner style does not change regions, page targeting, tracker categories, script loading or Google Consent Mode. Review those settings separately when needed.

## Preview and verify

1. Preview the saved draft on the intended page. A preview link does not prove that targeting or installation is correct on the published site.
2. Check narrow and wide screens, keyboard navigation, text readability and long translations.
3. Exercise rejection, partial acceptance, full acceptance and reopening preferences to withdraw consent. Verify subsequent requests and persistence after reload; appearance alone cannot establish blocking.
4. Publish only the reviewed changes. Browser caching and already-open pages can delay delivery.
5. Verify the ordinary published page without preview overrides. Record anything that could not be tested, including regional delivery and business-event triggers.

For installation and enforcement details, see [Script Loading](/runtime/script-loading), [Automatic Blocking](/runtime/automatic-blocking) and [Events](/runtime/events).