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.
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.”
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.
Next, the program will prompt you to input the code you want to use instead. Enter the six digit hex color of your choice.
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.