Anybody Wanna Help Me Push The Limits of Beaver Builder CSS?

Beaver Builder
1

Hey Guys & Gals of the beaver community,

I have received designs from my designer for my Hero Show website and they look great. Only problem is some of the design stuff is kind of intricate and I don’t know the best way to recreate in code. I’d like to use as much css as possible.

It would be a great design for the beaver builder showcase if I can figure it out. I think I mostly need help thinking though what parts of the design can be css and which parts need to be image elements and where I should put them in the css.

Here’s the Design: http://cl.ly/image/1z2U1I1m0F0h

I’m already starting to work on it, I’ll see how far I get.

2

Hey Richard! That looks like a fun one! I think this is certainly doable with Beaver Builder and some custom CSS, but it will be a bit tricky. We’ll be happy to help as much as we can. :slight_smile: Good luck! Can’t wait to see it come together.

3

Okay, so my first challenge is the slanted tabs on the nav.

I’ve found this:
http://jsfiddle.net/P3P3Z/2/

Which looks like it would work. I went ahead and tried it by applying the .arrow styles to
.fl-page-nav .navbar-nav li.current-menu-item > a:before, .fl-page-nav .navbar-nav li:hover> a:before which seems to have worked.

Two questions, how would I add some spacing to keep the tabs from overlapping? how would I modify the code to put the arrow on the left instead of the right?

You can see it on the site now: http://www.theheroshow.com/

4

Wow! You’re making good progress!

Here’s some CSS to add some space to the menu items. Notice that I am applying a margin to the left side of each nav item (except for the first one). Also, I’m dropping some of the padding on the nav items so they still fit:

.fl-page-nav ul li {
  	margin-left: 20px;
}
.fl-page-nav ul li:first-child {
	  margin-left: 0;
}
.fl-page-nav .navbar-nav > li > a {
	  padding: 15px;
}

To swap the arrow, you’ll want to study that jsfiddle a bit. What’s happening is they’re positioning an arrow on top of a div to give the illusion of a slanted edge. You’ll need to move the hidden arrow over to the other side…

5

@Robby - Thanks. I Think i’m just gonna keep the slant on the right.

Any ideas on how I can get the thought bubble to show up completely on the first row?

6

Haha, that works!

Yes, you can change the background-size from cover to contain with CSS. I’d recommend giving the column a CSS class or id, then target that. You can also use this code:

.fl-node-55e771174f9b8 .fl-col-content {
  background-size: contain;
}

Let me know if that works…

7

Hey Robby. That worked great.

The next thing i’m having an issue with is the “Join The League Of HEROs For Free Today” box.

I want the text to be under the title. I tried a clear left and clear both and can’t get the text down below the title div. Any Ideas?

8

Okay, sure. You’ll want to add a “clear:both;” rule to the text, not the heading. I would put a CSS class or id on the rich text module you’re using, then add this css:

.rich-text-class { 
  clear:both;
  margin-top: 10px;
}

Something like that should work. Let me know … :slight_smile:

9

Thanks robby. You’re a css genius. :slight_smile:

So, I’ve decided against the images as backgrounds for the thought bubbles, I can’t get them to be responsive and fit the text inside, without also putting the text in the image.

Anyway, How would I get equal height columns on the last two sections?

Thanks!

10

No worries! :slight_smile:

We actually just released a beta version that has equal height columns! You could try using the beta, and or, you can target the two columns with a CSS class/id and set a min-height. Something like this:

.my-col-1,
.my-col-2 {
  min-height: 500px;
}