I recently had an interesting and unusual request from a client based in Bangkok. You may have heard that the King of Thailand, one of the world’s longest reigning monarchs, has sadly passed away. Like many businesses throughout Thailand my client wished their website to be toned down in order to pay their respects.

Fortunately their request was as simple as the solution.

They wanted to turn their entire website colourless/grayscale during a period of national mourning. Here’s what their website normally looks like:

home_-_starfish_group_asia_and_new_tab-2

And here is what they wanted to achieve:

home_-_starfish_group_asia_and_new_tab

Making an entire website grayscale in Divi is extremely simple. All you have to do is copy and paste the following code into the custom CSS panel in the Divi Theme Options pane.

/* MAKES ENTIRE WEBSITE GRAYSCALE */
 html {
 -moz-filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 filter: gray; /* IE6-9 */
 filter: grayscale(100%);
 }

So it should look something like this:

theme_options__worth_it_media_-_wordpress-2

Using the Custom CSS panel in the Divi Theme Options is ideal because you can add or remove the code quickly. If however you’d like to make your entire Divi website grayscale for a long period of time then why not add the code to your child theme CSS instead?

So there you have it, a really simply way to show your respects during a time or mourning or any other reason why you would want to grayscale your entire website.

Unfortunately Internet Explorer 10 and 11 no longer support ‘filter’ which means that IE10 and 11 browsers will render the site in colour. As yet I haven’t found a simple solution that would be able to achieve the same effect on these browsers. If you know of a way, let us know in the comments.

How Can I Help?

Website Design

Looking for a beautiful, easy to maintain website that helps you connect with your audience? You've come to the right place.

Find Out More

Divi Extensions

Give your website a low-cost makeover or add some exciting new functions, it's easy with these excellent Divi resources.

View Products

Collaborations

Searching for a forward-thinking, creative Divi designer to add to your agency? See how I can delight your clients.

Learn More