How to Increase the Scrollbar Width in Divi Modules

Divi styles the scrollbars on module settings (for example, the Text Module) very narrow. I think this is done so that the max amount of real estate is available for editing the content. The interesting thing is that the Divi styling for scrollbars only applies to webkit browsers (like Chrome). Other, Gecko-based browsers (like Firefox) have no custom Divi styling applied. And there's a reason for that: It's because non-webkit based browsers have very limited scrollbar styling capabilities.

For example, in Firefox, you can only specify auto (normal) or thin for the scrollbar width. You can't set a px width for the scrollbar.

Anyway, it's bugged me for quite a while now. And apparently it is very irksome to many other people as well. The styling for the scrollbar width in Divi modules for the most-used browsers make it really hard to grab that scrollbar for fine-tuning your position within the content. And never mind trying to put your mouse on the text area resize handle!

I've been meaning to write a tutorial about it but just sort of forgot since I spend more time coding than actually building websites. Thanks to the same question recently asked by in a few of the Facebook groups, I decided to go ahead and get a tutorial written up.

Divi's Native Scrollbar Styling

Just for some background information, here are the settings for the scrollbar width in Divi modules. As I mentioned, this styling only applies to webkit browsers. There is no Divi styling set for scrollbars for other browsers.

/******** The scrollbar width: */
width: 7px !important; /* in some cases */
width: 5px !important; /* in other cases */

/******** The scroll thumb color: */
background-color: #2b87da !important; /* in some cases */
background: #4c5866 !important; /* in other cases, same as setting background-color */

/******** How round is that scroll thumb?: */
border-radius: 3px !important;

Note: I really enjoy making sure that you understand the "WHY" as much as the "HOW". Knowledge increases your abilities.

Two Methods for Setting the Scrollbar Width in Divi Modules

So now let's talk about the two best ways to do custom CSS for Divi. There are other methods (like using JavaScript/jQuery) but we'll do just the easiest for this tutorial.

I would not even suggest global CSS because admin styling needs to be set for the back end only using your child theme's functions.php. However, when you are running full site editing (FSE) in Divi, the admin trigger does not take effect. You are literally on the front end! This means that setting conditions for only while in admin mode doesn't work, so that's kind of a moot point.

1. Add global CSS to your site
2. Add conditional styling

Always On (Global) CSS

This method is great if you are the only person who edits a site. It's also the easiest to implement. The slight drawback is that the CSS will be used everywhere, even when not needed. However, it works for the majority of cases and should not have much of an impact on your site when using Divi's built-in optimization settings.

Add this styling to your child theme's style.css. Or, if you are not using a child theme, then you can add it to the Custom CSS area in Divi -> Theme Options -> Custom CSS (at the bottom of that page). Hopefully the comments in the styling below will help you understand what's going on!

/********* FIREFOX, ETC. ***********/
/* Set scrollbar width, thumb and track colors for Firefox 
*/
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list, 

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe, 

/* Dynamic Link selection area */
.et-db #et-boc .et-l .et-fb-field-settings-modal__container,

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel  {
    scrollbar-width: auto !important; /* auto = normal width, thin = narrow width */
    scrollbar-color: #29c4a9 #f0f0f1 !important; /* scroll thumb color, track color */
}

/********* CHROME, ETC. ***********/
/* Change the width of the scrollbars for WebKit browsers.
   (Chrome, Edge, Safari)
*/ 
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list::-webkit-scrollbar, 

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe::-webkit-scrollbar, 

/* Dynamic Link selection area */
.et-db #et-boc .et-l .et-fb-field-settings-modal__container::-webkit-scrollbar,

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea::-webkit-scrollbar,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel::-webkit-scrollbar  {
    width: 15px !important;    /* Set scrollbar width here */
}

/* Set scrollbar thumb color and border-radius for WebKit browsers.
*/
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list::-webkit-scrollbar-thumb, 

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe::-webkit-scrollbar-thumb, 

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea::-webkit-scrollbar-thumb,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel::-webkit-scrollbar-thumb  {
    background-color: #29c4a9 !important;  /* Set thumb color here */
    border-radius: 3px !important;   /* Set thumb border radius here */
}

