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