How to use the Master CSS file
Who is this article for
- Anyone who owns the Jackson and wants to make custom CSS changes
Skill level
- Intermediate
Video tutorial
Before you start
- Changing simple things like colours or font size is possible from modules options. However, more advanced things require experience. Try to keep it simple if you are new to this.
What is master CSS and where can I find it
After installing and activating the Jackson Assistant Plugin, go to Dashboard Menu->Settings->Jackson Assistant.
You will see the link there to the latest Jackson master CSS version.
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. Almost all of the 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 file.
When you have the master CSS 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.
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 Services page, look for "Services" comment in CSS file. 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 page. 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 and update 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