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;
}
Comments (16)
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.
Mark
May 2, 2021
Hi Rodger,
Please mention which button are you trying to modify and share the site URL as well.
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!
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;
}
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?
Mark
July 8, 2020
We will be improving it in coming updates.
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?
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
Mark
June 18, 2020
Please share the site URL.
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
Mark
April 8, 2020
Please create a ticket here.
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.
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"]
Maxwell Hogan
January 2, 2020
What about changing the color on the “Save and Accept” button?
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;
}
Maxwell Hogan
January 2, 2020
Thank you!