How to change bundle colours

Skill level

- Easy / Intermediate

Time to complete

- 10 minutes

Can I change default bundle colours across the whole site at once?

When using the Assistant Plugin it is not yet possible to change a single colour in one place to update globally (site-wide). We are working on a way to achieve this but have not found a reliable solution yet. Advanced users who make a manual integration of any bundle into their own child theme can search replace hex codes in the CSS files. 

Where to change the colours of a specific module?

There are 4 potential places to look when changing a Divi Den bundle colour. All modules are slightly different. That's why you want to look in 4 places to be sure. This goes quite fast when you get familiar with it. 

1. Module settings  - Content (background colour perhaps) 
2. Module settings  - Design (colour picker in most cases) 
3. Module settings  - Advanced (custom CSS - search for the red hex code - you can use "ctrl/cmd + f" to use the browser search function)
4. Master CSS colour changer file - Any colours that do not change after updating all module settings will likely require a Custom CSS change. Open the Master CSS Colour Changer File (see download files or plugin settings for the link). Next, find the bundle module name you are trying to update. Same as the library item name. Then search for the module name in the CSS Master CSS Colour Changer File - it is clearly commented. find the matching CSS rules, change the hex colour and then copy/paste the CSS rules into the custom CSS box for the Divi Theme or the Page level Custom CSS box. Check our video tutorials if you need guidance on doing that. 

IMPORTANT

- In all cases above  remember to clear 6 kinds of caches after making the changes (or you won't see it), then reload the page to see the changes
- Also see  Deactivate caching: why you should never build/develop websites with caching activated

Further links that might be of help

- Where to change colours in Divi Module Settings screenshot  https://www.screencast.com/t/qZ5mqeZkBOEs

- How to use the code inspector to find specific CSS in Chrome - video here  https://www.youtube.com/watch?v=vs63yeOkT3I. It's a similar story if you use Firefox or Safari - Search for videos on that if you need to. 
- More info here  https://css-tricks.com/using-devtools-tweak-designs-browser/