{"id":4025,"date":"2026-04-14T22:37:05","date_gmt":"2026-04-15T05:37:05","guid":{"rendered":"https:\/\/clone.surecookie.com\/?post_type=docs&p=4025"},"modified":"2026-04-17T05:48:22","modified_gmt":"2026-04-17T12:48:22","slug":"custom-css-for-banner-styling","status":"publish","type":"docs","link":"https:\/\/clone.surecookie.com\/de\/docs\/custom-css-for-banner-styling\/","title":{"rendered":"Custom CSS for Banner Styling"},"content":{"rendered":"

For advanced users who need complete control over the banner’s appearance, use the Custom CSS<\/strong> section to write your own CSS rules. Changes will be reflected in both the preview and frontend after saving.<\/p>\n\n\n\n

How to Add Custom CSS<\/strong><\/h2>\n\n\n\n

1. Scroll to the Custom CSS<\/strong> section at the bottom of the Banner settings.<\/p>\n\n\n\n

\"image\"<\/figure>\n\n\n\n

2. Click in the CSS Code Editor<\/strong> and write your CSS rules.<\/p>\n\n\n\n

\"image\"<\/figure>\n\n\n\n

3. Click the green Save Changes<\/strong> button to apply your changes.<\/p>\n\n\n\n

\"image\"<\/figure>\n\n\n\n

4.     Your CSS is saved and will persist after page refresh.<\/p>\n\n\n\n

Reset Custom CSS Button<\/h2>\n\n\n\n

Click this button to clear any custom CSS code you’ve added to the plugin and return to the default styling. This is helpful if your custom CSS is causing design issues, conflicts, or unwanted changes to your site’s appearance. Your other plugin settings will stay the same. Make sure to save any CSS you want to keep before clicking, as this action cannot be undone right away.<\/p>\n\n\n\n

\"image\"<\/figure>\n\n\n\n

Using Custom CSS Effectively<\/strong><\/h2>\n\n\n\n

Write your custom CSS below. Use the !important<\/strong> flag to override inline styles if needed.<\/p>\n\n\n\n

You can target banner elements using classes like:<\/p>\n\n\n\n

    \n
  • .surecookie-public-banner<\/strong>: This is the parent class of Surecookie Banner. Apply this class to your banner element so all styling cascades to child elements and maintains consistent spacing and appearance.<\/li>\n\n\n\n
  •  .surecookie-banner<\/strong>: Target the cookie banner (works in both preview and frontend)<\/li>\n\n\n\n
  •  .surecookie-accept-btn, .surecookie-decline-btn<\/strong>: Target specific buttons and other element classes as needed<\/li>\n<\/ul>\n\n\n\n

    Quick Tips<\/strong><\/h2>\n\n\n\n

    \u2022   Target the banner:<\/strong> Use .surecookie-banner<\/strong> to style the entire banner container (works in both preview and frontend)<\/p>\n\n\n\n

    \u2022   Target buttons:<\/strong> Use .surecookie-accept-btn<\/strong> and .surecookie-decline-btn<\/strong> for individual button styling<\/p>\n\n\n\n

    \u2022   Override styles:<\/strong> Use !important<\/strong> to override inline styles when needed<\/p>\n\n\n\n

    \u2022   Save changes:<\/strong> Click “Save Changes” to apply your CSS<\/p>\n\n\n\n

    \u2022       Persistent CSS:<\/strong> Your CSS is saved and will persist after page refresh<\/p>\n\n\n\n

    Common CSS Classes<\/strong><\/h2>\n\n\n\n

    SureCookie uses the following CSS classes that you can target with your custom CSS:
    <\/p>\n\n\n\n

    .surecookie-banner<\/strong><\/p>\n\n\n\n

    The main banner container. Target this to style the entire banner appearance, including background color, padding, borders, and shadows.<\/p>\n\n\n\n

    .surecookie-accept-btn<\/strong><\/p>\n\n\n\n

    The “Accept All” button. Use this to customize the button’s color, font size, padding, or hover effects.<\/p>\n\n\n\n

    .surecookie-decline-btn<\/strong><\/p>\n\n\n\n

    The “Decline” button. Use this to style the decline button independently from other buttons.<\/p>\n\n\n\n

    Example<\/strong><\/h2>\n\n\n\n
    .surecookie-banner {\n  background: #1A1F35 !important;\n  border-left: 5px solid #00B8D4 !important;\n  padding: 20px !important;\n}\n\n.surecookie-banner p {\n  color: #E0E0E0 !important;\n}\n\n.surecookie-accept-btn {\n  background: #4ADE80 !important;\n  color: #000 !important;\n  padding: 10px 20px !important;\n  border: none !important;\n  border-radius: 5px !important;\n}\n\n.surecookie-decline-btn {\n  background: #334155 !important;\n  color: #E0E0E0 !important;\n  padding: 10px 20px !important;\n  border: none !important;\n  border-radius: 5px !important;\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Tips and Best Practices<\/strong><\/h2>\n\n\n\n
    \u2022   Always use !important<\/strong> when overriding inline styles. This ensures your custom CSS takes precedence.<\/p>\n\n\n\n
    \u2022   Test your CSS in Preview Mode<\/strong> before applying to your live site.<\/p>\n\n\n\n
    \u2022   Keep your CSS rules simple and focused. Complex selectors may not work reliably.<\/p>\n\n\n\n
    \u2022   Use your browser’s developer tools<\/strong> to inspect the banner HTML and find additional classes you can target.<\/p>\n\n\n\n
    \u2022       If you make changes and they don’t appear, try clearing your browser cache and refreshing the page.<\/p>\n\n\n\n
    Saving Your CSS<\/strong><\/h2>\n\n\n\n
    Once you’ve written your custom CSS, click the green Save Changes<\/strong> button to apply it to your banner. Your CSS is automatically saved and will persist even after you refresh the page or log out.<\/p>","protected":false},"excerpt":{"rendered":"
     […]<\/p>\n","protected":false},"author":39,"featured_media":0,"template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_pfd_related_docs_manual":[],"pfd_doc_title":"","spectra_gs_classes":"[\"\"]","footnotes":""},"docs_category":[34],"docs_tag":[],"class_list":["post-4025","docs","type-docs","status-publish","hentry","docs_category-banner-customization"],"spectra_custom_meta":{"spectra_gs_classes":["[\"\"]"],"surerank_seo_checks":["a:14:{s:14:\"h2_subheadings\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:38:\"Page contains at least one subheading.\";s:4:\"type\";s:4:\"page\";}s:13:\"media_present\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:55:\"This page includes images or videos to enhance content.\";s:4:\"type\";s:4:\"page\";}s:13:\"links_present\";a:3:{s:6:\"status\";s:7:\"warning\";s:7:\"message\";s:27:\"No links found on the page.\";s:4:\"type\";s:4:\"page\";}s:10:\"url_length\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:35:\"Page URL is short and SEO-friendly.\";s:4:\"type\";s:4:\"page\";}s:19:\"search_engine_title\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:55:\"Search engine title is present and under 60 characters.\";s:4:\"type\";s:4:\"page\";}s:25:\"search_engine_description\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:62:\"Search engine description is present and under 160 characters.\";s:4:\"type\";s:4:\"page\";}s:13:\"canonical_url\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:37:\"Canonical tag is present on the page.\";s:4:\"type\";s:4:\"page\";}s:15:\"open_graph_tags\";a:3:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:40:\"Open Graph tags are present on the page.\";s:4:\"type\";s:4:\"page\";}s:16:\"keyword_in_title\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:38:\"No focus keyword set to analyze title.\";s:4:\"type\";s:7:\"keyword\";}s:22:\"keyword_in_description\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:49:\"No focus keyword set to analyze meta description.\";s:4:\"type\";s:7:\"keyword\";}s:14:\"keyword_in_url\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:36:\"No focus keyword set to analyze URL.\";s:4:\"type\";s:7:\"keyword\";}s:18:\"keyword_in_content\";a:3:{s:6:\"status\";s:10:\"suggestion\";s:7:\"message\";s:40:\"No focus keyword set to analyze content.\";s:4:\"type\";s:7:\"keyword\";}s:12:\"broken_links\";a:2:{s:6:\"status\";s:7:\"success\";s:7:\"message\";s:34:\"No broken links found on the page.\";}s:14:\"image_alt_text\";a:5:{s:6:\"status\";s:7:\"success\";s:11:\"description\";a:1:{i:0;s:48:\"Images on the post\/page have alt text attributes\";}s:7:\"message\";s:49:\"All images on this page have alt text attributes.\";s:11:\"show_images\";b:0;s:4:\"type\";s:4:\"page\";}}"],"surerank_seo_checks_last_updated":["1776839100"],"_edit_lock":["1776430104:39"],"_uag_custom_page_level_css":[""],"site-sidebar-layout":["default"],"site-content-layout":[""],"ast-site-content-layout":["default"],"site-content-style":["default"],"site-sidebar-style":["default"],"ast-global-header-display":[""],"ast-banner-title-visibility":[""],"ast-main-header-display":[""],"ast-hfb-above-header-display":[""],"ast-hfb-below-header-display":[""],"ast-hfb-mobile-header-display":[""],"site-post-title":[""],"ast-breadcrumbs-content":[""],"ast-featured-img":[""],"footer-sml-layout":[""],"ast-disable-related-posts":[""],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"header-above-stick-meta":[""],"header-main-stick-meta":[""],"header-below-stick-meta":[""],"astra-migrate-meta-layouts":["set"],"ast-page-background-enabled":["default"],"ast-page-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-4)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:0:\"\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"ast-content-background-meta":["a:3:{s:7:\"desktop\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"tablet\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}s:6:\"mobile\";a:12:{s:16:\"background-color\";s:25:\"var(--ast-global-color-5)\";s:16:\"background-image\";s:0:\"\";s:17:\"background-repeat\";s:6:\"repeat\";s:19:\"background-position\";s:13:\"center center\";s:15:\"background-size\";s:4:\"auto\";s:21:\"background-attachment\";s:6:\"scroll\";s:15:\"background-type\";s:0:\"\";s:16:\"background-media\";s:0:\"\";s:12:\"overlay-type\";s:0:\"\";s:13:\"overlay-color\";s:0:\"\";s:15:\"overlay-opacity\";s:0:\"\";s:16:\"overlay-gradient\";s:0:\"\";}}"],"pfd_doc_title":[""],"footnotes":[""],"_edit_last":["39"],"views":["391"],"helpful":["0"],"unhelpful":["0"],"redirects":["0"],"_uag_page_assets":["a:9:{s:3:\"css\";s:263:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:13:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:10:\"core\/image\";i:3;s:9:\"core\/list\";i:4;s:14:\"core\/list-item\";i:5;s:9:\"core\/code\";i:6;s:11:\"core\/search\";i:7;s:10:\"core\/group\";i:8;s:17:\"core\/latest-posts\";i:9;s:20:\"core\/latest-comments\";i:10;s:13:\"core\/archives\";i:11;s:15:\"core\/categories\";i:12;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1789562864\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-4025.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"namratap","author_link":"https:\/\/clone.surecookie.com\/de\/author\/namratap\/"},"uagb_comment_info":0,"uagb_excerpt":"[…]","_links":{"self":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/4025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/users\/39"}],"version-history":[{"count":3,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/4025\/revisions"}],"predecessor-version":[{"id":4035,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs\/4025\/revisions\/4035"}],"wp:attachment":[{"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/media?parent=4025"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_category?post=4025"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/clone.surecookie.com\/de\/wp-json\/wp\/v2\/docs_tag?post=4025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}