How To Update The Contact Form 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
Before you start
- Make sure to have the latest Falkor version installed and WordPress and Divi theme up to date.
Video tutorial
Updating the Contact Form 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 Contact Form modules, you should open the Find box (ctrl+f) and then search for "contact". Search will automatically scroll you to the CSS that relates to the Contact Form 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 Contact Form Modules. You should find what's shown on the screenshot below:
There is the same CSS but for Contact Form module 1 and for Contact Form module 2. Depending on which one you use on your page, edit that CSS.
Then 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!