How To Increase The Height of The Divi Theme Options Custom CSS Panel Tutorial by Pee Aye Creative

How To Increase The Height of The Divi Theme Options Custom CSS Editor Box

This tutorial will how you how to increase the height of the Divi Custom CSS editor box in the Divi Theme Options, making it much easer to work!

Categories: Divi Builder UI Divi CSS Divi PHP Tutorials

Make The Divi Custom CSS Box Taller

(So We can actually See What we are doing)

By now you know our goal here at Pee-Aye Creative is to solve problems, and our tutorials usually solve a pain point that we have with using Divi. But we love Divi, so we find ways to eliminate the pain point. Today is another good example of that.

Ever since the code editor was released back in February of 2018, it has annoyed me every time I used it (which is quite a alot). Today I decided to see if I could make the custom CSS box taller, and sure enough, with a little playing around and some code, it works!

Increase the height of the Divi custom css box BEFORE

(Scroll down for the “AFTER” photo.)

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

#1. Add The CSS In A Divi Child Theme

I first tried to put the CSS to make the CSS box taller…in the CSS box itself. Didn’t work. Haha So then I realized I needed to add this to the child theme, but not just in the normal style.css, but in a special place — I’lll show you.

NOTE: This section of the tutorial is going to look complicated, but it’s not as bad as it looks. Try it, it will be worth it! Use the video to help you.

If you already have a child theme installed…

You will need to use FTP, your hosting account File Manager, or even a WordPress File Manager Plugin to create some new folders and files.

If you don’t have a child theme yet…

You need one. You can get ours here: Download Our Free Divi Child Theme. Once you do that, you will need a way to edit the child theme. You can use brackets.io, or you can do use a method I already mentioend.

Folder And File Structure

So here is what needs to happen. We need to copy part of the Divi Theme’s code and place it in our child theme. That way, we can override it and it won’t be destroyed when we update Divi, the parent theme.

The folders and files that need to be copied are “/epanel/css/panel.css”

You can find this in the Divi Theme files under “/wp-content/themes/Divi/epanel/css/panel.css.”

Here are the exact steps to follow:

Copy the “panel.css”
Create a new folder in your child theme called “epanel”
Create a new folder inside that folder called “css”
Paste the “epanel.css” file into the “css” folder

Now all you have to do is add this CSS code snippet to the end of the “epanel.css” file. So copy this snippet, and go into the file (edit it) and scroll down to the bottom and past this there. Then save the file and update your child theme.

/*make the Divi Theme Options Custom CSS box taller*/
#divi_custom_css + .CodeMirror-wrap{
height: 800px !important;
}

You can make the height anything you want, but keep it reasonable. I thought the 800px was a good place to start.

#2. Add PHP To Your Divi Child Theme

Since we are modifying part of the Divi core theme, we need to get physical with the code and tell it what to do. Overriding it with just CSS won’t do the trick, so we also need to add this PHP snippet to our functions.php file in the Divi child theme.

function load_custom_wp_admin_style() {
wp_register_style( 'custom_css', get_stylesheet_directory_uri() . '/epanel/css/panel.css', false, '1.0.0' );
wp_enqueue_style( 'custom_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Once you copy that in and save, go over to Divi>Theme Options and see what happened. You may need to do a hard refresh or clear the cache to see the results. But when you do, your Divi Theme Optioms Custom CSS box will be as tall as you want it! Now you can actually see what you are doing!

Increase the height of the Divi custom css box AFTER

Last updated Aug 31, 2021 @ 6:18 pm

That's it!

I hope you have enjoyed learning How To Increase The Height of The Divi Theme Options Custom CSS Editor Box. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

Asit Aithal on April 10, 2020 at 1:55 am

This is a very cool trick. However, it would be much cooler if I had a button next the editor and when the user clicked on it, it would load my css in the editor of my choice (say VS Code).
Reply
- Nelson Lee Miller (aka The Divi Teacher) on April 11, 2020 at 7:22 pm
  
  Hi Asit,
  Sure, that could be handy!
  Reply
Chris on April 10, 2020 at 5:56 am

Thanks for the hint, I was always annoyed about the size but never bothered actually trying changing it 😉

I set 80vh instead of a fixed px value though which works better for me, as I constantly switch between a 15″ and 25″ screen!
Reply
- Nelson Lee Miller (aka The Divi Teacher) on April 12, 2020 at 7:28 am
  
  Hey Chris,
  That’s sounds great, glad that solution works for you!
  Reply
Sherm on September 1, 2020 at 11:51 pm

Nelson, great post. I’m baffled why DIVI hasn’t fixed this internally. Obviously, their devs have never been up all night trying to add custom CSS code to a site, with bleary eyes that no amount of caffeine or eye drops can fix…

Using this is such a pain it makes me want to go back to Elementor.

Any thoughts on how to change the dismal color scheme for this editing box?
Reply
- Nelson Lee Miller (aka The Divi Teacher) on September 21, 2020 at 6:47 pm
  
  Hey Sherm,
  haha I love your humor. Do you mean changing just the gray? That would be possible, but I don’t want to mess with the color scheme of the actual code editor.
  Reply
Emiel on December 15, 2020 at 2:07 pm

Another approach (which I chose), is to install a Chrome extension that allows to apply custom CSS, like Stylebot. Adding the CSS you gave in this blog post allows to update automatically the height of the editor box on every website I make or update, without bothering with child themes or changing anything.

Of course, if many people edit the CSS code on a website, it would make sense to do the change for everyone with a child theme, but most of the time this would be overkill in my opinion.
Reply
- Nelson Lee Miller (aka The Divi Teacher) on December 15, 2020 at 10:35 pm
  
  Hi Emiel,
  Sure that works 🙂
  Reply
deet detra on March 22, 2021 at 7:07 am

Heya,
Typo error there: ‘epanel.css’ should be ‘panel.css’
Reply
- Nelson Lee Miller (aka The Divi Teacher) on March 23, 2021 at 11:53 am
  
  Thanks, you are right, the fold is epanel but the CSS file is just panel. Got it!
  Reply