WebToffee Logo
  • Home
  • Plugins
  • Blog
  • Documentation
  • Support
Login
0

  • Overview
    • Plugin set up
  • GDPR
    • Getting Started
      • Get GDPR Compliant
    • Add and Categorise Cookies
      • Troubleshoot cookie scanner
      • Add cookie manually
      • Disable cookie categories by default
      • Using cookie scanner
    • Auto-block cookies with Script Blocker
      • Compatibility with WP cache plugins
      • Configuration
      • Add custom script blocker
      • Block scripts at client side
      • Block services in Google Tag Manager separately
      • Check script blocking
    • Create Privacy Policy Page
      • Policy generator
    • Customize Settings Pop up
      • Adding cookie settings link to footer
      • Alter colour of toggle button
      • Change cookie category order in settings popup
      • Adding Custom columns into the Audit Table
      • Display category wise cookie list
    • Customize Cookie Notice
      • Category checkboxes on cookie banner
      • Geo-target cookie message bar
      • Customize banner using CSS
      • Accept consent on scroll/delay
      • Customize templates
      • Hide the cookie bar on selected pages
      • Pre-defined templates
      • Shortcodes for banner
    • Multilingual Support
      • Translate using Polylang
      • Multilingual compatibility for Necessary Category
      • Translate using WPML
      • Translate using qTranslate
      • Multilanguage compatibility for privacy policy page
    • Advanced Topics
      • Modify duration of consent
      • Access/Block site based on consent
      • Show/hide 'Privacy and Cookie Policy' tab
  • CCPA
    • Getting Started
      • Get CCPA Compliant
  • Third-Party Compatibility
    • Plugins/Themes
  • FAQ
    • Frequently asked questions
  • Changelog
    • Version 2.3.7

Documentation/GDPR Cookie Consent/Alter the Color of the Toggle Button on the Popup

Alter the Color of the Toggle Button on the Popup

Last updated on December 24, 2020

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?
  • Yes, thanks!Not really

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 (21)

  1. ivan

    February 26, 2022

    Is there any chance to remove the “Read More” button from the Privacy Overview section of the Cookies Settings pop-up window?

    Reply
    • Mark

      Mark

      February 28, 2022

      Hi Ivan,

      The show more link is displayed based on the character in the privacy overview. It cannot be overridden by CSS. To increase the character limit, we have added a filter in the plugin core. Please copy the code snippet here to your active child theme’s functions.php

      You can modify the value and increase it from 400 according to the number of characters in your privacy overview content.

      Reply
  2. Andrew Dowling

    Andrew Dowling

    May 26, 2021

    Hi, I’m trying to change the colour of the toggle and also background colour for the Privacy Overview dialog. If I try to paste code in theme css I’m restricted to enter it inside class .cli_style{how do I add outside that class?
    I’m using Word press interface.

    Reply
  3. Rodger

    April 25, 2021

    Using the wordpress menu item ../wp-admin/edit.php?post_type=cookielawinfo&page=cookie-law-info#cookie-law-info-buttons/

    Editing the button colour does not change the button colour. Yes, I checked if it was browser cache, and tried multiple browsers. Other elements of the banner could be modified, such as text colour and the text-based “Cookie settings” link colour.

    Reply
    • Mark

      Mark

      May 2, 2021

      Hi Rodger,

      Please mention which button are you trying to modify and share the site URL as well.

      Reply
  4. Tanya

    March 15, 2021

    Hello,

    what is CSS code for changing the color of the every cookie category like you previously explained changing the colour for the “Save and Accept” button?

    Also, how can I change language for “Save and Accept” button?

    Thanks!

    Reply
    • Mark

      Mark

      March 16, 2021

      Hi Tanya,

      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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
      • Rodney

        July 1, 2021

        I have already altered the colour of the toggle button. I have a multilingual website, how to translate the text on the toggle button on the pop up?

        Reply
        • Mark

          Mark

          July 2, 2021

          Hi Rodney,

          It is loaded directly from the translation files in the plugin. If it’s not loading, your site might be in a language that isn’t supported yet. Please submit a ticket here with site URL and the mentioning the language.

          Reply

Got any query? Please leave a comment or reach out to our support

Cancel reply

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

We develop awesome WordPress plugins & WooCommerce extensions to help build successful online businesses.

© 2022 WebToffee. All rights reserved.

Our plugins

  • GDPR Cookie Consent
  • PDF Invoices & Packings Slips
  • Product Import Export Plugin
  • User & Customer Import Export
  • Import Export Suite
  • Sequential Order Numbers
  • Smart Coupons for WooCommerce
  • URL Coupons for WooCommerce
  • PayPal Express Checkout
  • Stripe Payment Gateway
  • Subscriptions for Woocommerce
  • Product Catalog Sync for Facebook
  • PrintNode for PDF Invoices
  • Order, coupon, subscriptions for WooCommerce
  • WordPress Backup and Migration
View more +

Get Started

  • Plugins
  • Testimonials
  • Affiliates
  • We're hiring

Help & Support

  • Documentation
  • Documentation (Basic)
  • FAQ
  • Support

Company

  • Terms & Conditions
  • Privacy Policy
  • Refund policy
  • Support policy
  • License Activation

© 2022 WebToffee. All rights reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. However you may visit Cookie Settings to provide a controlled consent.
Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of the basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website, to store user preferences and provide you with content and advertisements that are relevant. Such cookies will be stored on your browser but only upon procuring consent.

You will also have the option to opt-out of these cookies should you want to. But opting out of some of these cookies may have an effect on your browsing experience as per the descriptions elucidated against the respective categories below.

Necessary
Always Enabled
The cookies defined under this category are absolutely essential for the website to function. Hence they are loaded by default irrespective if user consent.
CookieDescription
__cfruidCloudflare sets this cookie to identify trusted web traffic.
__stripe_midStripe sets this cookie cookie to process payments.
__stripe_sidStripe sets this cookie cookie to process payments.
cookielawinfo-checkbox-advertisementSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analyticsSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Analytics" category .
cookielawinfo-checkbox-necessarySet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Necessary" category .
cookielawinfo-checkbox-preferencesThis cookie is set by the GDPR Cookie Consent plugin to check if the user has given consent to use cookies under the "Preferences" category.
CookieLawInfoConsentRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
PHPSESSIDThis cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user sessions on the website. The cookie is a session cookie and is deleted when all the browser windows are closed.
viewed_cookie_policyThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not a user has consented to the use of cookies. It does not store any personal data.
Analytics
Analytics cookies help us understand how our visitors interact with the website. It helps us understand the number of visitors, where the visitors are coming from, and the pages they navigate. The cookies collect this data and are reported anonymously.
CookieDescription
_gaThis cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assigns a randomly generated number to identify unique visitors.
_ga_BQH8MSKD4MThis cookie is installed by Google Analytics.
_gat_gtagIdentification code of website for tracking visits.
_gidThis cookie is installed by Google Analytics. The cookie is used to store information on how visitors use a website and helps in creating an analytics report of how the website is doing. The data collected including the number visitors, the source where they have come from, and the pages visited in an anonymous form.
_hjAbsoluteSessionInProgressHotjar sets this cookie to detect the first pageview session of a user. This is a True/False flag set by the cookie.
_hjFirstSeenHotjar sets this cookie to identify a new user’s first session. It stores a true/false value, indicating whether it was the first time Hotjar saw this user.
_hjidHotjar cookie. This cookie is set when the customer first lands on a page with the Hotjar script. It is used to persist the random user ID, unique to that site on the browser. This ensures that behavior in subsequent visits to the same site will be attributed to the same user ID.
_hjIncludedInPageviewSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's pageview limit.
_hjIncludedInSampleThis cookie is set to let Hotjar know whether that visitor is included in the sample which is used to generate heatmaps, funnels, recordings, etc.
_hjIncludedInSessionSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's daily session limit.
_hjTLDTestTo determine the most generic cookie path that has to be used instead of the page hostname, Hotjar sets the _hjTLDTest cookie to store different URL substring alternatives until it fails.
CONSENTYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
has_recent_activityThis cookie is used to signal to the code repository website if the user has browsed other website resources during the current session.
tk_aiGathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_lrThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_orThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_qsGathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_r3dThe cookie is installed by JetPack. Used for the internal metrics for user activities to improve user experience.
Advertisement
Advertisement cookies help us provide our visitors with relevant ads and marketing campaigns.
CookieDescription
_fbpThis cookie is set by Facebook to deliver advertisements when they are on Facebook or on a digital platform powered by Facebook advertising after visiting this website.
frThe cookie is set by Facebook to show relevant advertisements to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook Pixel or Facebook social plugin.
VISITOR_INFO1_LIVEA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Preferences
Preference cookies are used to store user preferences to provide them with content that is customized accordingly. This includes the language of the website or the location of the visitor.
CookieDescription
_gh_sessThis cookie is used to preserve users' states across page requests.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurationDescription
_hjSession_137657130 minutesNo description
_hjSessionUser_13765711 yearNo description
_octo1 yearNo description available.
_zendesk_authenticatedpastNo description
_zendesk_sessionsessionNo description available.
_zendesk_shared_sessionsessionNo description available.
edd_wp_session12 hoursNo description available.
logged_in1 yearNo description available.
m2 yearsNo description available.
Save & Accept