How to use master CSS colour changer
Who is this article for
- Anyone who owns the Mermaid Bundle and wants to make custom CSS changes
Skill level
- Intermediate
Before you start
- Changing simple things like colours or font size is possible by following the CSS syntax. However, more advanced things require experience. Try to keep it simple if you are new to this.
What is master CSS colour changer and where can I find it
After installing and activating the Mermaid Assistant Plugin, go to the menu, Settings->Mermaid Assistant. You will see the link to the current online version of the file there.
How and when should I use it
When you want to make a style change, the first place to look for is the module settings. 97% of style updates can be made here. Only if there is no option to change what you are looking for, will you use the master CSS colour changer file.
When you have the master CSS colour changer open in a new window tab
Copy/paste the contents into a new text file and save it to your local machine.
You can work in any text editing program. Our recommendation is Notepad++, free and rich text editor.
Once you have the CSS in your text editor you have all the CSS code of Mermaid bundle in front of you.
When you want to make a style change to your site, you need to find the respective CSS and edit it in the document. Afterwards, you will copy/paste only the relevant CSS rule into the Divi custom CSS box.
Keep reading for more detail on how to do this.
For example, if you want to edit Contact module 3, you should find it in the CSS. The whole file is well commented and you can use the search to find it.
There, you can change anything you want related to this particular module. Once done, copy only the lines where you made your changes, not the complete CSS.
There are two possible places where you can paste the CSS depending on if you want your new CSS to affect the whole website or only a single page.
A) If you have multiple instances of the same module across the site (This way, you can instantly change the style for all of them)
B) If you have the module only on a single page
A) Go to Divi->Theme Options. Scroll down to Custom CSS:
Paste your CSS into Custom CSS box and click Save Changes.
B) While you are on the edit page screen, click the settings icon:
Then, paste the CSS into Custom CSS box:
Click Save.
Click Update to save the page.
I don't see anything changed on my site
If you have updated the page but you can't see anything changed on your site, you are most probably experiencing a caching issue. To make sure, deactivate all the caching and code minification on your website.
• Here is a complete guide how you should do it: Deactivate caching: why you should never build/develop websites with caching activated
• Also, make sure to clear the cache afterward: 6 kinds of caches to clear