12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jun 2, 2020

How to add custom CSS in Oxygen editor

Sridhar Katakam

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/

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down