How to Add Custom CSS to Your Secure Privacy Cookie Banner: Inner Banner & Outer Wrapper Styling Guide

Who Is This Guide For?

• Website administrators and designers customizing the visual appearance of their Secure Privacy cookie banner
• Developers applying CSS to fine-tune banner styles beyond the visual editor's options
• Marketers and compliance managers maintaining brand consistency across their consent UI

How to Apply Custom CSS to Your Secure Privacy Cookie Banner

1. Styling Elements Inside the Banner (iframe CSS)

• In your Secure Privacy dashboard, navigate to Design > Cookie Banner. You will find a Custom CSS input field located directly below the banner preview on the design page.

• CSS entered here is applied within the banner's iframe. This means it can target and style inner banner elements such as padding, text colors, typography, and button styles — but it is scoped to the banner only and will not affect the rest of your website.

2. Styling the Banner Outer Wrapper Container

• To style the banner's outer container—such as its position, box shadow, margin, or z-index—wrap your CSS rules between the following special comment tags in the same Custom CSS field:

/*SP-OUTER-START*/

/* Your CSS code for the outer wrapper goes here */

/*SP-OUTER-END*/

• CSS placed between these tags is injected directly into your website's HTML, outside the iframe, and targets the banner's outer container element. This makes it suitable for layout-level properties like positioning and shadows.

Important: Risks of Outer Wrapper CSS

Common Issues & Fixes: Custom CSS on Cookie Banners

• CSS changes inside the banner aren't affecting the outer wrapper?
  Inner banner CSS applies only within the iframe and cannot reach the outer container. To style the outer wrapper, use the /*SP-OUTER-START*/ ... /*SP-OUTER-END*/ syntax as described above.

• Outer wrapper styles are affecting other parts of your website?
  Your CSS selectors are likely too broad. Scope them as specifically as possible to the banner's outer container class. Always test on a staging site before pushing to production to catch unintended side effects.

• Concerned about the risks of injecting CSS into page HTML?
  Yes — outer wrapper CSS is injected directly into your site's HTML, so careless or generic styles can override other page elements. Use highly specific selectors, avoid global resets, and review changes in DevTools before publishing.

Frequently Asked Questions (FAQ)

What is the difference between inner banner CSS and outer wrapper CSS in Secure Privacy?

Inner banner CSS is scoped inside the banner's iframe and can only affect elements within the banner itself—such as buttons, text, and padding. Outer wrapper CSS, placed between /*SP-OUTER-START*/ and /*SP-OUTER-END*/, is injected into the page HTML and controls the outer container's layout properties like position, margin, and shadow.

Can inner banner CSS affect my website's other elements?

No. Because inner banner CSS is applied inside an iframe, it is fully isolated from the rest of your page. Only CSS placed between the /*SP-OUTER-START*/ and /*SP-OUTER-END*/ tags can affect elements outside the banner.

Where exactly do I add custom CSS in Secure Privacy?

Go to Design > Cookie Banner in your Secure Privacy dashboard. The Custom CSS input field is located below the banner preview. Both inner and outer wrapper CSS rules are entered in this same field — the /*SP-OUTER-START*/ tags differentiate which scope applies.

What kinds of styles should I apply to the outer wrapper vs the inner banner?

Use inner banner CSS for typography, colors, padding, and button styles. Use outer wrapper CSS for positioning, margins, box shadows, z-index, and other layout-level properties that control how the banner sits on the page.

Need More Help with Banner CSS Customization?

If you have questions or need assistance with custom CSS for your Secure Privacy cookie banner, contact our support team at [email protected].