What is the child theme for?

Hello support team! I followed all the instructions but I could not figure out what is the child theme for. I googled child themes and I see you can modify the child theme without modifying the parent theme. Since the child theme is not mentioned in the Quick Start Guide, I guess it’s not compulsory to use it.

In what cases or for what reason do you recommend using the child theme? What is a typical use for it?

Thanks

Hi Alfonso, thanks for reaching out!

It’s a very good idea to use a child theme if you plan on editing a theme’s code files. Say you want to change the CSS of the Beaver Builder theme… If you do this in the parent theme, your changes will be overwritten when you update the theme. If you use a child theme, you can add additional css or modify the PHP and HTML files, and those changes won’t get overwritten.

If you don’t plan to edit any of the theme’s code, then you don’t need to use a child theme. You can still customize the theme using our theme settings. A child theme is only necessary if you plan to modify the code.

Let me know if that clears things up or if you have any other questions. Thanks!

Thank you, Robby! Cristal clear!

Hi

Can you tell me why i am getting this error:-
The parent theme is missing. Please install the “fl-automator” parent theme

Also what is the Automator?

Hi Brian,

In your download area you will see:

Beaver Builder Theme
Beaver Builder Child Theme

You need to install both of these themes. Once you’ve installed both of them, activate the Child theme and you should be up and running.

“Automator” is the original name of the theme before the re-branding to Beaver Builder. It’s just the name of the theme and has no effect on anything.

Let me know if that solves your problem.

Colin

I have installed both these themes.

When i go to the Themes i get this at the bottom.

Broken Themes

The following themes are installed but incomplete. Themes must have a stylesheet and a template.

Name Description
Automator Child The parent theme is missing. Please install the “fl-automator” parent theme.

Any ideas?

Brian,

You should see 2 Beaver Builder themes in your Themes section.

http://awesomescreenshot.com/0313xukn40

Did you install the Beaver Builder Main Theme?

Hi

Yes it appears to be working fine now. I had to delete the files in my server.

Could you also help me… how do i customise the header/nav bar?

Im not sure i want to spend the money on the Dynamic software!.

My logo needs to be higher than where it presently sits and i cant seem to remove the top bar.

I also would like to increase the hight of the nav bar?

http://www.nothankyou.org.uk/

Hi Brian,

Glad you got the child theme working. Thanks for the help, Colin!

You can disable the top bar from the theme settings. Check in the Top Bar section. For the logo, you will need to write some custom CSS to move the logo. Here is some code to start playing around with:

.fl-logo-img {
    position: relative;
    bottom: 5px;
}

Let me know if that works for ya and if you have any other questions.

Glad you got it sorted Brian.

Put this code into the Custom CSS section of your theme and adjust the top and bottom padding values as necessary:

.fl-page-header-container { padding-bottom: 30px; padding-top: 30px; }

What part of the nav bar do you want to change the height of? The main bar part or the sub drop down part?

Please forgive me i am new to this.

you have both given me different code.

Where is the custom CSS section located? is it in the Theme settings if so in what part CSS, Jave or Head?

Also i wish to move the menu nav bar up and increase the height to something similar to my existing site here www.focusma.co.uk

Also how can i increase the font size of the contact number?

Thanks

Brian, no worries! First things first, there is a section in the theme settings called “Code.” You’ll want to copy/paste the code we’re providing into the CSS section. You can combine the two code snippets we provided like this:

.fl-logo-img {
    position: relative;
    bottom: 5px;
}
.fl-page-header-container {
    padding-bottom: 30px;
    padding-top: 30px;
}
.fl-page-header-text {
    font-size: 25px;
}

The first piece of code (that I wrote) will move your logo up about 5 pixels. You can adjust that number if you’d like. The second code snippet (that Colin wrote) will add some extra space to your header; 30 pixels to the top and 30 to the bottom. Again, you can adjust those numbers to your liking. Lastly, I added a 3rd snippet in there that will increase the size of the phone number to 25 pixels.

Let me know if you have any trouble implementing this code or if you have any other questions!

You just beat me to it Robby:)

I think I’ll record a quick video later to demonstrate how to use Inspector or Firebug to make adjustments to your theme.

Brian,

If you reduce those two “30px” values to 10px in the code I provided earlier, I think you’ll get a bit closer to what you’re looking for.

I’ll also post here later once I’ve recorded that quick video because I think it will help you and others a lot.

Colcar, thanks.

I think a video would be greatly appreciated.

Im getting there guys, i’ve just stopped using a UK software called Serif Webplus and they have just released another version which is again non responsive. I need to be able to adjust headings and nav bars as with that software it was drag and drop but had lots of ways of creating nav bars etc…

Im hooked on this wordpress stuff now but still need to make them kind of adjustments!

Is there any other videos you have done?

Also there is a thin line running along the top of my page any ideas on how to remove it?

I also put the code in for the header text (phone number) and it has not changed it?

Hmm, sure enough. Here are a couple more code examples:

.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text {
    font-size: 25px;
}
.fl-page-header-text {
    font-size: 25px !important;
}

Both snippets do the same thing. The first one is the “right” way to do this, but if you decide to change your header/navigation layout (left, right, centered) the CSS will stop working. The second snippet should hit that header text regardless of the layout. Your choice :slight_smile: