Complianz Privacy Suite

CSS Lesson #9 Changing the Dismiss button to a Close button

Aert Hulsebos

Aert Hulsebos

Categories

Popular articles

Records of Consent

Table of Contents Records of Consent is available in premium, from 4.9.2 onwards In the free plugin and our premium plugin below version 4.9.2 we

Read More

Integrations for WooCommerce

In this article, we will explain the many integrations available for your WooCommerce shop. We will look at specific questions in our wizard and configuring

Read More
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

At the request of some of our users; is it possible to remove the dismiss button and just add a (x) button to the cookie banner? The answer is yes, and this is an example of how it will look like and how to implement it with some custom CSS.

And this is how it’s done

Removing the dismiss is not necessary, we will use it to create the (x) button. If you know your way around CSS, please refer to our integration here: https://github.com/Really-Simple-Plugins/complianz-integrations/blob/master/close-x-in-banner.php

  1. We will use the dismiss/functional only button to create the (x). The only thing you need to do is enter “x” instead of “dismiss” or any other description.
  2. Now we have to remove the (x) to the right-top corner. For this, you can use the below CSS, and add it to “Appearance – Customize – Additional CSS”.
  3. Now you have a blank space where the dismiss button used to be, the CSS below will also take care of this. Be aware this is based on the Accept All + View Preferences template. Adjustments for other templates might be needed.
  4. And now you’re done, the (x) will still function as a dismiss button.

Custom CSS

/* moving the dismiss button */
#cc-window .cc-compliance .cc-btn.cc-dismiss {
            position: absolute;
            top: -15px;
            right: 15px;
            text-align: right;
            margin-right: 20px;
            background-color: initial !important;
            border: 0;
            text-decoration: none;
        }
/* filling the gap */
#cc-window .cc-save {
	width:100%!important;
}

Recent articles

Subscribe