Build Your Own Business Website header image

Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 3 – Float a Widget Area in the Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In part 3 of this series on Adding Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin, we show how to float a widget area in the page using the plugin.

Video Transcript

Rick: And so, what we’re going to do here is right now, the sidebar or the widget area comes up here at the top right? But what I really want to do is I want it to sit right over here on the side. And so, the way you make that work is in widget block 1, block 2 settings, under Block Dimensions, I’m going to give it a height of 300 pixels and I’m going to give it a width of 200 pixels. And then because I’ve given it a width, I want to tell it whether or not I want it to float to the left hand side or to the right hand side of the content area. I’m going to float it off to the right here. If we go ahead and hit save now and come back over and take a look at it… okay so there we go, this thing is sitting here off of the right hand side.

Now, we’ll come over to widgets and we’re going to go ahead and place the pages in that one as well, just so that we can… let’s see, let’s close this up and close that up. Open that one and let’s just drag pages into that. Okay so now, it shows up here on the side. Although things are getting pretty close, right? And so what we really want to do is give ourselves a little bit of room here.

So the way we do that is now that we’ve given it a dimension, a height and a width and we’ve given it a float, a left or a right, now we can come along and set some margins. And so let’s say we want 20 pixels margin on the bottom… let’s make it 40 pixels on the bottom. And let’s say on the left hand side, we want 20 pixels. We’ll go ahead and hit save and refresh. And now, you can see stuff is set off. I think maybe 20 pixels isn’t quite enough so we’re going to come over here and add more to block margins.

Oh okay, let’s see. I must have… did I change the block margins for 1? That’s what I did. And of course, we don’t want those there. Yeah, save that. You don’t want to set those… if you don’t set a width, if you leave the block with blank, what it does is it fills up all the available space which is probably what you want to use an awful lot. However, when you set a width then you can start using these margins. You wouldn’t want to use a left or a right margin generally, if you haven’t specified a width because you want it to take up the whole space.

So anyway, we’re going to put 40 pixels on the bottom and 20 pixels on the left and hit save. Refresh this … yeah, okay. We still need more of that. Let’s see, block margins. So we don’t have it in block 1 settings now. Come down here to block 2 settings and we go to block margins and we’ll hit the bottom margin as 40 and the left margin as 49. Hit save. Now, if I’ve screwed up my code…oh look at that. You’re probably right. What the heck? Oh that is comedy. So I didn’t have it here in my code. I just had an error with my execution.

Okay well, thank you for pointing that out. I appreciate that because I would have worked to try and figure it out and then I would have said, “Well, shoot! Now, I can’t repeat the problem.” So, thank you Cindy.

Cindy: You’re welcome.

Rick: Okay.

0 Comments… add one
0 comments… add one