cubicFUSION Themes for Klaro!

21. December 2020

This & That

.SHARE

“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”

The tool is developed by KIPROTECT and can be found on Github.

Black & White

As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.

I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)

I really hate those standard consent management modals, that integrate badly into the website native design.

Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)

The themes are Sass-based and provide easy configuration options.

Enjoy!

cubicFUSION Themes for Klaro! @ Github

Klaro! Tweaks

Klaro is still missing some things, will collect some workarounds here for you to play with.

Missing events for consent modal open / closed …

Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!

Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.


var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {
    console.log("consentModalOpen")
}, false);
	
document.addEventListener("DOMContentLoaded", function(e) {        

        var cm_target 	= document.getElementById( "klaro" ),
			cm_visible 	= false;	

        var observer 	= new MutationObserver(function(mutationRecords) {          

            if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){	
                cm_visible = true;
                document.dispatchEvent(cm_event);
              
            }else{
                cm_visible = false;
            }
        });

      observer.observe(cm_target, {
        childList: true, 
        subtree: true, 
        characterDataOldValue: true 
      });
});

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {

console.log("consentModalOpen")

}, false);

document.addEventListener("DOMContentLoaded", function(e) {

var cm_target = document.getElementById( "klaro" ),

cm_visible = false;

var observer = new MutationObserver(function(mutationRecords) {

if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){

cm_visible = true;

document.dispatchEvent(cm_event);

}else{

cm_visible = false;

}

});

observer.observe(cm_target, {

childList: true,

subtree: true,

characterDataOldValue: true

});

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

Gutenberg Grids & Timber ++ Some CSS Grid Magic!

This & That

A grid mystery Somehow the Grids Layout Builder for Gutenberg ist not pushing styles to the footer within a Timber theme. At least not for me. Somehow the wp_footer action within the Grids plugin is not being executed and no grid styles are added to the footer. I am not getting any errors, but will have to investigate some […]

Never store sensitive credentials in your code again – PHP dotenv

This & That

PHP dotenv loads environment variables from .env to getenv(), $_ENV and $_SERVER automagically. You should never store sensitive credentials in your code. Anything that is likely to change between deployment environments – such as database credentials or credentials for 3rd party services – should be extracted from the code into environment variables. Add your application configuration to a .env file in the root […]

Optimizing Typekit font loading

This & That

When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that. Both are using WebFont Loaders to help handle those brief moments. TypeKit Webfont Loader Example (function(d) { var config = { kitId: ‘***’ , // Your […]

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

cubicFUSION Themes for Klaro!

Table of Contents

Black & White

Klaro! Tweaks

Missing events for consent modal open / closed …

RELATED POSTS

Gutenberg Grids & Timber ++ Some CSS Grid Magic!

Never store sensitive credentials in your code again – PHP dotenv

Optimizing Typekit font loading

Alexander

DISCOVER.

.highlights

.highlights