Built-in Variables in Oxygen

It is possible to reference

• global colors
• element’s ID and
• Easy Posts element’s ID

using variables in Oxygen.

Let’s take a look at these in this article.

Global Colors

Every color in the Settings > Global Styles > Colors will have a ID.

These can be referenced in this format wherever hex color code can be entered:

color(12)

This could be for example, in the Text Color input field or inside Custom CSS or Easy Post’s Template CSS.

Element ID

%%ELEMENT_ID%%

could be used to refer to the current element’s ID.

Ex.:

(function($) {
	$('#%%ELEMENT_ID%%').css('color', 'green');
})(jQuery);

in the JavaScript panel for a Heading component will for example, change its text color to green after “Apply Code” is clicked.

Source.

More examples:

1)

(function($) {
	'use strict';
	$('#%%ELEMENT_ID%%').attr('data-flickity', '{ "cellAlign": "left", "contain": true }');
}(jQuery));

2)

jQuery(window).scroll(function() {

	if (jQuery( "#%%ELEMENT_ID%%" ).hasClass( "oxy-sticky-header-active" )) {
		jQuery("#inner_content-22-6").css("margin-top", "180px");
	}

});

Source.

3)

jQuery(document).ready(function($){
	$("#%%ELEMENT_ID%% video").removeAttr("loop");
});

Source.

4)

jQuery(document).ready(function($){
	$("#%%ELEMENT_ID%%").delay(2000).fadeIn(2000);
});

Source.

5)

jQuery('#%%ELEMENT_ID%% .oxy-tab').mouseenter(function() { jQuery(this).click() });

Source

Easy Posts ID

%%EPID%%

refers to the current Easy Posts instance’ ID.

For example,

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

in Template CSS will be output as

where #_posts_grid-1061-2 is the ID of the Easy Posts component.