Completely Overriding Contextly CSS - ADVANCED

There are simple ways to tweak Contextly's CSS in the control panel. You can download the CSS and make changes by putting the tweaks into the Control Panel's CSS box for the module you wish to tweak.

For devs who wish to totally override our CSS, there's a way to do this using some jQuery tweaks.

BUT this tutorial is for experienced developers only.

HERE BE DRAGONS.

The ability to control the module CSS was added in the 3.1 release.

Contextly scripts trigger a lot of different jQuery events on the window object. We will document all those events some day, but for now the event you could use is "contextlyAssetsLoading".

Arguments passed to the handler of this event are:
- Standard jQuery event object
- Name of the assets package we're going to load
Contents of the package
- Internal gate object. Useful in case you're going to load custom styles with Contextly tools. 


An example of code preventing CSS of all modules from loading and printing the package name to the browser console would be:

jQuery(window).bind('contextlyAssetsLoading', function(e, name, config, gate) {
console.log(name, config);
config.css = [];
});

You're also able to control CSS loading depending on the module type and theme by checking the package name. It has the following format:

widgets/WIDGET_TYPE/THEME_NAME

 

As a warning, we have limited resources to troubleshoot these kinds of changes. We will give what support we can, but modifying the displays this way is highly custom and should only be done by devs who can troubleshoot their own code.

Have more questions? Submit a request

Comments