[Resolved] Blog page problem with Beaver builder

[Edward]

Hi

I am loving the theme and i am using Beaver Builder with it but i have run into a problem i can not see a way to fix.

On the Blog out put pages the formatting is not right. I use BB to create the blog main page but BB dose not effect the blog output page for a single post so this page is not formatted to look good.

Any way to fix this.

Here is one of the blog post pages. How can i make this look like the rest of my site? Thanks

http://crystalriverweddingservice.com/six/

[Tom]

Hi there,

I’m assuming the main issue is the lack of padding between the container and content?

Have you increased that value in the Spacing section of the Customizer? GP should detect BB running and remove all padding on those specific pages for you, so your other non BB pages should still have padding.

Let me know 🙂

[ed]

Ok i did not try that as i thought it would effect BB that’s great i added some padding..

But i would like the blog pages to look like the rest of my site.

How can i add in a transparent header with a stock image for all the blog pages so it all matches the look of the rest of the site.

If I turn the background white then you can not see the top text site name and tag line with out a image behind it and the top menu is showing blocks around them.

http://crystalriverweddingservice.com/six/

Thanks

[Tom]

Ah I understand what you mean.

Our Page Header add-on allows you to create this kind of layout on the main blog page by going to “Customize > Blog Page Header”.

However, that will only do it on the main blog page – it won’t apply to all blog pages.

The reason plugins like Beaver Builder and GP Premium don’t have this option is because WordPress doesn’t have specific post meta for those pages like it does for regular pages and posts.

[Edward]

So if i am understanding you this can not be done then – (However, that will only do it on the main blog page – it won’t apply to all blog pages.)

Thats what i was afraid of i had this same problem with another theme and BB i was not able to style the blog pages other then the main one.

[Tom]

Exactly, it’s less of a BB or theme issue, it’s an issue with the way WordPress handles those other blog pages (categories, archives etc..). You’ll have a very tough time finding any theme that will allow you to do this by default.

Of course, it’s possible, but it would require custom programming for those archive pages.

Currently, there’s just not the support from WordPress for developers to do this easily using options.

[Edward]

I added in a background top header image in (background images) i then turned the base color background to white and this is close to the other pages now..

Can i set a top header size spacing to just the blog output pages to make the background image taller for them

[Tom]

Maybe something like this will help..

@media (min-width: 769px) {
    .single .site-header,
    .archive .site-header {
        padding-bottom: 100px;
    }
}

[Edward]

Ware do i put that,, i tryed adding it into hooks that did not work

[Tom]

Sorry! This should help: https://generatepress.com/knowledgebase/adding-css/

[Edward]

Ok that worked thanks,

I only have one more problem if their is a way to fix this..

On the blog output page http://crystalriverweddingservice.com/six/

I had to keep the top menu setting with a background color or when in cell phone and tablet view the menu had no background.

Can i some how turn off the background color block on the blog output pages but have a background color set for the cell and tablet view background menu color so the menu can be seen good.

Once i get all this done i will be able to use it over and over on other sites as well then using BB. I can post all this info in the BB group to help others as well.

[Edward]

A transparent setting for the cell menu background color would get nice to.

[Tom]

For sure, you could do this:

@media (min-width: 769px) {
    .single .main-navigation,
    .archive .main-navigation {
        background-color: transparent;
    }
}

Let me know if that helps or not 🙂

[Edward]

Ok thanks that works it did make the blocks show up on roll over but that is not a big deal.

[Tom]

You can add this to remove the hover colors:

@media (min-width: 769px) {
    .single .main-navigation .main-nav > ul > li > a:hover, 
    .single .main-navigation .main-nav > ul > li.sfHover > a,
    .archive .main-navigation .main-nav > ul > li > a:hover, 
    .archive .main-navigation .main-nav > ul > li.sfHover > a {
        background: transparent !important;
        color: white !important;
    }
}

[Author]

Posts