How To Change The Blog Post Title Color In Divi

Since a few weeks I'm having this problem with not able to read the title on the backend in WordPress. I'm not sure if this problem is related to Divi, but as I'm using Divi and the problem clearly is within a Divi CSS portion of the site, I'm guessing that is where this problem is.

Cannot wait to read the solution? Skip all the TLDR parts and go straight to the fix here!

Divi the best Template engine for WordPress

Nope, this article is not sponsored by Divi nor by WordPress, however I really like Divi. I created this theme you are looking at right now with Divi.

Divi is a premium WordPress Theme and standalone WordPress plugin from Elegant themes that allows you to build websites using the visual drag-and-drop page builder. This visual page builder makes it easy to build websites without the need to know any code such as HTML, CSS or PHP. Trust me you will love it!!

WordPress worlds best website creation platform

Let me nuance the above statement. Yes WordPress is truly one of the world's best website creation platforms out there.

However, for blogging alone, I would definitely recommend a platform like Ghost.

WordPress is a free to use, open-source website creation platform. Or in short a CMS, content management system written in PHP that uses MySQL database for it's data. WordPress is the easiest and most powerful blogging and website builder in existence today. But again… there are other very good systems out there.

WordPress is an excellent website platform for a variety of websites and blog or ecommerce sites.

Gutenberg editor white title problem

So for writing blog articles I use the Gutenberg Editor WordPress provides nowadays. I think it is a great and very versatile editor that can be easily extended with great plugins for even better usage within WordPress.

With the Gutenberg editor or Gutenberg block editor as WordPress calls it, you build your pages in blocks. There are blocks for titles, text, images and buttons. Gutenberg is sleeker and more minimalistic than the Classic Editor. Blocks add a WYSIWYG component to the new editor that helps WordPress compete with Squarespace and Wix. The ability to add blocks makes creating content on WordPress less intimidating to users who aren't very tech savvy.

White title white background problem

So, since a few months I have this problem on the backend of WordPress. I'm not really sure if it is Divi theme related. It looks like it as the css where the problem resides is in a divi stylesheet.

It looks like when you do not use the Divi builder but the Gutenberg editor and you have set titles to display in white you will have this problem.

So the problem is that I cannot see the title text. It seems not to be there, but it is just a white font color on a white background. And well… white on white is like a transparent title, you can not see it!

Gutenberg, Divi, WordPress White title white background solution

But trust me, it is there! When I make a selection, I can actually see it.

Solution with white title with wordpress divi gutenberg

So the problem is in this little piece of CSS code.

<style id='divi-block-editor-styles-inline-css'> ..... .edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input { font-weight: 800;font-size: 42px; color: #FFFFFF !important; font-weight: 800;font-size: 42px; color: #FFFFFF !important; } ......

Where the color: #FFFFFF !important; breaks the page.. well, makes the title white.

The white title on white background only is there on the backend using the Guttenberg editor.

Solution white title in Worpdress

So some of you will be able to solve the problem within WordPress itself by going to Appearance in the menu, then go to Customize, open "General Settings", Open "Typography" and then adjust the Header Text Color, which you can find scrolling down. If you set that to black, it could work for you.

However if this does not help you with the White Title problem well there is a somewhat more difficult step you can take.

First you have to install the "Code Snippets" plugin, this plugin is written by Code Snippets Pro and it is great for creating all kinds of extra functionality for your site.

So please install this plugin. When installed create your first snippet. Go to the WordPress menu item "Snippets" and press "Add new".

Now you will see the code screen.

Name your snippet something like : "White Title Guttenberg & Divi"

In the code part you will need this code:

function white_title_guttenberg_divi(){ 	?> <script> jQuery(function(){ 	jQuery(document.body).append("<style id='white_title_guttenberg_divi'>.edit-post-visual-editor__post-title-wrapper .editor-post-title__block .editor-post-title__input {color: #000 !important;}</style>"); }); </script> 	<?php };  add_action('admin_footer', 'white_title_guttenberg_divi', 1000 );

Set it to: "Only run in administration area"

You should have something like this

White title with wordpress divi gutenberg solution

Press save and activate.

If you do not want to create a snippet because you are afraid you will break things, just download below file and import it with the snippets plugin. Do not forget to active it.

Good to know when solving WordPress, Divi white title problem!

This is for solving the WordPress, Gutenberg, Divi white title on white background problem.

You can change this script to your needs. This code is licensed under MIT license.

When your site breaks, just remove this code or the entire Snippets plugin.

I cannot held responsible in any way when using the Snippets plugin or this script.

If you like and use it, please donate me a cup of coffee.