[brickplaystudio]

Aside from the main issue I posted previously, I have questions about the following:

1) How do you change the logo size in the header?

I am trying to change the size of my logo in the main menu to be bigger. I looked through the CSS file and tried to change the “max height” and “width” of when the logo image is referenced and the logo size still does not change.

2) Can the WPBakery Page Builder be used to change the design of the header? Or is the CSS file the only way to make changes to it?

3) How do you change the Preloader image? Or disable it completely.

4) How do you remove the white dashed border that appears on the cover image of the product categories, buttons, and other images?

5) Is there an easy way to copy the footer from one homepage style and apply it to another? For example, if I like the footer in homepage 2, but want to keep the rest of the design of homepage 1, is there a way to just copy the footer quickly into homepage 1?

[Althemist]

Hello brickplaystudio,

1. The logo height is restricted to 50px in order to preserve the layout on different devices. It can’t be bigger than that. There is no limit to the width.

2. No, you can’t use WP Bakery to edit template parts. It’s for the content only

3. There is an option to disable the pre-loader in the Theme Options > General tab (the second setting)

4. The only way to remove the dashed border would be with CSS.

5. It’s the same footer. Just the footer “sidebar” is disabled on Home 2. (there is a setting for this in the page settings when you edit it in the admin area).

[brickplaystudio]

You only partially answered my questions. Please clarify the following:

3) How do I change the preloader image?

4) Please give me the reference of where in the CSS the dashed border is defined.

5) I was giving homepage 2 as an example – I wasn’t asking how to make homepage 1 footer look like homepage 2 footer. I asked this question to see if there is an easy way to copy different elements from a section of a certain page to a section of another page, or if it just has to be done manually.

[brickplaystudio]

Also, is there a workaround to the logo restriction? 50px is EXTREMELY limiting in terms of what you can create. For example, I’ve seen other websites where the logo is bigger at first, but then it shrinks on the “sticky menu”. Is there a way for me to just define the different height for the main menu and then keep the 50px restriction for the sticky menu?

If I wanted to remove the restriction (I am fine testing how much it breaks apart the menu on different devices), how would I do it? Please give me the specific template files, and line number of code where I should look.

Thanks.

[Althemist]

Hi brickplaystudio,

3. The only way to change the image would be with CSS. It’s an image background assigned with CSS to the preloader container.

4. There is no specific place where you should do this, as you should never change the original theme files. You can add custom CSS in the default WordPress customizer, or by using a plugin OR in best case scenario in a child theme’s style.css.

5. Especially for the footer – this is just a standard widget area (i.e. “sidebar”). The theme gives you options to change that widget area on per page basis, so you can easily create new sidebar under Theme Options and assign it as footer sidebar in the page settings.

As for the logo size, with custom CSS it can be increased a bit (not much), it may lead to other problems. It’s have been discussed here with some CSS examples:

Sub menu and third menu level font size and mobile logo size

Basically, it would be something like this:

#header #logo {
    max-height: 60px;
    margin: 10px 15px 10px 0;
}
#header #logo img {
    max-height: 60px;
}

[brickplaystudio]

I found the location of the preloader image and preloader css file, but I do not see a setting to change the color of the preloader circle? Could you please refer me to the file or additional CSS I should add to make the change?

For now, I’ve done a workaround, but I would like to make the change properly.

[Althemist]

Hi brickplaystudio,

Basically the preloader background gets the color set as main accent color in Theme Options > Common Styles.

If you need to set a color different than the main accent color, you can sue the following CSS:

#spinner {
    background-color: #your-color-here;
}

If you plan to make more changes in the theme styling, I’d recommend you to install and use the included child theme. It’s the best way to add changes.

If you are new to child themes, here is the information you need to know:

Everything You Need To Know About WordPress Child Themes

[brickplaystudio]

Just activated the child theme. Thank you for the recommendation. Now I can edit the template files without having to worry about having to revert to backups. 🙂

[Author]

Posts