General Overview On How to Change Colours, Update Styles and Use Master CSS File - Falkor Bundle

Who is this article for

Anyone who would like to learn how to make changes to Falkor 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 Falkor 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->PLUGIN.

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 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. 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 you can see on the image, I have selected a blurb. More specifically, a before pseudoelement. On my right (marked green), I see transition-delay CSS rule,  and also "falkor-blurb.css:1647" text. That tells us this before pseudoelement has a transition-delay rule assigned and it's written inside the falkor-person.css file. It also tells us the line number, in this case it's 1647.
In other words, design for the animation of this blurbs element is located inside falkor-person.css file and it's on the 1647th line of the file. And this is exactly how you can discover where some design is.

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 just 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, and another CSS showing different font styles.
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 it says inline, then you know that to update it, you should look 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 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