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!
(Scroll down for the “AFTER” photo.)
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
▶️ Please watch the video above to get all the exciting details! 👆
#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.
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 paste 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.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
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!
How To Increase The Divi Theme Options Custom CSS Box Height Using Divi Assistant
Here are the simple steps to increase the Divi Theme Options Custom CSS box height using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Code Helper tab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
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).
Hi Asit,
Sure, that could be handy!