General Overview - How To Change Colours, Styles And Use The Master CSS File - Pegasus Bundle
Who is this article for
Anyone who would like to learn how to make changes to Pegasus bundle layouts.
• Skill level: intermediate
• Time to complete: 15+ min
Video Tutorial
What you will learn in this article
Our goal 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.
Before you begin
Make sure that you have everything up to date including WordPress, Divi theme and the Pegasus plugin.
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 the most 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).
Usually when you want to edit section and row settings is when you are changing backgrounds and adding or removing margins and padding. 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 the 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->Pegasus.
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 from the file in a new window and paste it in your 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. All CSS under the comment is related to that specific layout you aim to edit.
Edit the CSS you would like and copy the changes you made. Don't copy everything, just the blocks of CSS where you made the 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 is not the same for all browsers, but it is that similar that there is no need to explain it for each one separately.
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 do 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 below, selecting this header image informs me that there is some CSS written in the pegasus-heders.css file. Also, it tells me the exact line number. So if I go to pegasus-header.css file and scroll to line 501, i can see there box-shadow CSS, or width related CSS if I go to line 505, as shown on the screenshot.
Example 2
Sometimes, instead the file name, it just says "inline" as in this example. What this means is that the CSS is not written in any external CSS file, but it's all in the element settings. So, if I would like to edit this text selected on the screenshot, I would go to text module settings and do it there.
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 the 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