How To Update The Blurb Module Animated Lines - Falkor Bundle
Who is this article for
- Anyone who owns the Falkor Bundle and wants to update the animated lines colour.
Skill level
- Easy
Time to complete
- 5 minutes
Video tutorial
Before you start
- Make sure to have the latest Falkor version installed and WordPress and Divi theme up to date.
Updating the Blurb module animated lines
To change the colour of these lines, you will use the Master CSS file.
Let's first open it: Go to Settings->Falkor Assistant page. Here you'll see a button to open Master CSS as shown on the screenshot:
When you click the button, all the CSS will open in a new window. Copy everything and paste it in your text editor. You can use any text editing program such as Notepad. Our recommendation is a free and a very good program Notepad++.
Edit CSS: Master CSS file is well commented and checking at the comments you can find what you are looking for. For example, if you want to update Blurb modules, you should open the Find box (ctrl+f) and then search for "blurb". Search will automatically scroll you to the CSS that relates to the Blurb modules. You will recognize a comment that indicates where this exact CSS starts.
This time, you want to find lines CSS and you can find it under the comment "/* === Background Color for Animated Lines === */". See the screenshot:
You want to edit these two lines of CSS, marked in green. Change these two values and then copy these two blocks of CSS (everything from the line 11 to 27).
Add CSS to the page: Go back to the page and open page settings:
Paste the CSS inside Custom CSS box.
Click Save and update the page.
Updating module specific CSS code: With the CSS you just added, you have changed the lines colour globally. However, individual modules CSS overrides this global CSS. For that reason, if you still see the lines in the old colour, you will have to change module specific CSS as well.
Open up Find box again and search for Blurb Modules. You should find what's shown on the screenshot below:
Notice how under the main title (Blurb Modules), there are also comments with the individual modules names.
So, if you loaded Square Blurb Module on your page, you should look for CSS under "Square Blurb Module" comment. If you have loaded Compact Blurb Module on your page, you should look for "Compact Blurb Module" comment and so on.
Under the comment that works for you, find the lines or border colours and simply repeat the process from earlier: Update the colour in CSS code, copy only that block of CSS where you've made the changes, and paste that CSS on your page.
That's all!