Looking to run custom CSS code in the Oxygen editor?

Adding the following in a Code Snippet will load the specified CSS inline and can be used to make styling changes to the elements of the builder itself:

add_action( 'wp_enqueue_scripts', 'wpdd_oxygen_editor_css', PHP_INT_MAX );
/**
 * Add custom CSS in the Oxygen editor.
 */
function wpdd_oxygen_editor_css() {
	// if we are not in the Oxygen editor, abort.
	if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
		return;
	}

	$css = '
		.oxygen-add-section-element[data-searchcat="Reusable"] {
			width: calc(100% - 6px);
		}
		';

	wp_add_inline_style( 'oxygen', $css );
}

Replace

.oxygen-add-section-accordion-contents .oxygen-add-section-element {
	width: calc(100% - 6px);
}

with your CSS code that should be loaded in the Oxygen editor.

The above code will make the reusable elements in the +Add section appear 100% wide and stacked one below the other.

Before:

After:

Related: https://wpdevdesign.com/oxygen-developers-guide/

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
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: