Code by Day | Explore By Weekend

Home » Docs » Changing The Color Scheme

Documentation & Support

Changing The Color Scheme

Changing The Hex Colors In The CSS

Using A Code Editor

To change the hex colors in the CSS of one of our Divi child themes or layout packs, it works best to use a code editor. You could make the changes manually in the the code, but that woudl be very tedious. Using a code editor allows you to use a search and replace feature which will replace the colors in one click.

Download Brackets

There are many, many code editor options to choose from, but the one we use and recommend is Brackets. You can download this program for free and install it on a Windows or Mac. 

Copy & Paste The CSS

Once you have the code editor installed, create a new document. You can save this to your device with the extension .css. Select all of the CSS from “Divi>Theme Options>Custom CSS” and copy it to yoru clickboard. Next, paste the code into your CSS document in the code editor.

Find & Replace

Most code editors have a find and replace feature. In Brackets, this feature is located in the menu under “Find>Replace In Files.” 

Find…

The program will first prompt you input the code you want to locate in the file to replace. Go to your Divi>Theme Options to the color pallette and copy the six digit hex color. Paste this hex color into the box. 

Replace with…

Next, the program will prompt you to input the code you want to use instead. Enter the six digit hex color of your choice.

Replace…

Once you the two values entered you can click to replace. 

Copy & Paste Again

Now that you are done, make sure you select all and copy the entire CSS to your clipboard. Go back to Divi>Theme Options>Custom CSS and replace the old code with the updated code.

Changing Colors In Divi

The rest of the colors are in Divi itself and can be changed easily within the builder. Remember to use some of Divi’s amazing efficiency tools like “Extend Styles” and “Default Styles,” as well as filters like “Modified Styles.” Those will be very handy and allow you to update your color scheme in Divi very quickly.

Last updated Apr 10, 2020 @ 9:22 pm

Get Support

Something not going well? We are happy to help!

All we ask is that you browse our documentation first before contacting us. We add anwers to every question we receive.

Is the question or issue related to WordPress?

If yes, please contact your hosting provider for help.

Is the question or issue related to Divi?

If yes, please be sure read the Divi documentation or contact Elegant Themes support.

Is the question or issue related to our product?

If you think the answer is yes, then please fill out the form and we will be happy to help get this resolved!

Pin It on Pinterest

0

Your Cart