/********* ALL BROWSERS ***********/
/* Adjust position of Dynamic Content button so it does not overlap scrollbar.
*/
.et-db #et-boc .et-l .et-fb-settings-option-dynamic__enable--tiny_mce {
    right: 10px !important; /* adjust as needed based on scrollbar width */
}  

Conditional CSS Using functions.php

This is the more advanced method. It involves adding code to your child theme's functions.php file. The advantage is that the CSS applies only when needed. It tests to see if you have the edit posts capability and then adds code whether you are on the front end or the back end. (Since we determined that Divi doesn't trigger admin in FSE). And you kind of look like a pro. 💪

You can edit that file directly within your WP dashboard (via Appearance -> Theme Editor), but that's kind of dangerous. I suggest using FTP to edit PHP files, and taking a backup beforehand. But, if you know what you are doing, then go for it!

Below is the code you want to add. (You will notice that the styling is the same. This just tests whether the styling should be applied via code, and applies it if the conditions are right).

Notes:

1. Always back up your site before making changes to PHP code!
2. Never, ever edit PHP using the WordPress theme editor. One little mistake can cause you to lose access to your site. Instead, use FTP and your text editor of choice.

<?php 
// Make the Divi module editors have bigger scrollbars
//  This works by adding inline styling to the head
//  of the page. Do this only if user has edit posts WP capability.
if ( current_user_can( 'edit_posts' ) ) {
    // for front end editing
    add_action('wp_head', 'divicom_custom_scrollbars');
    // for everywhere else "back end" (wireframe, etc.)
    add_action('admin_head', 'divicom_custom_scrollbars');
}

function divicom_custom_scrollbars() {
  echo '<style>
/* Set scrollbar width, thumb and track colors for Firefox 
*/
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list, 

/* Dynamic Link selection area */
.et-db #et-boc .et-l .et-fb-field-settings-modal__container,

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe, 

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel  {
    scrollbar-width: auto !important; /* auto = normal width, thin = narrow width */
    scrollbar-color: #29c4a9 #f0f0f1 !important; /* scroll thumb color, track color */
}

/* Change the width of the scrollbars for WebKit browsers.
   (Chrome, Edge, Safari)
*/ 
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list::-webkit-scrollbar, 

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe::-webkit-scrollbar, 

/* Dynamic Link selection area */
.et-db #et-boc .et-l .et-fb-field-settings-modal__container,

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea::-webkit-scrollbar,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel::-webkit-scrollbar  {
    width: 15px !important;    /* Set scrollbar width here */
}

/* Set scrollbar thumb color and border-radius for WebKit browsers.
*/
/* Icon selector list */
.et-db #et-boc .et-l .et-fb-tabs__panel .et-fb-font-icon-list::-webkit-scrollbar-thumb, 

/* Dynamic Link selection area */
.et-db #et-boc .et-l .et-fb-field-settings-modal__container::-webkit-scrollbar,

/* Embedded content */
.et-db #et-boc .et-l .et-fb-tabs__panel iframe::-webkit-scrollbar-thumb, 

/* "Text" tab when editing content (as opposed to "Visual" tab) */
.et-db #et-boc .et-l .et-fb-tabs__panel textarea::-webkit-scrollbar-thumb,

/* Settings tabs panel (Content/Design/Advanced) */
.et-db #et-boc .et-l .et-fb-tabs__panel::-webkit-scrollbar-thumb  {
    background-color: #29c4a9 !important;  /* Set thumb color here */
    border-radius: 3px !important;   /* Set thumb border radius here */
}

/* Adjust position of Dynamic Content button so it does not overlap scrollbar.
*/
.et-db #et-boc .et-l .et-fb-settings-option-dynamic__enable--tiny_mce {
    right: 10px !important; /* adjust as needed based on scrollbar width */
}</style>';

Not Much More Unless You Tell Us

Alrighty then! Do you have any questions? Is this too deep or is it not complete? Do you have better suggestions?

Let us know in the comments below or in the Custom Coding room if this has helped, or if you have any suggestions on how to make this better. 🙂