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

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: