From the “Why didn’t I do this sooner?” series..

Whoever has decided to come up with 13px font size for the code areas in Oxygen must be in their 20s with excellent eyesight.

I am more like this though:

We can bump up the font size of the code text to 18px (or whatever you want it to be) by overriding Oxygen’s CSS using the oxygen_enqueue_ui_scripts action hook.

Before:

After:

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client or hosting panel’s file manager and navigate to the site’s

/wp-content/plugins/my-custom-functionality-master/assets/css

directory.

Create a file named say, oxy-editor-custom.css in there having the following code:

/* Bump up the font-size of code in Oxygen's code areas from the default 13px to 18px */
.oxygen-sidebar-code-editor-wrap .CodeMirror {
    font-size: 18px !important;
}

Edit plugin.php and add the following inside the custom_enqueue_files() function:

add_action( 'oxygen_enqueue_ui_scripts', 'custom_oxy_editor_css' );
/**
 * Loads CSS in Oxygen editor.
 */
function custom_oxy_editor_css() {

	if ( defined( 'SHOW_CT_BUILDER' ) ) {
		wp_enqueue_style( 'oxy-editor-custom', plugin_dir_url( __FILE__ ) . 'assets/css/oxy-editor-custom.css' );
	}

}

That’s it!

Reference:

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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: