Array ( [0] => GDPR Cookie Consent [1] => CCPA [2] => Getting Started [3] => Changelog [4] => GDPR [5] => Add and Categorise Cookies [8] => Auto-block cookies with Script Blocker [13] => Create Privacy Policy Page [15] => Customize Cookie Notice [18] => Customize Settings Pop up [19] => Change Toggle button color [21] => Display Cookie List [22] => FAQ [23] => Getting Started [24] => Multilingual Support [25] => Overview [26] => Import Export Suite for WooCommerce [28] => Order / Coupon / Subscription Export Import Plugin for WooCommerce [29] => PayPal Express Checkout Payment Gateway for WooCommerce [30] => Changelog [31] => Getting Started [32] => Issue Refund [34] => Video Tutorial [35] => Print Invoice, Packing Slip, Delivery Note & Label for WooCommerce [36] => Address Label [39] => Changelog [41] => Credit Note [43] => Delivery Note [45] => Dispatch Label [47] => FAQ [48] => Invoice [49] => Adding meta data [50] => Customizations [51] => Email PDF Invoice [52] => FAQ [53] => Getting Started [54] => Invoice Number [55] => Multilingual Support [56] => Overview [57] => Packing Slip [58] => Customizations [59] => Getting Started [60] => Pick List [62] => Proforma Invoice [65] => Shipping Label [68] => Product Import Export Plugin for WooCommerce [69] => Smart Coupons for WooCommerce [70] => Abandoned Cart Discount [71] => Advanced Coupon Options [72] => Bulk Generate [73] => Changelog [76] => Getting Started [78] => Import Coupon [80] => Sales Countdown Timer [81] => SignUp Coupon [82] => Store Credit [84] => Volume/Quantity based coupon [85] => Stripe Payment Gateway for WooCommerce [86] => Alipay [87] => Apple Pay [88] => Changelog [89] => Compatibility with Subscription [90] => Getting Started [93] => SCA Ready [94] => Stripe Checkout [95] => Stripe Overview [96] => Stripe via Credit Card [97] => Troubleshoot [98] => Video Tutorial [99] => Subscriptions for WooCommerce [100] => Changelog [101] => Email Notifications [102] => FAQ [103] => Getting Started [104] => Manually Add or Modify Subscriptions [105] => Subscriptions Payment Gateway Guide [106] => URL Coupons for WooCommerce [107] => Changelog [108] => FAQ [109] => Getting Started [110] => Import URL Coupons [111] => QR Code Coupon [112] => WordPress Users & WooCommerce Customers Import Export )

Documentation/Customized CSS code snippets for GDPR cookie theme templates

Customized CSS code snippets for GDPR cookie theme templates

GDPR Cookie Consent plugin is equipped with several pre-defined templates for customizing the cookie notice bar to match the look and feel of your website. These customization features are incorporated in the Cookie law Settings > Themes tab of the plugin. Besides, there are provisions to select pre-defined templates for cookie bar with each type banner, widget or popup. 

Refer Customize Cookie Notice bar with pre-defined templates to know more about it.

Despite having options to modify the pre-defined templates, the cookie notification bar can be customized by inserting/editing CSS style codes in the CSS field of the properties dialog box.

Themes-CSS

Following are a few examples of how you can customize the CSS code snippet from the Design editor to enhance the look and feel of the cookie notification bar.

  1. Inserting Logo on top of the Cookie Notification bar: Popup (theme 1)
    .cli_style {
        background: #fff url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png') no-repeat center 20px;
        border:solid 0px #dbdbdb;
        color:#08402c;
        padding:45px;
        padding-top:70px;
        box-sizing: border-box;
        width:500px;
        text-align:center;
        display:inline-block;
        font-size:14px;
        line-height:26px;
        letter-spacing:normal;
    }
    

  2. Square close button: Popup (theme 3)
    .cli_style {
        display: inline-block;
        background:none;
        border-radius:0px;
        border:solid 1px #ccc;
        color: #ccc;
        text-align: center;
        font-size: 12px;
        width:22px;
        height: 22px;
        line-height: 22px;
        margin-right:-25px;
        margin-top:-25px;
        float: right;
        right:0px;
        cursor:pointer;
    }


  3. Color filled closed button: Popup (theme 3)
    .cli_style { 
        display: inline-block;
        background: rgb(0, 0, 0) repeat scroll 0% 0%;
        border-radius: 20px;
        border: 0px solid rgb(204, 204, 204);
        color: rgb(255, 255, 255);
        text-align:center;
        font-size: 12px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin-right: -25px;
        margin-top: -25px;
        float: right;
        right: 0px;
        cursor: pointer;
        font-weight:bold;
    }
    


  4. Button shadow: Popup (theme 1)
    .cli_style {
        display: inline-block;
        background:#babfbe;
        border-radius:0px;
        color:#fff;
        text-align: center;
        font-size:14px;
        padding:5px 14px;
        margin-left:10px;
        margin-top:15px;
        border:solid 0px #fff;
        text-transform:uppercase;
        line-height:26px;
        box-shadow:2px 2px 5px #333;
    }
    


  5. Image background on the button: Widget (theme 3)
    .cli_style {
        display:inline-block;
        box-sizing:border-box;
        width:48%;
        padding:8px 10px;
        color:#010101;
        background:url('https://i.ibb.co/g6ndsF1/tick.png') no-repeat 20px 10px #f3da00;
        text-align:center;
        border-radius:6px;
        font-size:18px;
        border:solid 0px #fff;
        line-height:28px;
        font-size:18px;
        margin-top:20px;
        font-weight:600;
    }
    


  • Was this article helpful ?
  • YesNo