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.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: