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:
