Add Custom Colors to the Divi TinyMCE Color Picker

Written by Dan Mossop

Enhancing the Divi module settings TinyMCE editor with a custom row of colors can make your design process smoother and more tailored to your brand's palette. This post shows you how you can expand the color picker to include a new selection of colors. 

Add Custom Colors to the TinyMCE Color Picker using JS

The code snippet below adds a new row of colors to the top of the TinyMCE color picker in Divi modules such as the text module. Each color is defined in an easily modifiable array, allowing you to configure your own custom color palette. 

Here is the jQuery code:

<script>
jQuery(document).ready(function() {
    var colorArray = {
        'Forest Green': '#228B22',
        'Mint Green': '#98FB98',
        'Olive': '#808000',
        'Teal': '#008080',
        'Emerald': '#50C878',
        'Lime Green': '#32CD32',
        'Coral': '#FF7F50',
        'Turquoise': '#40E0D0'
    };

    jQuery(document).on('click', '.et-fb-modal__module-settings .mce-colorbutton .mce-open', function() {
        var colorRowId = 'db_custom_tinymce_colors';

        // Check if the color row has been added
        if (jQuery('#' + colorRowId).length === 0) {
            var colorRow = '<tr id="' + colorRowId + '">';

            jQuery.each(colorArray, function(name, hex) {
                colorRow += '<td class="mce-grid-cell">' +
                    '<div data-mce-color="' + hex + '" role="option" tabindex="-1" style="background-color: ' + hex + '" title="' + name + '"></div>' +
                    '</td>';
            });

            colorRow += '</tr>';
            jQuery('.mce-colorbutton-grid').prepend(colorRow);
        }
        
        // Set height:auto to the parent .mce-floatpanel
        jQuery('.mce-colorbutton-grid').closest('.mce-floatpanel').css('height', 'auto');
    });
});
</script>

To add the code, navigate to:

Divi > Theme Options > Integration > Add code to the head of your blog.

Paste the script into the box and then save the changes

To use the colors, open a Divi module setting and click on the color picker. You should see the new row of colors appear. They can be used in the same way as the existing ones.

Unleash the Power of Custom CTAs in WordPress

Transform your Divi designs with the WP Magic CTAs plugin. This AI-driven tool creates custom, high-impact call-to-actions tailored for each post, perfect for boosting engagement with your unique design style.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.