I know this is specific to a bundled plugin, not the theme, but I’m hoping someone has come across this before. I accidentally posted this in the Support forum previously, but this one seems like the better choice.
I’ve got a simple shape on a slider (full width). I want to apply a CSS transform to it, so I’ve added custom layer CSS. Shows up fine on the back-end, but gets overwritten on the front-end.
So I added some custom JS to the slider:
var revapi = revapi1;
revapi.on('revolution.slide.onloaded',function (e) {
console.log('Slider Loaded');
jQuery('#slide-1-layer-5').css('transform', 'skewY(-10deg) translate(0, 40%)');
});
Works perfectly fine if run in the console, but again appears to be overwritten by later executing JS.
I’ve pinned it down to the CSS Plugin in jquery.themepunch.tools.min.js. I can’t seem to figure out what event it’s firing on though (tried breakpoint event listening on onload event and that didn’t catch it).
Any one know how to manipulate this CSS and not get it overwritten by the CSS Plugin in tools? Either by firing it off after, or passing an overriding argument to the function that’s running in the first place.
When I posted it in Support, they suggested using a delay using setTimeout on the same API event. That does technically work, but it can be unreliable if the page load is a little slow (or I have to use a longer timeout).
Anyone run into something like this and found a good solution?