Inserting the variation CSS at the bottom of the body tag

This Article Will Help You:

• Issue
• Solution

Issue

When inserting CSS via the CSS Editor when building a variation, the "!important" CSS property is needed so, the added CSS rules take precedence from the styles added on the page. This is sometimes not convenient.

Solution

By adding the following script to the Project Configuration > Project Javascript, the variation CSS will be appended as an additional style tag at the bottom of the BODY tag. 

This will make the CSS rules take precedence of any CSS rules already included on the page. 

Here is the code:

// Code for appending the variation CSS rules to the bottom of the BODY tag.

convert.$( document ).ready(function() {
 var exp = convert.currentData.experiments;
 for(var expID in exp) {
 var varID = exp[expID].variation_id;
 console.log('Variation: ' + expID + ':' + varID);
 css_in_variation = convert.data.experiments[expID].vars[varID].content.html[0].c;
 if (!(typeof css_in_variation === 'undefined')) convert.$('body').append(css_in_variation);
 else console.log('No CSS in Variation'); 
 break;
 }
});

 Notes:
Tag inline styles will still take precedence over the added CSS styles of the variation. 
Also, blinking or flashing might be brought upon by implementing CSS rules this way. As the changes will be implemented when the CSS rules are loaded and interpreted at the bottom of the page.