The Privacy Suite for WordPress

CSS Lesson #25: From Scratch Example: New Toggles

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

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.

Adding the Toggles from Codepen

We’ll show how you might add these toggles to your cookie banner, straight from Codepen. In the below codepen HTML you will see a class in the label element. We need to add this to Complianz so we can easily implement the CSS. We did this by adding a new <div> above the closing <label> element.

Now you can add the needed CSS to make it work on the cookie banner:

				
					<!-- Codepen -->
<input id="chck" type="checkbox">
<label for="chck" class="check-trail">
<span  class="check-handler"></span>
</label>
<!-- Complianz -->
<label class="cmplz-label" for="cmplz-marketing-{consent_type}" 
       tabindex="0"><span>{category_marketing}</span>
<!-- Added -->
<div class="cmplz-custom-toggle"></div>
<!-- Added -->

</label>
				
			
				
					  /* Remove the Old Slider */

  .cmplz-cookiebanner .cmplz-categories 
  .cmplz-category .cmplz-banner-checkbox 
  input.cmplz-consent-checkbox:checked + .cmplz-label:before,
  .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;
  }

 /* Implement the New Slider */

@charset "UTF-8";

  input[type=checkbox] {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  .cmplz-label {
    display: flex;
    padding-left:0px!important;
    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;
  }
				
			

How to implement with MU plugins

In short, “MU plugins” is an extra folder in your /wp-content/ folded rof you WordPress installation. Besides /wp-content/themes/, /wp-content/plugins/ you will see, or can create /wp-content/mu-plugins/. Here you can add .PHP files with added functionality. For more information and example, read this article.

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

Custom CSS

Custom Cookie Banner

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!