Applying Genesis Styles and Settings to BB

I am running the Genesis Framework with the No Sidebar theme.

By default, what – if any – of the Child Theme’s settings and existing CSS (and CSS written into the CSS StyleSheet Editor) is automatically applied to pages created with Beaver Builder?

For example, my current home page page calls the latest 7 posts and styles them with a 1% margin as follows and Entry Pagination is set to next/previous not numerical.
98%
58% 38%
38% 58%
58% 38%
98% Next Page

When I add the Posts module in Page Builder, everything is displayed in a verticle column, not taking up the full width. Entry Pagination is now numerical.

Should BB inherit the genesis settings? New to Beaver Builder so any help to get aligned would be great!

Desired Format: http://www.add1tbsp.com
Page Builder: http://www.add1tbsp.com/home/

Ok, so much of my issues were resolved by enabling the Dambuster plug-in.

My new challenge is the BB modules are positioned so high that they are being cut off by my nav bar. Interesting enough, it works fine on mobile though…

Hi Evan,

Thanks for informing us the first issue has been resolved. In regards to your second issue related to modules being partly hidden by the nav. Can you provide a link to a page where this occurring, please?

Thanks,
Danny

Hi Danny,

Here’s the link: http://www.add1tbsp.com/home/. You’ll notice that part of the top row of posts is cut-off by the nav.

That said, still trying to figure out how I can use the gallery module and rows to create layout like:

Row 1: 1 Post of 100% width
Row 2: 2 Posts of 50%
Rowe 3: 3 Posts of 33%

thanks!

I solve the post-cut off issue with the following code. Is this the recommended solution?


.fl-builder-content {
	top: 60px;
	position: relative
}

Hey Evan,

Looks like the post cut-off issue is from the theme. Are you using a different page template on the BB page? Check the screenshot below. It shows that the theme is adding a style of margin: 78px auto 0; to the site-inner class. This should pull the content down. But for some reason, another styling is overriding it with margin: 0px auto; and is coming from the theme as well.

Overriding CSS is totally fine so there shouldn’t be an issue with what you’re doing. You might want to place that styling in a media query though, since it would apply to the mobile view of the page, leaving a space at the top. The code below should do the trick.

@media (max-width: 767px) {
  .fl-builder-content {
    top: 60px;
    position: relative
  }
}

Re the Gallery module, that’s not possible unfortunately. We already have a feature request in place though so if you’ve a minute, feel free to vote for it on the link below. :slight_smile:
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/12856809-allow-gallery-columns-options-in-gallery-module

Hope this helps!

Ben

Thanks I’ll look into the code above.

One more question, is there a reference guide of all of the BB custom CSS? For example, I inserted a regular post module and noticed it inserted a gray horizontal line. I’ve been combing through my CSS but can’t see to target it or figure out what property is used.

Any ideas how to remove that line would be much appreacited!

An update:

I am using the default page template for the BB page and am using Dambuster. I have confirmed the plugin is adding the margin: 0px auto; styling (to enable full width).

Any ideas on how to enable full width without the plug-in? Perhaps there is some styling to apply to fl-builder-content?

Hey Evan,

Unfortunately, we don’t have a reference for all BB classes. But this should be easy to spot using the browser’s dev tools. I’m using Chrome’s if that helps. :slight_smile:

The grey horizontal line is there for when you’ve more than one post. Did you want to remove it on the first Posts module on your page, or on the second, or on both?

Not really sure about your second question though, as I haven’t played around with Genesis before. If you can disable the Dambuster plugin, we may be able to check the styling that’s limiting the content area then override it to make it full width, if possible. :slight_smile:

Ben

Hi Ben

Yes, I would like to be able to target the horiztonal grey line on the posts module. I can target the individual modules, but unsure what class and property is used to add the line.

thanks!

Hey Evan,

The snippet below should take care of it.

.fl-post-feed .fl-post-feed-post {
  border-bottom: none;
}

Ben

Thank you!

Looks like BB is applying a style to links, which is overriding my default.

Any idea how to get rid of the grey line under text/image links? I tried to insert the following code but wasn’t able to remove the line

.post-1726 .fl-post-feed-title a {
	color: #333;
	text-decoration: none;
}

.post-1726 .fl-post-feed-title a:hover,
.post-1726 .fl-post-feed-title a:focus {
	color: #ee2324;
}

Hi Evan,

That is actually coming from your theme’s CSS which is using the following:

.entry-content a {
  border-bottom: 1px solid #ddd;
}

You can add the following which should remove the border-bottom.

.entry-content a {
  border-bottom: 0;
}

Thanks,
Danny

Ha! I got so caught up looking in the BB code, I didn’t think to check the obvious place. Thanks and apologies!

Marking this as resolved.

Hi Evan,

No apologies needed. Happy that the issue has been resolved.

Thanks,
Danny