Get Premium

CSS Lesson #25: From Scratch Example: New Toggles

We built our new cookie banners for 6.0 with the idea to be fully flexible. A solid, minimal default set-up that complies with WCAG and ADA and has many settings direct available in the back-end, and fully customizable as you expect from WordPress.

Below you will find an example of adding new toggles to the cookie banner with some simple changes. For full transparency, the toggles are from codepen and made by Raúl Barrera, available here. these animated toggle switches and more elements are available online whit the right Google search terms and easily implemented.

How to implement with MU plugins

In short, “MU plugins” is an extra folder in the /wp-content/ folder of your WordPress installation. Besides the /wp-content/plugins/ folder you will have (or can create) the /wp-content/mu-plugins/ directory. Here you can add .PHP files to add functionality. For more information and example, read this article.

To create the toggles, please add these .PHP files to the mu-plugins folder.

banner.php in wp-content/mu-plugins/
cookiebanner.php in wp-content/mu-plugins/cookiebanner.php

banner.php

<?php
/**
* Override cookiebanner template html
* @param string $html
*
* @return string
*/
function cmplz_custom_banner_file($path, $filename){
if ($filename === 'cookiebanner.php' ) {
error_log("change path to ".trailingslashit(WPMU_PLUGIN_DIR).'cookiebanner/cookiebanner.php');
return trailingslashit(WPMU_PLUGIN_DIR).'cookiebanner/cookiebanner.php';
}
return $path;
}
add_filter('cmplz_template_file', 'cmplz_custom_banner_file', 10, 2);
/**
* Completely override CSS generated by Complianz
* @param string $css
*
* @return string
*/
function my_custom_banner_css($css){
ob_start();
//add css below
?>
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
padding-left:0px!important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
display:none!important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before {
display:none!important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after {
display:none!important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
}
.cmplz-always-active {
color: #16a085!important;
}
@charset "UTF-8";
input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
}
.cmplz-label {
display: flex;
align-items: center;
width: 2em;
height: 1em;
background: #690e0e;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.cmplz-custom-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
background: #9d1111;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.cmplz-custom-toggle:before {
content: "×";
color: white;
font-size: 0.8em;
font-weight: bold;
}
input[type=checkbox]:checked + .cmplz-label {
background: #16a085;
}
input[type=checkbox]:checked + .cmplz-label .cmplz-custom-toggle {
margin-left: 50%;
background: #1abc9c;
}
input[type=checkbox]:checked + .cmplz-label .cmplz-custom-toggle:before {
content: "✔";
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
line-height: 1.5em;
}
<?php
return ob_get_clean();
}
add_filter('cmplz_cookiebanner_css', 'my_custom_banner_css');
view raw custom-toggle.php hosted with ❤ by GitHub

cookiebanner/cookiebanner.php

<?php
/**
* For each activate consenttype a banner is created
* If A/B testing is enabled, each banner is rendered per consenttype as well.
*/
?>
<div class="cmplz-cookiebanner cmplz-hidden banner-{id} {consent_type} cmplz-{position} cmplz-categories-type-{use_categories}" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-{id}-{consent_type}" aria-describedby="cmplz-message-{id}-{consent_type}">
<div class="cmplz-header">
<div class="cmplz-logo">{logo}</div>
<div class="cmplz-title" id="cmplz-header-{id}-{consent_type}">{header}</div>
<a class="cmplz-close" tabindex="0" role="button">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
</a>
</div>
<div class="cmplz-divider cmplz-divider-header"></div>
<div class="cmplz-body">
<div class="cmplz-message" id="cmplz-message-{id}-{consent_type}">{message_{consent_type}}</div>
<!-- categories start -->
<div class="cmplz-categories">
<details class="cmplz-category cmplz-functional" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">{category_functional}</span>
<span class='cmplz-always-active'>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
aria-checked="true"
id="cmplz-functional-{consent_type}"
data-category="cmplz_functional"
class="cmplz-consent-checkbox cmplz-functional"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-functional-{consent_type}" tabindex="0"><span>{category_functional}</span></label>
</span>
<?php _e("Always active","complianz-gdpr")?>
</span>
<span class="cmplz-icon cmplz-open"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-functional">{functional_text}</span>
</div>
</details>
<details class="cmplz-category cmplz-preferences" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">{category_preferences}</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-preferences-{consent_type}"
data-category="cmplz_preferences"
class="cmplz-consent-checkbox cmplz-preferences"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-preferences-{consent_type}" tabindex="0"><span>{category_preferences}</span></label>
</span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-preferences">{preferences_text}</span>
</div>
</details>
<details class="cmplz-category cmplz-statistics" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">{category_statistics}</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-statistics-{consent_type}"
data-category="cmplz_statistics"
class="cmplz-consent-checkbox cmplz-statistics"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-statistics-{consent_type}" tabindex="0"><span>{category_statistics}</span>
<div class="cmplz-custom-toggle"></div>
</label>
</span>
<span class="cmplz-icon cmplz-open"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-statistics">{statistics_text}</span>
<span class="cmplz-description-statistics-anonymous">{statistics_text_anonymous}</span>
</div>
</details>
<details class="cmplz-category cmplz-marketing" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">{category_marketing}</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-marketing-{consent_type}"
data-category="cmplz_marketing"
class="cmplz-consent-checkbox cmplz-marketing"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-marketing-{consent_type}" tabindex="0"><span>{category_marketing}</span>
<div class="cmplz-custom-toggle"></div></label>
</span>
<span class="cmplz-icon cmplz-open"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg></span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-marketing">{marketing_text}</span>
</div>
</details>
</div><!-- categories end -->
<?php do_action('cmplz_banner_after_categories' ) ?>
</div>
<div class="cmplz-links cmplz-information">
<a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container"><?php _e("Manage options","complianz-gdpr")?></a>
<a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview"><?php _e("Manage services","complianz-gdpr")?></a>
<a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper"><?php _e("Manage vendors","complianz-gdpr")?></a>
<a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/"><?php _e("Read more about these purposes","complianz-gdpr")?></a>
<?php do_action("cmplz_after_links")?>
</div>
<div class="cmplz-divider cmplz-footer"></div>
<div class="cmplz-buttons">
<button class="cmplz-btn cmplz-accept">{accept_{consent_type}}</button>
<button class="cmplz-btn cmplz-deny">{dismiss}</button>
<button class="cmplz-btn cmplz-view-preferences">{manage_options}</button>
<button class="cmplz-btn cmplz-save-preferences">{save_settings}</button>
<a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">{manage_options}</a>
<?php do_action("cmplz_after_buttons")?>
</div>
<div class="cmplz-links cmplz-documents">
<a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a>
<?php do_action("cmplz_after_documents")?>
</div>
</div>
view raw custom-toggle-banner.php hosted with ❤ by GitHub
  • Go Premium

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Premium
  • News

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.

Read more

Join our mailing list - 8 Tips & Tricks in your inbox over the next week, that's all!

Plugins

© Complianz BV
CoC 717814475
Kalmarweg 14-5
9723 JG, Groningen (NL)

Wordpress Linkedin Github

Get Started

Legal

Premium