General Overview - How To Change Colours, Styles And Use The Master CSS File - Coco Bundle
Who is this article for
Anyone who would like to learn how to make changes to designs of our products. This article will include specific CoCo layouts and modules in examples, but you can apply the knowledge from this tutorial to any plugin you use.
• Skill level: Intermediate
• Time to complete: 15+ min
What you will learn in this article
Our goal here is to show you various methods of updating the design and teaching you how to change anything on the website by following general principles. You will learn how to use Divi builder to change modules options, how to use developer tools in your browser, how to use CSS files and more.
Video tutorial
Before you begin
Make sure that you have everything up to date including WordPress, Divi theme and any of our products you use, this time specifically CoCo.
2 Places To Change Design
There are two main places to look for when you would like to make design updates.
1. Settings
Each section, row, and module has the settings where you can update majority of the design by changing the options predicted for that.
2. Master CSS file
Each plugin has it's own "master CSS" file which includes the style that can't be edited from the module settings.
Settings
On the screenshot below, marked green are the settings buttons that you can click to access the settings. First one (blue) is the section, followed by row (green), and module (grey).
Section and row settings is usually where you want to look at when you want to change the backgrounds and spacing. In this article, we will focus on module settings as this is where fun stuff is and the most of the design that you would possibly want changed.
Module settings
When you open any module settings you will see 3 tabs with 3 different groups of options: Content tab, Design Tab and Advanced tab.
What you will find out next is what each tab is and what options you can find there.
Content
This is where you change the actual module content. Here you update the text and images and everything else that the module displays. Visual content builder makes it easy to handle the content style and there's a button that allows you do add graphic content.
Design
The tab that you are going to use most of the time. Good part of the design for any module is set here. Settings are different from module to module, but generally, here you can change text colour, size and style, background colours, module width and margins, other options that are specific to the particular modules, and even add animations and more. In other words, pretty much all the design is here.
Advanced
As the name says, this is the tab with advanced settings. Usually, you can find some additional module style here, written with CSS. If there is something that you want changed in your design, but it isn't there in the Design tab, this is the next place to check. Also, you use this tab when you want to assign your module a unique ID or a class.
Master CSS file
However, the great design for our layouts can't be accomplished using just the module settings, so we have additional CSS written in a file called "Master CSS" file.
You can access it by going to Dashboard Menu->Settings->CoCo (or any other plugin that you use) .There you'll see the "Open Master CSS" button. Once clicked, it will open this CSS in a new window.
How to use Master CSS file
Copy the whole code that opened in a new window and paste it in a text editor. You can work with any text editing program, such as Notepad++..
These CSS files are really well commented. Comments are there as instructions so you can easily find what you are trying to update. Just open up a search box (ctrl+f) and type in the layout name, or the module name you would like customised. All CSS under the comment is related to that specific layout you aim to update.
Edit the CSS you would like and copy the changes you made. Don't copy everything, just the blocks of CSS where you made changes.
Go to the page where layout is loaded and click page settings icon:
Paste the CSS inside Custom CSS box:
Click Save and update the page.
I have read everything so far, but still can't find where to change something
There is a super tool you can use to find out where is something exactly.
Using Developer tools
For that, open up your browser's Developer tools. In all major browsers, you can do that by clicking F12 button on your keyboard.
Something like this will appear in your browser: 
It does not look exactly the same for all browsers, but it is very similar.
Click the Inspect tool. Here are two screenshots from Mozilla and Chrome:
With this tool enabled, click an element on your website, and as soon as you click it, all the relevant information about it's style will appear on your right.
It will display the CSS assigned to that element, and also where it is located. How nice!
And here is how to read that information. See this two examples:
Example 1
In the example you can see on the image, I have selected an image .
What I can see in the inspect tools for this exmaple is this:
It lists all the CSS for this image, such as transition-delay and opacity. And it also tells us that this very code is located inside the coco-image-loader.css at the line 24.
Note: Do not edit plugin files. With each plugin update, you may loose your changes. Instead, copy the CSS you would like changed, make your updates, and then paste the updated CSS inside Custom CSS box as shown earlier.
Example 2
In this example, I selected a title text using inspect element tool. What I can see in Rules tab, on my right, is some CSS that shows font weight, padding and line height rules.
Also, it says " Inline:1". When it says inline, that means that this CSS isn't located in a CSS file. What that means next, is that this style is rather located somewhere in the settings.
So, any time you see this, then you know that these options are somewhere in the module settings.
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