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/GDPR Cookie Consent/Alter the Color of the Toggle Button on the Popup

Alter the Color of the Toggle Button on the Popup

The GDPR Cookie Consent Plugin gives the users granular control over the cookies that they want to allow. This is made possible with a popup that appears when clicked on the Settings button. From this popup, the users can enable or disable the cookies based on their categories using a toggle button.

The toggle buttons by default have teal color. The following code snippet allows you to add the color of the toggle button on the Settings popup from the default color. Simply add the following code snippet to the style.css file of the active theme and replace the hex code of the property background-color with the hex code of the custom color.

.cli-switch input:checked + .cli-slider{
   background-color:#f78f00;  
}
  • Was this article helpful ?
  • YesNo

This article posted in Change Toggle button color, Code Snippet, Customize Settings Pop up, Documentation, GDPR Cookie Consent

Written by

Safwana

Safwana is a technical content writer for WebToffee. She loves working in WordPress and writing about it.

Comments (12)

  1. Patrick Vanhoucke

    Patrick Vanhoucke

    June 27, 2020

    Why don’t you make these toggle buttons interactively modifiable? That would be so much easier than having to make changes to the style sheet of your theme. Other settings of the plug-in can be changed interactively. So why not these?

    Reply
    • Mark

      Mark

      July 8, 2020

      We will be improving it in coming updates.

      Reply
  2. Maxwell Hogan

    Max

    June 26, 2020

    What is the CSS code for changing the color the buttons when a user clicks on the “Do Not Sell Information” link and the Do You Really Wish To Opt Out screen appears?

    Reply
  3. Amele Ennaifer

    Amele Ennaifer

    June 8, 2020

    Hello ! I have added the [cookie_popup_content] in a page in my website footer. After I checked my cookies preference, I click on the save and accept button but nothing happens. How can I add text when the save and accept button is clicked or have the page refreshed so people know that i has been taken into account ? Thanks a lot !
    Amele

    Reply
    • Mark

      Mark

      June 18, 2020

      Please share the site URL.

      Reply

  4. Anuar

    April 1, 2020

    Hi
    On Chrome DevTools under accessibilty section stated “Background and foreground colors do not have a sufficient contrast ratio.”
    a.cli_settings_button

    How to solve the issue?

    Anuar

    Reply
    • Mark

      Mark

      April 8, 2020

      Please create a ticket here.

      Reply

  5. Jadiel

    March 1, 2020

    Hi,
    What about changing the text of this shortcode [user_consent_state] to “Update Privacy & Cookies Policy” to add on my footer?

    Thanks.

    Reply
    • Mark

      Mark

      March 3, 2020

      Hi Jadiel,

      Please add below code snippet to your active theme’s function.php
      function wt_cli_cookie_manage_custom( $atts )
      {
      $atts = shortcode_atts( array(
      'title' => 'Manage consent',
      'style' => ''
      ), $atts );
      return "" . __( esc_html( $atts['title'], 'cookie-law-info') ) . "";
      }
      add_shortcode( 'wt_cli_manage_consent', 'wt_cli_cookie_manage_custom' );

      Then you can use below short code.
      [wt_cli_manage_consent title=”Manage your consent”]

      Reply
  6. Maxwell Hogan

    Maxwell Hogan

    January 2, 2020

    What about changing the color on the “Save and Accept” button?

    Reply
    • Mark

      Mark

      January 2, 2020

      Please use below CSS code to change the color. Copy the code to theme’s CSS and alter the color code according to requirement.

      #cliSettingsPopup .cli-tab-footer .cli-btn {
      background-color: #2196f3;
      }

      Reply
      • Maxwell Hogan

        Maxwell Hogan

        January 2, 2020

        Thank you!

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *